Encabezados y elementos de navegación en Bootstrap

En este artículo se detallan los encabezados de página y los elementos de navegación en Bootstrap, estos elementos son utilizados para resaltar una información al usuario o para facilitar la navegación entre diferentes secciones (respectivamente). A lo largo del artículo se pueden observar diferentes ejemplos y sus códigos desarrollados. Adicionalmente para crear dicho contenido en la web, se crea un fichero de ejemplo con los elementos que se explican en el artículo y como en anteriores posts, se facilita al final del mismo un fichero de ejemplo y también se incluye un enlace para probar los ejemplos sin necesidad de descargar el contenido.

 

ENCABEZADOS DE PÁGINA:

Los encabezados de página en Bootstrap son utilizados para resaltar un texto sobre los demás, se puede apreciar en el siguiente ejemplo. Es posible indicar un encabezado de tamaño grande con un subencabezado (como en el ejemplo “con un texto secundario”) o simplemente insertar el encabezado estándar.

El código desarrollado es bien simple, se crea un div con class=”page-header” dentro de este div se inserta un tag h1 con el titular del encabezado, si se quiere insertar un texto secundario se crean las etiquetas <small>…</small> con el texto secundario dentro de estas etiquetas. Posteriormente se crean tantos párrafos como explicación o descripción se quiera dar del encabezado.

 

ELEMENTOS DE NAVEGACIÓN:

Los elementos de navegación son elementos adaptados al diseño web responsive y se utilizan como elemento principal de navegación, sobre todo para que sea más fácil e intuitivo para el usuario navegar por los diferentes elementos de una sección. A continuación se muestra un ejemplo de elemento de navegación:

El código desarrollado utilizado es el que se puede apreciar en la siguiente captura. Se crea un tag ul  con class=”nav nav-tabs” dentro de este ul se crean los diferentes li que serán los elementos por los que el usuario podrá navegar. Para indicar el elemento principal se inserta la class=”active” dentro del li deseado.


 
ELEMENTOS DE NAVEGACIÓN CON BOTONES:

Los elementos de navegación también pueden ser creados con botones, para ello se modifica la class del tag ul insertando la clase nav nav-pills en lugar de nav nav-tabs. Los demás elementos son los mismos que los utilizados en los elementos de navegación simple.

 

 

ELEMENTOS DE NAVEGACIÓN CON BOTONES VERTICALES:

Bootstrap adicionalmente permite crear elementos de navegación verticales, para ello simplemente se añade dentro del class principal del tag ul la clase nav-stacked. En la siguiente captura se puede ver un ejemplo y el código desarrollado que se utiliza en esta sección.

 

ELEMENTOS DE NAVEGACIÓN DESHABILITADOS:

Es posible deshabilitar los elementos de navegación que se deseen, insertando la class=”disabled” en el li  seleccionado se desactivará el elemento de navegación. En la siguiente captura se muestra un ejemplo y su código desarrollado, como se puede apreciar, cuando el usuario se sitúa encima del elemento deshabilitado el ratón muestra una señal de “prohibición”, mientras que si el usuario se sitúa en un enlace activo, muestra la acción del ratón para poder pulsar sobre el elemento.


 
ELEMENTOS DE  NAVEGACIÓN CON MENÚ DESPLEGABLE:

Los elementos de navegación pueden tener enlaces con menús desplegables, en el siguiente ejemplo se puede observar un menú desplegable con uno de los elementos. Para insertar un menú desplegable en uno de los elementos se crea un li con class=”dropdown”, a continuación dentro de este li se crea un tag a con class=”dropdown-toggle”data-toggle=”dropdown”, se inserta dentro de los tag’s “a” el titular del elemento y un span para insertar la flecha. Finalmente después de los tag’s “a” se crea un ul con class=”dropdown-menu” insertando en él los diferentes puntos del menú.

 

También está disponible esta misma opción para los elementos de navegación con botones. La estructura es la misma la única modificación es la class del ul, cuya class se modificará insertando nav nav-pills. Ejemplo de menú desplegable con elementos de navegación con botones:

 

EJEMPLO EN LÍNEA: se crea el siguiente enlace para que se pueda probar en la web los ejemplos comentados en el artículo. Para ello simplemente pulsar sobre el siguiente botón y la página se redirige a la web del ejemplo, sin necesidad de tener que descargarlo.

VER EL EJEMPLO EN LÍNEA

Además también se adjunta el fichero comprimido con los ejemplos utilizados en el post, para los que prefieren practicar de manera local en sus pc’s: encabezados & elementos de navegación. En próximos artículos se empezará una nueva sección, donde se podrán emplear varias técnicas explicadas a lo largo de los posts explicados en la web.

 

Se recuerdan los artículos relacionados sobre Bootstrap:

 
Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *