Componentes de Bootstrap para interfaces

En esta sección, daremos un resumen de los componentes útiles para interfaces que provee Twitter Bootstrap. Planeamos usar algunos de estos componentes en futuros ejemplos y esta sección debería dar una idea de como podemos usar estos artilugios, widgets, en nuestro sitio web.

Barra de Navegación

La barra de navegación está usualmente colocada en la parte superior de nuestro sitio web y contiene los enlaces a las páginas principales como Home, Descargas, Soporte, Acercad de, etc. Twitter Bootstrap provee un bonito estilo visual para la barra de navegación, navbar, (ver figura C.7):

Figura C.7. Barra de navegación

Como podemos ver en la figura de arriba, una barra de navegación típica tiene una cabecera, donde la marca de nuestro sitio web se puede colocar, y los enlaces a las páginas principales. Para colocar una barra de navegación en nuestra página podemos usar el siguiente código HTML:

<nav class="navbar navbar-default" role="navigation">
  <div class="navbar-header">
    <a class="navbar-brand" href="#">Hello World</a>
  </div>
  <ul class="nav navbar-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Download</a></li>
    <li><a href="#">Support</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

Arriba en la línea 1, usamos el elemento <nav> que contiene toda la información de la barra de navegación. La clase CSS asociada .navbar está definida en Bootstrap y provee la apariencia básica de la barra de navegación. La clase CSS .navbar-default especifica el tema «por defecto» para la barra de navegación.

El atributo opcional role es un atributo HTML que permite comentar los elementos de la página con información semántica, que una maquina puede extraer, sobre el propósito de un elemento. En este ejemplo, el atributo señala que el elemento <nav> se usa para navegar.

En las líneas 2-4, definimos el area de cabecera para la barra de navegación que contiene el enlace Hello World. El enlace de la marca generalmente apunta a la página principal de nuestro sitio web. El enlace tiene la clase .navbar-brand que realza visualmente el texto.

En las líneas 5-10, especificamos los enlaces de navegación para las páginas Home, Descargas, Soporte y Acerca de. Estos enlaces se organizan dentro de un elemento de lista no ordenado <ul>. El elemento tiene las clases CSS .nav y .navbar-nav que colocan los ítems en línea y provee el efecto de sombreado cuando se coloca el cursor sobre el enlace.

Menú Desplegable

En la barra de navegación de Bootstrap es posible usar un menú desplegable como elemento de navegación. Por ejemplo, si la sección Soporte de nuestro sitio se subdivide en las páginas Documentación y Ayuda estas se pueden implementar usando un menú desplegable (ver figura C.8).

Figura C.8. Barra de navegación con un menú desplegable

Podemos definir el menú desplegable remplazando el elemento Soporte de la lista en el ejemplo anterior de la siguiente manera:

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
     Support <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Documentation</a></li>
    <li><a href="#">Help</a></li>
  </ul>
</li>

En el código de arriba, usamos el elemento <li> con la clase CSS .dropdown que marca al elemento como un menú desplegable (línea 1). Entre las líneas 2-4, el elemento <a> define el enlace que se muestra cuando el menú está oculto (el texto Soporte está seguido por un triangulo caret).

Cuando el visitante del sitio hace clic sobre el enlace, el menú desplegable aparece (líneas 5-8). El elemento <ul> que define una lista no ordenada define su apariencia visual con la clase .dropdown-menu. El menú desplegable contiene dos elementos: los enlaces Documentación y Ayuda.

Barra de Navegación Plegable

De la misma manera que el sistema de rejillas, el componente navbar soporta diferentes tipos de resoluciones de pantalla. Con dispositivos de baja resolución, la barra de navegación puede plegarse como se muestra en la figura C.9.

Figura C.9. Barra de Navegación Plegada

Como podemos ver en el modo plegable, solo se muestra el encabezado y tres barras horizontales a la derecha dentro del botón denotan el menú. Haciendo clic en el botón se expandirán los elementos ocultos de la barra de navegación.

Definimos una barra de navegación plegable como se muestra en el siguiente ejemplo:

<nav class="navbar navbar-default" role="navigation">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse"
            data-target=".navbar-ex1-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#">Hello World</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse navbar-ex1-collapse">
    <ul class="nav navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">Download</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Support <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Documentation</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
    </ul>
  </div><!-- /.navbar-collapse -->
</nav>

Abajo en las líneas 3-12, definimos el encabezado de la barra de navegación que se mostrará con independencia de la resolución de la pantalla. El encabezado contiene el botón con tres barras horizontales y un texto con la descripción «Toggle navigation».

La parte plegable del menú se puede ver entre las líneas 15-30. En esta área, colocamos nuestros enlaces de navegación y los elementos del menú desplegable.

Barra de Navegación con Estilo Inverso

