Using Twitter Bootstrap is fun, and you already could read here about forms, tables and lists, menus, … Today it’s time for list groups, labels and panels.
List Groups
For list groups, you need to know how to use all classes starting with list-group for declaring a list, and list-group-item for the different items of the list. The basic structure is this:
</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>
As you can see, you can use either tags li or a, and the apearence is the same (except if the item is a link). The work is developed by the class list-group-item.
Once you know the basic rles, you have several choices. For example, you can asign a background color (the same way you did with buttons) using the classes list-group-item-default, list-group-item-danger, list-group-item-sucess, ….
If you want to add a header in the list, you can do it by using the class list-group-item-header inside the item with the class list-group-item. If you want to add more text to the header, you can also use the class 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>
And of course, you can use the active class if you want to remark an element (or severals).
And … that’s all related to list list groups, that you can see the code in actiony here.
Labels
Before learning panels, let’s learn how to use the label class for creating cool labels. You need to combine with several classes to modify the aspect: 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>
Let’s insert this code into a DIV, and you can see the output here.
Panels
The last part of this entrance is for panels, if you want content inside a box. The base class is panel, and as you did for tables, you can include a header, the body and a footer. You can achive this by using the classes panel-heading, panel-body and panel-footer. Also, you can include li tags with the class list-group-item, and you’ll see the rows in the panel.
The HTML code for creating a panel look like this one:
<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>
So, this way you’ll see how to create panels with Twitter Bootstrap, and you can see it here.
I hope it can be useful for you and … happy coding!