Bootstrap doit apprendre les tables tous les jours_compétences javascript

Cet article explique principalement les tableaux. Ceci n'est en fait pas étranger aux personnes qui ont créé des sites Web, et on peut dire que c'est l'affichage le plus couramment utilisé de diverses listes. Parfois, cela se ressent également en raison des besoins des utilisateurs ou des patrons. . Mal de tête. Jetons un coup d'œil aux types de tableaux que Bootstrap a préparés pour nous ? Comme indiqué ci-dessous :

1.Cas de base
2. Table rayée
3. Tableau avec bordures
4. Passez la souris
5. Tableau de compression
6. Classe de statut
7. Formulaire responsive
8. Résumé

Cas de base
L'ajout de .table à n'importe quelle balise f5d188ed2c074f8b944552db028f98a1 lui donne un style de base : une petite quantité de remplissage et un séparateur horizontal. Cette approche semble très redondante ! ? Cependant, nous pensons que l'élément table est largement utilisé, et si nous lui donnons un style par défaut, cela peut affecter les plug-ins tels que la sélection du calendrier et de la date, nous avons donc choisi de séparer son style.

Un exemple de tableau simple

 <div class="container">
 <table class="table"> 
  <caption>Table基本案例</caption> 
  <thead> 
  <tr> 
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr> 
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr> 
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  </tbody> 
 </table> 
 </div>

Table rayée

Utilisez .table-striped pour ajouter un style à rayures zébrées à tout ce qui se trouve dans 92cee25da80fac49f6fb6eec5fd2c22a.
Ajoutez une autre classe de style
à l'élément table dans l'exemple ci-dessus 850aad7c9803f65863edd23ef123b2cc
En regardant l'effet actuel, il y a encore quelques changements.

Tableau avec bordures
Utilisez .table-bordered pour ajouter des bordures au tableau et à chaque cellule qu'il contient.
Ou ajoutez une autre classe de style
à l'élément table dans le premier exemple 8e6a5157b5b720a6b30bc7886b8a1bae

Survol de la souris

Utilisez .table-hover pour que chaque ligne de 92cee25da80fac49f6fb6eec5fd2c22a réponde à l'état de survol de la souris.
95df9d71803495963fc38c12f79bae2c
Déplacez la souris sur cette ligne et cela aura l'effet

Table compacte

Utilisez .table-condensed pour rendre la table plus compacte et le rembourrage dans les cellules sera réduit de moitié.
87aa75fe06d344e98f50958dc170282b
Cet effet n’est pas si évident, principalement parce que le remplissage du contenu de la cellule est réduit de moitié.
Classe de statut

Les couleurs peuvent être définies pour les cellules sous licence via ces classes de statut.

<table class="table table-condensed"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table> 

Formulaire responsive

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

Regardez la barre de défilement qui apparaît.

<div class="table-responsive">
 <table class="table"> 
  <caption>Table</caption> 
  <thead> 
  <tr> 
   <th>#</th>
   <th>First Name</th> 
   <th>Last Name</th>
   <th>User Name</th> 
  </tr> 
  </thead> 
  <tbody> 
  <tr class="active"> 
   <td>1</td>
   <td>aehyok</td> 
   <td>leo</td> 
   <td>@aehyok</td> 
  </tr>
  <tr class="success"> 
   <td>2</td>
   <td>lynn</td> 
   <td>thl</td> 
   <td>@lynn</td> 
  </tr>
  <tr class="warning"> 
   <td>3</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr class="danger"> 
   <td>4</td> 
   <td>Amdy</td> 
   <td>Amy</td> 
   <td>@Amdy</td> 
  </tr>
  <tr > 
   <td class="success">5</td> 
   <td class="danger">Amdy</td> 
   <td class="warning">Amy</td> 
   <td class="active">@Amdy</td> 
  </tr>
  </tbody> 
 </table>
 </div>

Quelques cours de style simples peuvent transformer la page à ce niveau, ce qui est génial. Vous n'avez plus à vous soucier d'ajuster le style à l'avenir.

Ce qui précède est un affichage des listes de tables Bootstrap les plus couramment utilisées. J'espère que cela sera utile à l'apprentissage de chacun.