Artículos
Bootstrap

Listas sin estilo en Bootstrap

27/Jul/2015

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.

    ...

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

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

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:

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

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.

Código Fuente

Descárgate el código fuente de Listas sin estilo en Bootstrap
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre Bootstrap

Disfruta también de nuestros artículos sobre Bootstrap en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test Bootstrap

¿Te atreves a probar tus habilidades y conocimiento en Bootstrap con nuestro test?

Test Bootstrap
Suscribir
Notificar de
guest
0 Comentarios
Opiniones integradas
Ver todos los comentarios