Hasta ahora hemos creado la funcionalidad básica de nuestra aplicación, ya podemos desplegar nuestros sitios favoritos filtrados por categoría, en este tema veremos como integrar bootstrap y comenzaremos a trabajar en el layout principal.

Lo primero que necesitamos hacer es instalar bootstrap, para eso utilizaremos el CDN que nos proporcionan, en el archivo index.html agregamos el siguiente código.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

Con eso agregaremos bootstrap y estamos listos para iniciar a codificar el layout. 

Primeramente vamos a definir el HTML que necesitamos para la barra superior de la siguiente manera:

<body ng-controller="MainController">
<div class="wrapper">
  <header class="header header-fixed navbar container-fluid">
      <div class="row">
          <div class="brand col-sm-3">
              <a href="#" class="navbar-brand">
                  <i class="glyphicon glyphicon-heart-empty"></i>
                  <span class="heading-font">Bookmarks App</span>
              </a>
          </div>
      </div>
  </header>

</div>

...

Ahora definimos el sidebar, este debe ir dentro del wrapper. 

<body ng-controller="MainController">

  <div class="wrapper">

  <!-- <header> ...  -->
  
  <div class="box">
      <div class="row">
        
          <!-- sidebar -->
          <div class="column col-sm-3" id="sidebar">
              <p class="nav-title">
                Categories 
                <a href="#" class="pull-right"><i class="glyphicon glyphicon-folder-open"></i></a>
              </p>
              <ul class="nav">
                  <li ng-repeat="category in categories" ng-class="{active: isCurrentCategory(category)}">
                      <a href="#" ng-click="setCurrentCategory(category)"> <i class="glyphicon glyphicon-tags"></i> {{category}}</a>
                  </li>
              </ul>
          </div>
          <!-- /sidebar -->
        
          <!-- main here -->
          
          <!-- /main here -->
        
      </div>
  </div>
</div>

En el sidebar estamos poniendo las categorías, aquí hemos agregado algunos iconos así como pequeño titulo con un botón para agregar nuevas categorías. Ahora vamos a agregar el contenido principal dentro de los comentarios main here del código anterior.

<div class="column col-sm-9" id="main">
    <div class="padding">
        <div class="full col-sm-9">
          
            <!-- content -->
            <h2>
              Category: {{currentCategory}}
              <a href="#" class="btn btn-primary btn-xs pull-right"><i class="glyphicon glyphicon-plus-sign"></i> New bookmark</a>
            </h2>
            <ul>
              <li ng-repeat="bookmark in bookmarks | filter: {category: currentCategory}">
                  <p>
                      <a href="/courses/introduccion-a-angular-js/articles/%7B%7Bbookmark.url%7D%7D/">{{bookmark.name}}</a> 
                      <i class="glyphicon glyphicon-trash"></i>
                      <i class="glyphicon glyphicon-pencil"></i><br/>
                      <small>{{bookmark.url}}</small>
                  </p>
              </li>
          </ul>
            
            
          
        </div><!-- /col-9 -->
    </div><!-- /padding -->
</div>

Estamos desplegando la categoría seleccionada en el título, también agregamos un botón para agregar nuevos bookmarks y desplegamos los links en la categoría seleccionada. Recuerda que puedes descargar el código fuente para evitar problemas.

Ya tenemos el layout principal, ahora vamos a agregar algunos estilos para cambiar algunos colores, tamaño de letra, etc. Vamos a crear un archivo llamado css/styles.css donde escribiremos el siguiente código.

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
body{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:400}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6,.heading-font{font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif}

/* custom template */
html, body {
   height: 100%;
   font-family:'Open Sans',arial,sans-serif;
}

.header{
    background-color: #1582dc;
    min-height: 50px;
    z-index: 1000;
    border-radius: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

.header .brand{
    background-color: #147bd0;
}

.header .brand i{
  font-size: 13px;
  color:#b6a951;
}

.header .brand a:hover i{
  color:#b5544a;
}

.header .heading-font{
    color: rgba(219,237,252,0.9);
    font-size: 14px;
    letter-spacing: 1px;
    padding-top: 0;
    padding-bottom: 0;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
    *zoom:1;
}

.column .padding {
    padding: 20px;
}

.box {
    bottom: 0; /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #2e353d;
    color: #98a8b9;
}


#main {
    background: #f1f4f9;
}

#main h2{
  margin: 80px 0 20px 0;
  font-weight: normal;
  color: rgb(89, 89, 90);
  font-size: 17px;
}

#main .full ul{
  margin: 0;
  padding: 0;
  list-style-type: none;
}

#main .full ul i{
  float:right;
  margin:0 5px;
  display:none;
  cursor: pointer;
}

#main .full ul li:hover i{
  display:inline-block;
}

#sidebar .nav-title{
  margin-top: 80px;
  text-transform: uppercase;
  font-size: 11px;
}

#sidebar a{
  color: #98a8b9;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 13px;
  padding-left: 0;
  transition-delay: 0s;
  transition-duration: 0.25s;
  transition-property: all;
  transition-timing-function: ease;
}
#sidebar a:hover,
#sidebar .active a{
  background: transparent;
  color:#fff;
}
#sidebar a i{
  margin-right: 20px;
}


/* center and adjust the sidebar contents on smaller devices */
@media (max-width: 768px) {
  #sidebar,#sidebar a.logo {
    text-align:center;
    margin:0 auto;
    margin-top:30px;
    font-size:26px;
  }
  #sidebar a.logo {
    font-size:50px;
    height:75px;
    width:75px;
    margin-bottom:30px;
  }

  #main .full ul li i{
    display:inline-block;
  }
}




/* bootstrap overrides */

h1,h2,h3 {
   font-weight:800;
   font-family:'Open Sans',arial,sans-serif;
}

.col-sm-9.full {
    width: 100%;
}

No me voy a detener a explicar el CSS ya que este es un curso de Angular JS, pero lo único que hicimos fue importar una fuente de google fonts, cambiar algunos tamaños, colores, etc. 

Antes de probar los cambios en el navegador, es importante agregar el nuevo CSS al documento html de la siguiente manera.

<link rel="stylesheet" type="text/css" href="/courses/introduccion-a-angular-js/articles/css/style.css">

Ahora si podemos probar nuestros cambios, en el navegador deberías ver algo como la siguiente imagen.

Ahora se ve mucho mejor, si comenzamos a redimencionar el navegador deberíamos ver que el layout se adapta a las diferentes resoluciones.

Por el momento aquí vamos a parar, recuerda descargar el código fuente, el video y ver el demo de este tutorial. Si tienes alguna duda puedes dejarla en los foros preferentemente.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a Angular JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!