Maison > Article > interface Web > Quelles classes de table existe-t-il dans bootstrap ?

Quelles classes de table existe-t-il dans bootstrap ?

青灯夜游original: 2022-01-10 12:05:132600parcourir

Les classes de table de Bootstrap incluent : 1. « .table », table de base ; 2. « .table-striped », table de passage zébré ; 3. « .table-bordered », table avec bordures ; ", le tableau mis en évidence au survol de la souris, etc.

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

Bootstrap Table

Bootstrap fournit une présentation claire pour créer des tableaux. Le tableau suivant répertorie certains éléments de tableau pris en charge par Bootstrap :

balise

description

) de la ligne d'en-tête du tableau, utilisé pour identifier les colonnes du tableau. ) pour les lignes du tableau dans le corps du tableau. .


Ajoutez des styles de base au tableau.

Élément conteneur (

Élément conteneur (

Élément Conteneur (	ou	) pour un groupe de cellules de tableau qui apparaissent sur une seule ligne.
		Cellule de tableau par défaut.
		Cellule de tableau spéciale utilisée pour identifier une colonne ou une ligne (en fonction de la plage et de la position). Doit être utilisé dans

Une description ou un résumé du contenu du stockage de la table.

Bootstrap fournit des noms de classe différents pour différents styles de tables, y compris principalement:

.table-striped (non pris en charge par IE8).table-bordered.table- survol

Tableau de base

Si vous souhaitez un tableau de base avec juste un remplissage et un fractionnement horizontal, ajoutez la classe .table, comme indiqué dans l'exemple suivant :

Exemple

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<table class="table">
	<caption>基本的表格布局</caption>
   <thead>
      <tr>
         <th>名称</th>
         <th>城市</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Tanmay</td>
         <td>Bangalore</td>
      </tr>
      <tr>
         <td>Sachin</td>
         <td>Mumbai</td>
      </tr>
   </tbody>
</table>

</body>
</html>

Le résultat ressemble à ceci :

Quelles classes de table existe-t-il dans bootstrap ?

Classes de table facultatives

En plus du balisage de table de base et de la classe .table, certaines classes peuvent être utilisées pour définir des styles pour le balisage . Ces cours vous sont présentés ci-dessous.

Striped Table

En ajoutant la classe .table-striped, vous verrez des rayures sur les lignes à l'intérieur de

comme indiqué dans l'exemple ci-dessous :

Instance

<table class="table table-striped">
  <caption>条纹表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</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>

Résultat Comme indiqué ci-dessous :

Quelles classes de table existe-t-il dans bootstrap ?

Border table

En ajoutant la classe .table-bordered, vous verrez que chaque élément est entouré d'une bordure et que le tableau entier est arrondi, comme dans l'exemple ci-dessous :

Instance

<table class="table table-bordered">
  <caption>边框表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</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>

Le résultat ressemble à ceci :

Quelles classes de table existe-t-il dans bootstrap ?

hover table

En ajoutant la classe .table-hover, un espace peu profond apparaîtra lorsque le pointeur survole la ligne sur fond gris, comme montré dans l'exemple ci-dessous :

Exemple

<table class="table table-hover">
  <caption>悬停表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</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>

Le résultat ressemble à ceci :

Quelles classes de table existe-t-il dans bootstrap ?

Table condensée

En ajoutant .table-condensed class, padding ) est coupé en deux pour faire le tableau semble plus compact, comme le montre l'exemple ci-dessous. Ceci est utile lorsque vous souhaitez que vos informations paraissent plus compactes.

Instance

<table class="table table-condensed">
  <caption>精简表格布局</caption>
  <thead>
    <tr>
      <th>名称</th>
      <th>城市</th>
      <th>邮编</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>

Le résultat ressemble à ceci :

Quelles classes de table existe-t-il dans bootstrap ?

Classes de contexte

Les classes de contexte répertoriées dans le tableau ci-dessous vous permettent de modifier la couleur d'arrière-plan des lignes du tableau ou des cellules individuelles.

class	description
.. séparateurs horizontaux)
Ajouter des rayures zébrées dans

Ajouter à toutes les cellules du tableau Border
Activer l'état de survol de la souris sur n'importe quelle ligne de

Classe	Description
.active	Appliquez une couleur de survol à une ligne ou une cellule spécifique
.success	Dénote une action réussie ou positive
.warning	indique un avertissement qui nécessite une attention
.danger	indique une action dangereuse ou potentiellement négative

Ces classes peuvent être appliquées à

Exemple

<table class="table">
  <caption>上下文表格布局</caption>
  <thead>
    <tr>
      <th>产品</th>
      <th>付款日期</th>
      <th>状态</th></tr>
  </thead>
  <tbody>
    <tr class="active">
      <td>产品1</td>
      <td>23/11/2013</td>
      <td>待发货</td></tr>
    <tr class="success">
      <td>产品2</td>
      <td>10/11/2013</td>
      <td>发货中</td></tr>
    <tr class="warning">
      <td>产品3</td>
      <td>20/10/2013</td>
      <td>待确认</td></tr>
    <tr class="danger">
      <td>产品4</td>
      <td>20/10/2013</td>
      <td>已退货</td></tr>
  </tbody></table>

Le résultat ressemble à ceci :

Quelles classes de table existe-t-il dans bootstrap ?

Tableau réactif

En enveloppant n'importe quelle .table à l'intérieur de la classe .table-responsive, vous pouvez créer la table Parchemins horizontaux pour s'adapter aux petits appareils (moins de 768px). Vous ne verrez aucune différence lors de l'affichage sur de grands appareils d'une largeur supérieure à 768 pixels.

Exemple

<div class="table-responsive">
  <table class="table">
    <caption>响应式表格布局</caption>
    <thead>
      <tr>
        <th>产品</th>
        <th>付款日期</th>
        <th>状态</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>产品1</td>
        <td>23/11/2013</td>
        <td>待发货</td></tr>
      <tr>
        <td>产品2</td>
        <td>10/11/2013</td>
        <td>发货中</td></tr>
      <tr>
        <td>产品3</td>
        <td>20/10/2013</td>
        <td>待确认</td></tr>
      <tr>
        <td>产品4</td>
        <td>20/10/2013</td>
        <td>已退货</td></tr>
    </tbody>
  </table></div>

Le résultat est le suivant :

Quelles classes de table existe-t-il dans bootstrap ?

[Recommandation associée : "tutoriel 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!

bootstrap 指针 class 内边距 padding table tbody td tr th

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment exprimer pas égal en javascriptArticle suivant：Comment exprimer pas égal en javascript

Articles Liés

Voir plus