Explication graphique détaillée de l'utilisation des tableaux et des styles associés dans le framework bootstrap-tutoriel CSS-php.cn

Maison

interface Web

tutoriel CSS

Explication graphique détaillée de l'utilisation des tableaux et des styles associés dans le framework bootstrap

yulia

Oct 16, 2018 am 10:55 AM

bootstrap table 表格

Le framework bootstrap est largement utilisé en raison de sa facilité d'utilisation, de sa belle mise en page et de sa mise en page réactive. Cet article utilise l'exemple de table bootstrap pour expliquer comment utiliser la table dans bootstrap, ainsi que les styles de table associés. . Il a une certaine valeur de référence, et les amis intéressés peuvent s'y référer.

Avant d'utiliser la mise en page du framework bootstrap, vous devez d'abord introduire les fichiers jQuery, CSS et JS pertinents. Si vous n'êtes pas clair, vous pouvez lire mon article précédent, Comment utiliser le framework bootstrap en HTML. pages , ou reportez-vous au Tutoriel vidéo Bootstrap.

1. Tableau de base

Une fois la mise en page de base terminée, ajoutez le nom de la classe.table à la balise

petite quantité de contenu) remplissage et lignes de séparation horizontales).

Exemple de tableau Bootstrap : Créez un tableau avec six lignes et quatre colonnes pour les informations statistiques sur les étudiants. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
  <script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <table class="table" style="width: 800px;" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
     </table>
 </body>
</html>

Copier après la connexion

Rendu :

<🎜. > Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap

2. Table rayée

En fonction de la table de base, ajoutez le nom de la classe .table-striped à la balise

Ajoutez un motif à rayures zébrées dans chaque rangée.

 <table class="table table-striped "   style="max-width:90%" >

Copier après la connexion

L'effet est tel que montré sur l'image :

Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap

Tableau avec bordure

Dans la balise

, ajoutez la classe class name.table-bordered pour ajouter des bordures au tableau et à chaque cellule qu'il contient.

 <table class="table table-bordered "   style="max-width:90%" >

Copier après la connexion

L'effet est comme indiqué sur l'image :

Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap

Tableau de survol de la souris

Dans la balise

, ajoutez la classe classname.table-hover pour que chaque ligne du réponde à l'état de survol de la souris. Lorsque la souris passe sur la première ligne, la couleur de fond de la première ligne passe au gris.

 <table class="table table-hover "   style="max-width:90%" >

Copier après la connexion

L'effet est tel qu'indiqué sur la figure :

Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap

Tableau de compression

dans.

 <table class="table table-condensed "   style="max-width:90%" >

Copier après la connexion

Comparez les images ci-dessus pour voir l'effet de la compression du tableau :

Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap 6.

6. Tableau de formule de réponse

Enveloppez l'élément contenant le nom de classe .table dans l'élément contenant le nom de classe .table-responsive pour créer un tableau réactif Lorsque l'écran est inférieur à 768 pixels, il défilera horizontalement. . Lorsque l'écran est plus large que 768 pixels, la barre de défilement horizontale disparaît.

<table class="table" >
         <thead>
             <tr><th>学号</th><th>姓名</th><th>年龄</th><th>地址</th></tr>
         </thead>
         <tbody>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
             <tr><td>1</td><td>郭靖</td><td>25</td><td>安徽</td></tr>
             <tr><td>2</td><td>田秋元</td><td>23</td><td>上海</td></tr>
             <tr><td>3</td><td>杨容</td><td>24</td><td>江西</td></tr>
             <tr><td>4</td><td>许悦</td><td>21</td><td>浙江</td></tr>
             <tr><td>5</td><td>张柏芝</td><td>22</td><td>新疆</td></tr>
         </tbody>
</table>

Copier après la connexion

L'effet est comme indiqué dans la figure :

Explication graphique détaillée de lutilisation des tableaux et des styles associés dans le framework bootstrap

Ce qui précède utilise des exemples de tables bootstrap pour introduire l'utilisation de tables et de styles associés, qui est relativement simple. Si vous avez des questions, vous pouvez visiter le site officiel du framework bootstrap : http://v3.bootcss.com J'espère que cet article vous sera utile ! Pour plus de didacticiels connexes, veuillez visiter le

Manuel en ligne 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!

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

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

Assassin's Creed Shadows: Solution d'énigmes de coquille

3 Il y a quelques semaines By DDD

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

2 Il y a quelques semaines By DDD

Où trouver la courte de la grue à atomide atomique

3 Il y a quelques semaines By DDD

Économie dans R.E.P.O. Expliqué (et enregistrer des fichiers)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Comment trouver le forgeron et déverrouiller les armes et la personnalisation des armes

4 Il y a quelques semaines By DDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7569

Tutoriel CakePHP

1386

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

108

Afficher plus

Related knowledge

Comment obtenir la barre de recherche bootstrap Apr 07, 2025 pm 03:33 PM

Comment utiliser Bootstrap pour obtenir la valeur de la barre de recherche: détermine l'ID ou le nom de la barre de recherche. Utilisez JavaScript pour obtenir des éléments DOM. Obtient la valeur de l'élément. Effectuer les actions requises.

Comment utiliser Bootstrap en Vue Apr 07, 2025 pm 11:33 PM

L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.

Comment écrire des lignes fendues sur bootstrap Apr 07, 2025 pm 03:12 PM

Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.

Comment faire le centrage vertical de bootstrap Apr 07, 2025 pm 03:21 PM

Utilisez Bootstrap pour implémenter Centering vertical: Flexbox Méthode: Utilisez les classes D-Flex, Justify-Content-Center et Align-Items-Center pour placer des éléments dans le conteneur Flexbox. Méthode de classe Align-Items-Center: Pour les navigateurs qui ne prennent pas en charge FlexBox, utilisez la classe Align-Items-Center, à condition que l'élément parent ait une hauteur définie.

Comment configurer le cadre de bootstrap Apr 07, 2025 pm 03:27 PM

Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.

Comment redimensionner le bootstrap Apr 07, 2025 pm 03:18 PM

Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-

Comment utiliser le bouton bootstrap Apr 07, 2025 pm 03:09 PM

Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton

Que faire si la table bootstrap utilise Ajax pour faire grimper les données Apr 07, 2025 am 11:54 AM

Solutions à la table Bootstrap Code Bootstrap lors de l'utilisation de AJAX pour obtenir des données à partir du serveur: 1. Définissez le codage de caractères correct du code côté serveur (tel que UTF-8). 2. Définissez l'en-tête de demande dans la demande AJAX et spécifiez le codage des caractères accepté (accepte-charge). 3. Utilisez le convertisseur "Unescape" de la table bootstrap pour décoder l'entité HTML échappée en caractères originaux.

See all articles