Quels sont les styles de table de bootstrap ?

Il existe 7 styles de tableau : 1. le style ".table", qui peut définir le tableau de base, avec uniquement des séparateurs horizontaux ; 2. le style ".table-striped", qui peut définir le tableau zebra cross, avec un gris clair couleur d'arrière-plan dans une ligne sur deux du tableau ;3. style ".table-bordered", ajouter un style de bordure à toutes les cellules du tableau, etc.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version bootsrap 3.3.7, ordinateur DELL G3

Style de table Bootstrap

☑ .table : table de base, ajouter une table de base pour tout < ;table> Style (uniquement séparateurs horizontaux)

☑ .table-striped : table à rayures zébrées

☑ .table-bordered : table avec bordures

☑ .table-hover : table mise en surbrillance par le survol de la souris

☑ .table-condensed : Tableau compact

☑ .table-responsive : Tableau réactif

☑ Tableau contextuel

Ce qui suit est une brève introduction au style de tableau ci-dessus :

1 . Table de base

Dans Bootstrap, la table de base est contrôlée via le nom de classe ".table". Si vous n'ajoutez aucun nom de classe à l'élément

, le tableau n'aura aucun effet de style. Pour obtenir la table de base, il suffit d'ajouter le nom de la classe ".table" à l'élément pour obtenir la table de base de Bootstrap :

                                                                                                                                                    

基础表格

省份	城市
广东	深圳
广西	桂林
海南	三亚

Le rendu est le suivant :

Il y a trois fonctions principales ".table":

• Définir la marge inférieure: 20 px pour le tableau et définir le remplissage des cellules

• Définir une ligne continue gris clair de 2 px au bas de la tête

• Définir un haut de 1 px pour chaque cellule Ligne continue gris clair

2. Tableau rayé

Parfois, afin de rendre le tableau plus lisible, il est nécessaire de rendre le tableau semblable à un effet de passage piéton. Pour faire simple, il s’agit de donner au tableau un effet de rayure de fond. Il n'est pas difficile d'obtenir cet effet de table dans Bootstrap. Il vous suffit d'ajouter le nom de classe ".table-striped" sur la base de

 :

Rendu :

Par rapport au tableau de base, son effet est seulement qu'il y a une couleur de fond gris clair dans le corps une ligne sur deux. Le principe d'implémentation est également très simple, utilisant le sélecteur structurel ":nth-child" de CSS3 pour l'implémenter, donc pour les navigateurs IE8 et inférieurs, il n'y a pas d'effet de bande d'arrière-plan.

3. Tableau de bordure

Les tableaux de base n'ont de bordures que dans une partie du tableau, mais parfois le tableau entier doit avoir un effet de bordure. Pour des raisons pratiques, Bootstrap prend également en compte cet effet de tableau, c'est-à-dire que toutes les cellules ont une bordure de 1 px.

L'utilisation de tables bordées dans Bootstrap est similaire à l'utilisation de tables zebra crossing. Il vous suffit d'ajouter un nom de classe ".table-bordered" à la table de base

 :

.

Rendu :

4. Survol du tableau

Lorsque la souris survole les lignes du tableau, une couleur d'arrière-plan est mise en surbrillance. Un tel tableau donne l'impression que les gens sont à l'aise et indique toujours à l'utilisateur qu'ils lisent. Quelle ligne du tableau contient des données. Bootstrap ne vous a pas déçu. Il a également pris en compte cet effet et a fourni un nom de classe ".table-hover" pour obtenir cet effet de table.

Le tableau mis en évidence par le survol de la souris est également facile à utiliser. Il vous suffit d'ajouter le nom de la classe "table-hover" à l'élément

Souris L'effet de surbrillance est principalement obtenu grâce à l'événement "hover" Lorsque "tr:hover" est défini, la couleur d'arrière-plan de th et td est la nouvelle couleur.

Remarque : En fait, le tableau en surbrillance au survol de la souris peut être mélangé avec d'autres tableaux Bootstrap. Pour faire simple, tant que vous souhaitez que votre tableau ait un effet de survol, il vous suffit d'ajouter le nom de la classe "table-hover" au tableau. Par exemple, combinez les plusieurs tableaux introduits précédemment :

5. Tableaux contextuels

En ajoutant des styles à tr et td, ajoutez des couleurs d'arrière-plan des styles spécifiés aux lignes ou aux cellules pour mettre en évidence le contexte et les styles couramment utilisés. succès, informations, danger et avertissement. Comme indiqué ci-dessous :

<table class="table table-striped table-bordered table-hover">
…
</table>

Rendu :

6. Formulaire réactif

随着各种手持设备的出现，要想让你的Web页面适合千罗万像的设备浏览，响应式设计的呼声越来越高。在Bootstrap中也为表格提供了响应式的效果，将其称为响应式表格。

Bootstrap提供了一个容器，并且此容器设置类名“.table-responsive”,此容器就具有响应式效果，然后将

置于这个容器当中，这样表格也就具有响应式效果。

Bootstrap中响应式表格效果表现为：当你的浏览器可视区域小于768px时，表格底部会出现水平滚动条。当你的浏览器可视区域大于768px时，表格底部水平滚动条就会消失。示例如下：

<div class="table-responsive">
<table class="table table-bordered">
   …
</table>
</div>

七、紧凑型表格：

何谓紧凑型表格，简单理解，就是单元格没内距或者内距较其他表格的内距更小。换句话说，要实现紧凑型表格只需要重置表格单元格的内距padding的值。那么在Bootstrap中，通过类名“table-condensed”重置了单元格内距值。

紧凑型表格的运用，也只是需要在

基础上添加类名“table-condensed”：

Bootstrap中紧凑型的表格与基础表格差别不大，因为只是将单元格的内距由8px调至5px。

更多关于bootstrap的相关知识，可访问：bootstrap基础教程！！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!