La barra de navegación se puede mostrar usando dos «temas» estándar: el tema default que vimos arriba y el tema inverse. El tema inverse hace que los elementos de la barra de navegación se muestren en colores oscuros (figura C.10). Es probable que ya hallamos visto la barra de navegación inversa en el demo Zend Skeleton Application.

Figura C.10. Barra de Navegación con el Estilo Inverso

El estilo inverso se define simplemente remplazando la clase .navbar-default en el elemento <nav> por la clase .navbar-inverse:

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Migas de Pan

Las migas de pan, en ingles Breadcrumbs, es un componente de interfaz útil que se puede usar junto con la barra de navegación para dar al visitante una idea de su actual ubicación dentro del sitio (figura C.11).

Figura C.11. Migas de Pan

En la figura de arriba tenemos un ejemplo de migas de pan para el sistema de documentación de nuestro sitio. Como las paginas de documentación tienen varios niveles, las migas de pan le dicen al usuario que página está visitando actualmente y así no se perderá y será capaz de regresar a la página que visitó previamente o a las páginas del nivel superior.

Para definir las migas de pan usamos una lista ordenada de elementos <ol> con la clase CSS .breadcrumb (ver un ejemplo abajo):

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Support</a></li>
  <li class="active">Documentation</li>
</ol>

Paginación

El componente de paginación es útil cuando tenemos una larga lista de elementos para mostrar. Si una larga lista se muestra en una sola página el usuario estará obligado a hacer varios desplazamientos a través de la página para ver el final de la lista. Para mejorar la experiencia del usuario separaremos la salida en páginas y usaremos el componente de paginación para navegar entre las páginas (figura C.12):

Figura C.12. Paginación

Para definir la paginación como se muestra en la figura de arriba usamos el siguiente código HTML:

<ul class="pagination">
  <li><a href="#">&laquo; Newest</a></li>
  <li><a href="#">&lt; Newer</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">Older &gt;</a></li>
  <li><a href="#">Oldest &raquo</a></li>
</ul>

Botones y Glyphicons

Twitter Bootstrap provee un bonito estilo visual para elementos de tipo botón (figura C.13).

Figura C.13. Botones

Para crear botones como los de la figura de arriba usamos el siguiente código HTML:

<p>
  <button type="button" class="btn btn-primary">Save</button>
  <button type="button" class="btn btn-default">Cancel</button>
</p>

En el código de arriba usamos la clase CSS .btn para asignarle al botón su estilo visual. Además, usamos la clase .btn-primary para el botón Save (que es generalmente el botón primario de un formulario) y la clase btn-default para un botón que comúnmente no es primario como Cancel.

Para expresar mejor la utilidad de los botones, Bootstrap provee varias clases adicionales: .btn-success (para botones que aplican cambios sobre la página), btn-info (para botones informativos), .btn-warning (for botones que pueden tener efectos no deseados) y btn-danger (para botones que llevan a consecuencias irreversibles). Para un ejemplo del uso de estos estilos para botones veamos el siguiente código:

<p>
  <button type="button" class="btn btn-default">Default</button>
  <button type="button" class="btn btn-primary">Primary</button>
  <button type="button" class="btn btn-success">Success</button>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-warning">Warning</button>
  <button type="button" class="btn btn-danger">Danger</button>
</p>

La Figura C.14 muestra la apariencia que resulta de los botones:

Figura C.14. Estilo de los Botones

Bootstrap incluye 180 iconos (llamados Glyphicons) que se pueden usar junto con botones, menus desplegables, enlaces de navegación, etc. Para agregar un icono a un botón podemos usar un código como el siguiente:

<p>
  <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-plus"></span> Create
  </button>
  <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-pencil"></span> Edit
  </button>
  <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-remove"></span> Delete
  </button>
</p>

En el código de arriba definimos una caja de herramientas simple que contiene tres botones: Create, Edit y Delete. Colocamos un icono en cada botón con la ayuda del elemento <span>. El elemento <span> deberá tener dos clases: la clase .glyphicon que es común a todos los iconos y la clase que representa al nombre del icono. En el ejemplo de arriba, usamos la clase .glyphicon-plus para el botón Create, .glyphicon-pencil para el botón Edit y glyphicon-remove para el botón Delete. El resultado de nuestro trabajo se muestra en la figura C.15.

Figura C.15. Botones con Iconos

Podemos cambiar el tamaño del botón especificando la clase .btn-lg para un botón grande, .btn-sm para uno pequeño y .btn-xs para un botón extra-pequeño. Por ejemplo, en la figura C.16, se muestra un botón grande de Download.

Figure C.16. Botón Grande

Para definir un botón como este podemos usar el siguiente código HTML:

<button type="button" class="btn btn-success btn-lg">
  <span class="glyphicon glyphicon-download"></span> Download
</button>