Quelles classes de table existe-t-il dans bootstrap ?-Questions et réponses frontales-php.cn

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

青灯夜游

Libérer： 2022-01-10 12:06:54

original

2744 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

Le résultat est le suivant :

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