Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Bootstrap Listas
#1
Listas de elementos


Las listas de elementos de Bootstrap 3 son componentes bastante flexibles y poderosos, ya que permiten mostrar listados que están formados por elementos complejos.

Ejemplo sencillo
La lista más sencilla está formada por un listado no ordenado de elementos con las clases CSS adecuadas. A partir de este listado básico, puedes añadir otros estilos y elementos, tal y como se explica en las siguientes secciones. Ejemplo:

Código:
<ul class="list-group">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Morbi leo risus</li>
 <li class="list-group-item">Porta ac consectetur ac</li>
 <li class="list-group-item">Vestibulum at eros</li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-lista-objetos.png]
Listas de elementos con badges
Al añadir un componente de tipo badge a cualquier elemento de una lista de objetos, el badge se alineará a la derecha automáticamente. Ejemplo:

Código:
<ul class="list-group">
 <li class="list-group-item">
   <span class="badge">14</span>
   Cras justo odio
 </li>
</ul>

Así se ve este ejemplo en tu navegador:

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-lista-objetos-badges.png]
Listas de elementos con enlaces
Para crear una lista de elementos pinchables, reemplaza los elementos 
<li> por elementos <a> y enciérralos dentro de un elemento <div> en vez de un elemento <ul>
Ejemplo:

Código:
<div class="list-group">
 <a href="#" class="list-group-item active">
   Cras justo odio
 </a>
 <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
 <a href="#" class="list-group-item">Morbi leo risus</a>
 <a href="#" class="list-group-item">Porta ac consectetur ac</a>
 <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-lista-objetos-enlaces.png]
Listas de elementos complejos
El componente de las listas de elementos es tan flexible que puedes incluir prácticamente cualquier código HTML, incluso cuando todos los elementos de la lista son enlaces. Ejemplo:

Código:
<div class="list-group">
 <a href="#" class="list-group-item active">
   <h4 class="list-group-item-heading">Título del elemento de la lista</h4>
   <p class="list-group-item-text">...</p>
 </a>
</div>

Y esta es la imagen del aspecto que debería tener este ejemplo:
[Imagen: componentes-lista-objetos-complejos.png]
FUENTE
[Imagen: nuevo_logo.jpg]
Desarrollo Digital
Alejandro Ramirez
Visita mi Blog 
https://alexramirez.ml
WWW
#2
Excelentes ejemplos de código, muy bien explicado y excelentes ejemplos... 

Me gustan mucho como quedan las listas con elementos complejos.
WWW
#3
Me gustan mucho como quedan las listas con elementos complejos, muy buena man.

Saludo.
#4
Muy bueno, yo estoy haciendo un proyecto y el Ing. nos pidió que le metieramos de todo jaja (html5, css3, js, y java)
Death Stranding en la E3 Huh ... Me quedaron más preguntas que respuestas  Astuto
#5
Yo prefiero el método con el plugin automático pero +1
#6
muy buno, no sabia como se ahcia este tipo de menu
[Imagen: Nexo_Firma.gif]
WWW
#7
La verdad es que no a toda la gente le gusta pero dan un aspecto muy elegante y es sencillo de implementar.

Además hay mucha documentación y soporte en la web, porque si tienes problemas, puedes encontrar la solución en la web.
[Imagen: logo_300.png]
[-] El post de fercol tiene 1 Me Gusta de parte de:
  • cmascreativo.ml


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Bootstrap Formulario Basico cmascreativo.ml 5 102 08-10-2018, 06:53 AM
Último mensaje: Boreas
  Bootstrap Barras de Progreso cmascreativo.ml 7 110 06-10-2018, 07:14 PM
Último mensaje: cmascreativo.ml
  [Aporte] Botones en Bootstrap cmascreativo.ml 0 65 08-09-2018, 06:47 AM
Último mensaje: cmascreativo.ml
  LANZAMIENTO DE BOOTSTRAP 4.0.0 ALPHA Y ADIOS BOOTSTRAP 3 khristia 11 1,015 01-10-2016, 02:34 PM
Último mensaje: juanjj
  [Aporte] Curso completo Bootstrap habacuc78 10 960 06-02-2016, 04:50 AM
Último mensaje: habacuc78
  Cómo instalar Bootstrap habacuc78 3 453 22-12-2015, 10:33 PM
Último mensaje: Taquion
  Bootstrap Navbar torgar22 4 1,199 10-04-2015, 02:27 PM
Último mensaje: TheBomberbe



Usuarios navegando en este tema: 1 invitado(s)