Bootstrap doit apprendre les tables tous les jours_compétences javascript-js tutoriel-php.cn

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

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>

Copier après la connexion

Table rayée

Utilisez .table-striped pour ajouter un style à rayures zébrées à tout ce qui se trouve dans

.
Ajoutez une autre classe de style
à l'élément table dans l'exemple ci-dessus

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

Survol de la souris

Utilisez .table-hover pour que chaque ligne de

réponde à l'état de survol de la souris.

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é.

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>

Copier après la connexion

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>

Copier après la connexion

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.

Étiquettes associées：

bootstrap 表格

source：php.cn

Article précédent：Tutoriel d'utilisation de Nodejs Express (avec code) Article suivant：Implémentation Javascript d'exemples de développement de graphiques statistiques dynamiques_compétences Javascript

Déclaration de ce site Web

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

Derniers articles par auteur