Le meilleur didacticiel Formulaire Bootstrap en 2024, dans ce didacticiel, vous pouvez apprendre La forme de base,Exemples,Facultatif classe Form,Exemples,Exemples,Exemples,Exemples,classe Context,Exemples,Table Responsive,Exemples,
Bootstrap fournit une table de mise en page créée claire. Le tableau ci-dessous présente quelques éléments de table support Bootstrap:
étiquette | description |
---|---|
<Table> | Ajout pour former la base du style. |
<Thead> | Table conteneur en-tête de rangée d'éléments (<tr>), utilisé pour identifier les colonnes de la table. |
<TBODY> | Table élément conteneur dans le corps de la ligne de table (<tr>). |
<Tr> | Un groupe apparaît sur une seule ligne dans l'élément conteneur de la cellule de table (<td> ou <th>). |
<Td> | La cellule de table par défaut. |
<Th> | cellule de tableau spécial, utilisé pour identifier la colonne ou la ligne (en fonction de l'étendue et de l'emplacement). Vous devez utiliser le <thead> à l'intérieur. |
<Caption> | A propos de la table magasin description ou un résumé. |
Les tables de style de table suivants peuvent être utilisés:
catégorie | description | Exemples |
---|---|---|
.table | Arbitraire <table> Ajouter style de base (uniquement séparateur horizontal) | essayer |
.table-rayures | Dans le <tbody> dans le formulaire pour ajouter des rayures de zèbre (IE8 ne fonctionne pas) | essayer |
.table bordée | Ajouter une bordure pour toutes les cellules de table | essayer |
.table-hover | Dans le <tbody> au sein de toute ligne activer l'état de vol stationnaire | essayer |
.table condensé | Faire plus d'une forme compacte | essayer |
L' utilisation conjointe de toutes les classes de formulaires | essayer |
Classes Le tableau suivant peut être utilisé pour former une rangée ou d'une cellule:
catégorie | description | Exemples |
---|---|---|
.active | L'application de la couleur de vol stationnaire en ligne ou cellule | essayer |
.success | Elle indique une opération réussie | essayer |
.info | Une information représentative de fonctionnement variable | essayer |
.AVERTISSEMENT | Elle représente une opération d'avertissement | essayer |
.danger | Il représente une opération dangereuse | essayer |
Si vous voulez seulement avec un rembourrage (padding) et base split niveau de la table, ajoutez laclasse.table, comme le montrent les exemples suivants:
Les résultats sont les suivants:
Outre le balisage de la table de base et la classe .table, et certains peuvent être utilisés comme marqueur pour définir les classes de style. Ce qui suit va vous présenter ces classes.
En ajoutant laclasse .table-rayé,vous verrez les stries sur la ligne <tbody> l' intérieur, comme dans l'exemple suivant:
Les résultats sont les suivants:
En ajoutant laclasse .table bordée,vous verrez que chaque élément a une bordure autour, et le total est sous forme arrondie, comme le montre l'exemple suivant:
Les résultats sont les suivants:
En ajoutant laclasse .table-hover,lorsque le pointeur se trouve sur la ligne quand il y aura un fond gris clair, comme le montrent les exemples suivants:
Les résultats sont les suivants:
En ajoutant laclasse .table condensé,inline padding (rembourrage) sont coupées en deux, de sorte que le tableau semble plus compact, comme le montre l'exemple suivant. Cette information est utile lorsque vous voulez regarder plus compact.
Les résultats sont les suivants:
classe Context énumérés dans le tableau suivant vous permet de changer la couleur des lignes de la table ou des cellules individuelles de fond.
类 | 描述 |
---|---|
.active | 对某一特定的行或单元格应用悬停颜色 |
.success | 表示一个成功的或积极的动作 |
.warning | 表示一个需要注意的警告 |
.danger | 表示一个危险的或潜在的负面动作 |
Ces classes peuvent être appliquées à la balise <tr> <td> ou <th>.
Les résultats sont les suivants:
En tout.tableenveloppé dans laclasse .table sensible,vous pouvez avoir la table pour faire défiler horizontalement pour accueillir les petits appareils (moins de 768px). Lors du visionnage sur un équipement à grande échelle est plus grande que 768px de large, vous ne verrez aucune différence.
Les résultats sont les suivants: