form
Example 1. Basic
Any <table>
label added .table
class for imparting basic styles - the amount of complement (padding) and horizontal divider.
<table class="table">
...
</table>
2. striped table
By .table-striped
give the class <tbody>
of each row in the increase of the zebra pattern.
<table class="table table-striped">
...
</table>
Table 3 with border
Add .table-bordered
class adds a border to the table and each cell therein.
<table class="table table-bordered">
...
</table>
4. Hover
By adding .table-hover
allows class <tbody>
in each row responds to mouse hover state.
<table class="table table-hover">
...
</table>
5. austerity table
By adding .table-condensed
allows a more compact form class, in the fill (padding) in the cell will be halved.
<table class="table table-condensed">
...
</table>
6. Status Class
Color may be provided to a row or cell state through these classes.
Class | description |
---|---|
.active |
Hover color cell row or the upper set |
.success |
Identify successful or positive action |
.info |
Identify common message or action |
.warning |
Or require the user to identify the warning note |
.danger |
Identify dangerous or potentially negative impact of action |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>
7. Responsive form
Any .table
element wrapped .table-responsive
inside the element, you can create responsive form, it will be on a small screen device (less than 768px) horizontal scrolling. When the screen is larger than 768px width, the horizontal scroll bar disappears.
<div class="table-responsive">
<table class="table">
...
</table>
</div