Listas menú con Bootstrap

31/Jul/2015 Bootstrap

Una de las formas más comunes y accesibles de crear un menú de elementos es utilizando una lista y convirtiéndola en un formato menú modificando sus estilos. En este ejemplo vamos a ver como podemos crear listas menú con Bootstrap.

Lo primero que deberemos será crear una lista desordenada mediante un elemento ul de HTML:

  1. <li>Elemento 1</li>
  2. <li>Elemento 2</li>
  3. <li>Elemento 3</li>
  4. <li>...</li>
  5. <li>Elemento N</li>
  6. </ul>

Esto creará una lista normal con sus bullets. Quedando algo parecido a esto:

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • ...
  • Elemento N

Para convertir este tipo de listas en listas menú con Bootstrap solo tenemos que manejar la clase "list-inline". Asignando dicha lista al atributo class del elemento ul.

De esta manera el código de nuestras listas menú con Bootstrap sería:

  1. <ul class="list-inline">
  2. <li>Elemento 1</li>
  3. <li>Elemento 2</li>
  4. <li>Elemento 3</li>
  5. <li>...</li>
  6. <li>Elemento N</li>
  7. </ul>

El resultado que obtendríamos en nuestra página web se parecería a lo siguiente:

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • ...
  • Elemento N

Aunque las listas menú con Bootstrap son la base para construir los menús de nuestras páginas web no hace falta que profundices sobre este elemento. Ya que Bootstrap nos ofrece otros elementos más avanzados para la gestión de menús como son los nav y navbar. Pero esto ya los veremos en otros ejemplos.

Espero que os haya gustado y os sea de utilidad el saber cómo crear listas menú con Bootstrap.

Vídeos sobre Bootstrap


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D