Listas sin estilo en Bootstrap

27/Jul/2015 Bootstrap Deja un comentario

Dentro de las opciones que nos proporciona Bootstrap para el manejo de listas encontramos la de poder crear listas sin estilo. Para poder crear listas sin estilo en Bootstrap deberemos de conocer como crear una lista en HTML y la clase que nos permite gestionar la visualización de la misma.

Las listas sin estilo en Bootstrap acaban mostrando una lista de elementos los cuales no tienen ningún hito o icono inicial que preceda cada uno de los elementos.

Pero vayamos a la codificación. Lo primero que hay que hacer para poder crear listas sin estilo en Bootstrap es definir una lista sin orden. Para ello vamos a utilizar el elemento ul.

  1. ...
  2. </ul>

Luego iremos añadiendo cada uno de los elementos. Cada elemento de la lista está rodeado mediante el elemento li.

  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>

Al crear este código veremos en nuestra página web algo parecido a: lo siguiente

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

Vemos que cada elemento de la lista está precedido por un bullet (o punto negro).

Ahora pasemos al manejo de la lista por parte e Bootstrap. Si queremos tener una lista sin estilo con Bootstrap lo que tenemos que hacer es marcar a la lista mediante la clase list-unstyled. Lo cual codificaremos de la siguiente manera:

  1. <ul class="list-unstyled">
  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 efecto que habremos conseguido será algo parecido a lo siguiente:

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

En este momento vemos que ya no hay ninguna marca delante de cada uno de los elementos de la lista. Así habremos conseguido tener una lista sin estilo con Bootstrap.

Vídeos sobre Bootstrap


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*