Créer des instances de table à l'aide de Boostrap

Les mots précédents

Bootstrap nous fournit des styles de tableau très beaux et faciles à utiliser. Vous pouvez utiliser Boosttrap pour créer rapidement des tableaux de différents styles

.

Exemple de base

Boostrap réinitialise le style de la table <table> comme suit

table {
    background-color: transparent;
    border-spacing: 0;
    border-collapse: collapse;
}

<table>
  <caption>Optional table caption.</caption>
  <thead><tr>  <th>#</th>  <th>First Name</th>  <th>Last Name</th>  <th>Username</th></tr>
  </thead>
  <tbody><tr>  <th scope="row">1</th>  <td>Mark</td>  <td>Otto</td>  <td>@mdo</td></tr><tr>  <th scope="row">2</th>  <td>Jacob</td>  <td>Thornton</td>  <td>@fat</td></tr><tr>  <th scope="row">3</th>  <td>Larry</td>  <td>the Bird</td>  <td>@twitter</td></tr>
  </tbody></table>

Ajoutez la classe <table> à n'importe quelle balise .table pour lui donner un style de base : une petite quantité de rembourrage et un séparateur horizontal

<table class="table">
  ...</table>

Table à rayures

Grâce à la classe .table-striped, vous pouvez ajouter un style à rayures zébrées à chaque ligne de <tbody>

　[Note] La table rayée repose sur le sélecteur CSS :nth-child, et cette fonctionnalité n'est pas prise en charge par IE8-

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f9f9f9;
}

<table class="table table-striped">
  ...</table>

Tableau avec bordure

Ajoutez la classe .table-bordered pour ajouter une bordure au tableau et à chaque cellule qu'il contient

<table class="table table-bordered">
  ...</table>

Survol de la souris

En ajoutant la classe .table-hover, vous pouvez créer chaque élément dans < tbody> Une ligne répond à l'état de survol de la souris

<table class="table table-hover">
  ...</table>

.table-hover > tbody > tr:hover {
    background-color: #f5f5f5;
}

Table compacte

En ajoutant la classe .table-condensed, la table peut être rendue plus compacte et le remplissage dans les cellules sera réduit de moitié

<table class="table table-condensed">
  ...</table>

Classe de statut

Grâce à ces classes de statut, vous pouvez définir la couleur des lignes ou des cellules

Class    　　描述
.active     鼠标悬停在行或单元格上时所设置的颜色
.success    标识成功或积极的动作
.info    　　标识普通的提示信息或动作
.warning    标识警告或需要用户注意
.danger     标识危险或潜在的带来负面影响的动作

<table class="table">
  <thead><tr>  <th>#</th>  <th>Column heading</th>  <th>Column heading</th>  <th>Column heading</th></tr>
  </thead>
  <tbody><tr class="active">  <th scope="row">1</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="success">  <th scope="row">2</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="info">  <th scope="row">3</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="warning">  <th scope="row">4</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr class="danger">  <th scope="row">5</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr><tr>  <th scope="row">6</th>  <td>Column content</td>  <td>Column content</td>  <td>Column content</td></tr>
  </tbody></table>

Tableau réactif

Vous pouvez créer un tableau réactif en enveloppant n'importe quel élément .table dans un élément .table-responsive. Il défilera horizontalement sur les appareils à petit écran (moins de 768 px). Lorsque l'écran a une largeur supérieure à 768 px, la barre de défilement horizontale disparaît

<div class="table-responsive">
  <table class="table"><thead>  <tr><th>#</th><th>Table heading</th><th>Table heading</th><th>Table heading</th>  </tr></thead><tbody>  <tr><th scope="row">1</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">2</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr>  <tr><th scope="row">3</th><td>Table cell</td><td>Table cell</td><td>Table cell</td>  </tr></tbody>
  </table></div>

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!