Tras hablar de formularios, tablas y listas, menus, … hoy toca la presentación de grupos de listas, etiquetas y paneles.
Grupos de lista, o list group
Se trata de jugar con todas las clases que empiezan por list-group, para declarar una lista, y list-group-item para ir detallando cada elemento de la misma. La estructura más básica es:
</p> <p><section class=container><br /> <ul class=list-group><br /> <li class=list-group-item>Item 1</li><br /> <a href class=list-group-item>Item 2 con enlace</a><br /> </ul><br /> </section></p> <p>
Puedes comprobar que hemos usado tanto etiquetas li como a, y que la apariencia es la misma (salvo que la segunda tiene un enlace). El gran trabajo es realizado por la clase list-group-item.
A partir de aquí, las posibilidades que se abren son muchas. Por un lado, a cada elemento es posible asignar un color de fondo (al igual que para los botones) mediante list-group-item-default, list-group-item-danger, list-group-item-sucess, ….
Si en la lista queremos incluir una cabecera, también se puede hacer dentro de un list-group-item, simplemente integrando el código correspondiente, y remarcando con la clase list-group-item-header, . Si dentro de dicha cabecera queremos añadir texto, también podemos usar la clase list-group-item-text:
</p> <p><section class=container><br /> <ul class=list-group><br /> <li class=list-group-item><br /> <h3 class=list-group-item-header>Cabecera</h3><br /> <p class=list-group-item-text>... en pruebas</p><br /> </li><br /> <li class=list-group-item">Item 1</li><br /> <a href class=list-group-item>Item 2 con enlace</a><br /> <a href class="list-group-item list-group-item-default">Item 3 con enlace <span class=badge>3</span></a><br /> <a href class="list-group-item list-group-item-danger">Ojo!! Con enlace <span class=badge>4</span><a><br /> </ul><br /> </section></p> <p>
Puedes usar la clase active para remarcar algun elemento (o varios, según corresponda).
Y … básicamente, esto es todo relativo a list groups, y que puedes ver aquí.
Etiquetas
Antes de seguir con los paneles, comentar que se puede remarcar elementos usando la clase label, seguida del aspecto: label-info, label-warning, label-danger, …
</p> <p><div class=container><br /> <span class="label label-default">Default</span><br /> <span class="label label-primary">Primary</span><br /> <span class="label label-success">Vamos!</span><br /> <span class="label label-info">Info</span><br /> <span class="label label-warning">Cuidado</span><br /> <span class="label label-danger">Mal</span><br /> </div></p> <p>
Para verlos en acción, los insertaremos dentro de un contenedor aquí.
Paneles
En la última parte de esta entrada veremos cómo crear paneles, que es la forma de encerrar contenido en una caja. La clase base es panel, y al igual que las tablas, puede contener una cabecera, un cuerpo y un final, mediante el uso de las las clases panel-heading, panel-body y panel-footer. Además, es posible usar tags li con la clase list-group-item, de forma que aparecen como filas del panel.
El código HTML de ejemplo es este:
<section class="container"> <h3>Paneles de Twitter Bootstrap</h3> <div class="panel panel-default panel-info"> <div class="panel-heading centered"> <h2 class="panel-title">Titulo del panel principal</h2> </div> <div class="panel-body"> Esto es el panel principal </div> <li class="list-group-item">Aqui hay un campo <span class="label label-success">li</span></li> <div class="panel-footer"> <h6>Este es el pie del panel</h6> </div> </div> </section>
Y de esta forma, hemos visto también cómo crear paneles con Twitter Bootstrap, y que puedes ver en acción aquí.
Espero que te sea de utilidad, y … happy coding!