Latest web development tutorials

Formulaire Bootstrap

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é.

classe Form

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

<Tr>, <th> et <td> class

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

La forme de base

Si vous voulez seulement avec un rembourrage (padding) et base split niveau de la table, ajoutez laclasse.table, comme le montrent les exemples suivants:

Exemples

<Table class = "table"> <Caption> disposition de table de base </ caption> <Thead> <Tr> <Th> Nom </ th> <Th> Ville </ th> </ Tr> </ Thead> <TBODY> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> </ Tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

La forme de base

Facultatif classe Form

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.

Table Striped

En ajoutant laclasse .table-rayé,vous verrez les stries sur la ligne <tbody> l' intérieur, comme dans l'exemple suivant:

Exemples

<Table class = "table rayé table» > <Caption> bandes de table layout </ caption> <Thead> <Tr> <Th> Nom </ th> <Th> Ville </ th> <Th> password </ th> </ Tr> </ Thead> <TBODY> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

Table Striped

Tableau Border

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:

Exemples

<Table class = "table bordée table» > <Caption> Tableau cadre de la mise en page </ caption> <Thead> <Tr> <Th> Nom </ th> <Th> Ville </ th> th> password </ th> </ Tr> </ Thead> tbody> <tr > <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

Tableau Border

table Hover

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:

Exemples

<Table class = "Table-hover" > <Caption> hover tableau mise en page </ caption> <Thead> <Tr> <Th> Nom </ th> <Th> Ville </ th> <Th> password </ th> </ Tr> </ Thead> <TBODY> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ Tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ Tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ Tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

table Hover

Formulaire Compact

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.

Exemples

<Table class = "table condensé table» > <Caption> forme simplifiée mise en page </ caption> <Thead> <Tr> <Th> Nom </ th> <Th> Ville </ th> <Th> password </ th> </ tr> </ Thead> <TBODY> <Tr> <Td> Tanmay </ td> <Td> Bangalore </ td> <Td> 560001 </ td> </ tr> <Tr> <Td> Sachin </ td> <Td> Mumbai </ td> <Td> 400003 </ td> </ tr> <Tr> <Td> Uma </ td> <Td> Pune </ td> <Td> 411027 </ td> </ tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

Formulaire Compact

classe Context

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>.

Exemples

<Table class = "table"> <Caption> contexte de table layout </ caption> <Thead> <Tr> <Th> Produits </ th> <Th> Date de Paiement </ th> <Th> Status </ th> </ tr> </ Thead> <TBODY> <Tr class = "active"> <Td> Produits 1 </ td> <Td> 23/11/2013 </ td> <Td> à être expédié </ td> </ tr> <Tr class = "succès"> <Td> Produits 2 </ td> <Td> 11/10/2013 </ td> <Td> La livraison </ td> </ tr> <Tr class = "warning"> <Td> Produits 3 </ td> <Td> 20/10/2013 </ td> <Td> pour confirmer </ td> </ tr> <Tr class = "danger"> <Td> Produits 4 </ td> <Td> 20/10/2013 </ td> <Td> est revenu </ td> </ tr> </ Tbody> </ Table>

Essayez »

Les résultats sont les suivants:

classe Context

Table Responsive

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.

Exemples

<Div class = "table réactive"> <Table class = "table"> <Légende> Tableau sensible layout </ caption> <Thead> <Tr> <Th> Produits </ th> <Th> Date de Paiement </ th> <Th> Status </ th> </ tr> </ Thead> <TBODY> <Tr> <Td> Produits 1 </ td> <Td> 23/11/2013 </ td> <Td> à être expédié </ td> </ tr> <Tr> <Td> Produits 2 </ td> <Td> 11/10/2013 </ td> <Td> La livraison </ td> </ tr> <Tr> <Td> Produits 3 </ td> <Td> 20/10/2013 </ td> <Td> pour confirmer </ td> </ tr> <Tr> <Td> Produits 4 </ td> <Td> 20/10/2013 </ td> <Td> est revenu </ td> </ tr> </ Tbody> </ Table> </ Div>

Essayez »

Les résultats sont les suivants:

Table Responsive