Bootstrap Table de base
Une base Bootstrap table a un rembourrage léger et seuls diviseurs horizontaux.
La .table classe ajoute le style de base à une table:
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Les lignes rayées
Le .table-striped classe ajoute zèbre-bandes à une table:
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableau bordé
Le .table-bordered classe ajoute des frontières de tous les côtés de la table et les cellules:
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Rangées Hover
Le .table-hover classe permet un état stationnaire sur les lignes de table:
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Tableau Condensed
Le .table-condensed classe fait un tableau plus compact en coupant le remplissage des cellules en deux:
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Classes contextuelles
Les classes contextuelles peuvent être utilisés pour des lignes de table de couleur ( <tr> ) ou des cellules de tableau ( <td> ):
Exemple
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
Les classes contextuelles qui peuvent être utilisés sont les suivants:
| Classe | La description |
|---|---|
.active | Applique la couleur de vol stationnaire à la ligne de table ou d'une cellule de table |
.success | Indique une action réussie ou positive |
.info | Indique un changement ou une action d'information neutre |
.warning | Indique un avertissement qui pourrait avoir besoin d'attention |
.danger | Indique une action dangereuse ou potentiellement négative |
Tables Responsive
Le .table-responsive classe crée une table réactive. La table sera ensuite défiler horizontalement sur les petits appareils (sous 768px). Lors de la visualisation sur quoi que ce soit plus grand que 768px de large, il n'y a pas de différence:
Exemple
<div class="table-responsive">
<table class="table">
...
</table>
</div> Essayez - le vous - même » Testez-vous avec des exercices!
Exercice 1 » Exercice 2» Exercice 3 » Exercice 4» Exercice 5 » Exercice 6»
Complete Bootstrap Table Reference Bootstrap Table Reference
Pour une référence complète de toutes les classes de table, rendez - vous à notre entière Bootstrap Tables de référence .