Comment définir le style de table dans Bootstrap-js tutoriel-php.cn

Maison

interface Web

js tutoriel

Comment définir le style de table dans Bootstrap

清浅

Jan 10, 2019 pm 04:14 PM

bootstrap

Vous pouvez définir le style de table en important des fichiers Bootstrap en externe. Après l'importation, ajoutez le nom de classe du style de table dans le fichier Bootstrap au code HTML. ajouter des styles spécifiques

Aujourd'hui, je vais vous présenter comment créer rapidement des styles de table via Bootstrap. Il a une certaine valeur de référence et j'espère que cela sera utile à tout le monde.

Comment définir le style de table dans Bootstrap

[Cours recommandé : Tutoriel Bootstrap]

La signification de Bootstrap :

Bootstrap est un framework front-end pour le développement rapide d'applications Web et de sites Web. Bootstrap est principalement basé sur des documents en langage HTML, CSS et JavaScript.

Il possède les fonctionnalités suivantes :

En CSS, il dispose de paramètres CSS globaux, définissant les styles d'éléments HTML de base, les classes extensibles et d'autres fonctionnalités. Parallèlement, il contient également plus d'une douzaine de composants réutilisables pour la création d'images, de menus déroulants, de navigation, de boîtes d'alerte, de boîtes pop-up, etc. Le plug-in JavaScript inclus dans bootstrap contient plus d'une douzaine de plug-ins jQuery personnalisés Dans le code, nous pouvons directement utiliser

pour créer rapidement des styles de table via Bootstrap :

(1) Importer des fichiers Bootstrap en externe

<link type="text/css" rel="stylesheet" href=".\bootstrap-3.3.7-dist\css\bootstrap.css">
 <script type="text/javascript" src=".\bootstrap-3.3.7-dist\js\bootstrap.min.css"></script>

Copier après la connexion

(2) Créer un tableau via le code HTML

 <table>
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

Copier après la connexion

Rendu :

Image 10.jpg

(3) Ensuite, introduisez Bootstrap en externe pour créer rapidement le style de table

.table

为任意添加基本样式 (只有横向分隔线) 内添加斑马线形式的条纹 ( IE8 不支持) 内的任一行启用鼠标悬停状态

.table-striped	在
.table-bordered	为所有表格的单元格添加边框
.table-hover	在
.table-condensed	让表格更加紧凑

   <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr>
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr>
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr>
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

Copier après la connexion

Rendu :

Comment définir le style de table dans Bootstrap

De plus, nous pouvons également ajouter une couleur de fond au tableau. Le code spécifique est le suivant

.active	对某一特定的行或单元格应用悬停颜色
.success	表示一个成功的或积极的动作
.warning	表示一个需要注意的警告
.danger	表示一个危险的或潜在的负面动作

  <table class="table table-striped table-hover table-bordered .table-condensed"style="width:450px">
            <thead>
                <tr class="active">
                    <th>标题一</th>
                    <th>标题二</th>
                    <th>标题三</th>
                </tr>
            </thead>
            <tbody>
                <tr class="success">
                    <td>示例一</td>
                    <td>示例一</td>
                    <td>示例一</td></tr>
                <tr class="warning">
                    <td>示例二</td>
                    <td>示例二</td>
                    <td>示例二</td></tr>
                <tr class="danger">
                    <td>示例三</td>
                    <td>示例三</td>
                    <td>示例三</td></tr>
                </tbody>
        </table>

Copier après la connexion

Rendu :

Comment définir le style de table dans Bootstrap

Résumé : Ce qui précède est l'intégralité du contenu de cet article, j'espère passer cet article Il peut vous aider à apprendre à créer rapidement des styles de tableau en introduisant Bootstrap en externe

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

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Combien de temps faut-il pour battre Split Fiction?

1 Il y a quelques mois By DDD

R.E.P.O. Meilleurs paramètres graphiques

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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

1 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

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 ?

7412

Tutoriel CakePHP

1358

Quel est le format du nom de compte de Steam

Clé d&#39;activation Win11 permanent

Afficher plus

Related knowledge

Quelle est la raison pour laquelle la table bootstrap affiche du code brouillé Apr 07, 2025 am 11:30 AM

Les principales raisons de l'affichage du code brouillé sur la table bootstrap sont la non-correspondance de jeux de caractères, les problèmes de codage et la mauvaise compatibilité du navigateur. Les solutions incluent: 1. Confirmer la cohérence du jeu de caractères; 2. Vérifier l'encodage de transmission des données; 3. Remplacez un navigateur par une meilleure compatibilité; 4. Mettez à jour la version de la table bootstrap; 5. Confirmer que le format de données est correct; 6. Effacer le cache du navigateur.

Comment écrire une photo de carrousel sur bootstrap Apr 07, 2025 pm 12:54 PM

La création d'un graphique de carrousel à l'aide de bootstrap nécessite les étapes suivantes: Créer un conteneur contenant un graphique de carrousel, en utilisant la classe de carrousel. Ajoutez une image de carrousel au conteneur, en utilisant la classe de carrousel-item et la classe active (uniquement pour la première image). Ajoutez des boutons de contrôle en utilisant les classes de NETT-Control-Prev et Carousel-Control-Next. Ajoutez une métrique des indicateurs de carrousel (petits points) en utilisant la classe des indicateurs de carrousel (facultatif). Configurez la lecture automatique et ajoutez Data-Bs-Ride = "CARROUSEL &" Sur le carrousel ".

Comment changer la taille d'une liste de bootstrap? Apr 07, 2025 am 10:45 AM

La taille d'une liste d'amorçage dépend de la taille du conteneur qui contient la liste, pas de la liste elle-même. L'utilisation du système de grille de bootstrap ou de Flexbox peut contrôler la taille du conteneur, redimentant ainsi indirectement les éléments de la liste.

Comment résoudre le problème du code brouillé en PHP et Bootstrap Table Apr 07, 2025 am 11:27 AM

Solutions pour afficher le code brouillé chinois avec bootstrap Table: 1. Définissez le jeu de caractères PHP sur UTF-8; 2. Définissez le jeu de caractères dans le script PHP; 3. Assurez-vous que le jeu de caractères de la base de données est UTF-8; 4. Définissez le jeu de caractères de la table bootstrap sur "ZH-CN"; 5. Utilisez MBSTRING pour étendre le jeu de caractères coulé; 6. Transcode les données provenant d'autres encodages; 7. Vérifiez le codage du navigateur.

Comment construire un framework bootstrap Apr 07, 2025 pm 12:57 PM

Pour créer un framework bootstrap, suivez ces étapes: Installez Bootstrap via CDN ou installez une copie locale. Créez un document HTML et liez Bootstrap CSS à & lt; head & gt; section. Ajoutez un fichier JavaScript bootstrap au & lt; body & gt; section. Utilisez le composant bootstrap et personnalisez la feuille de style en fonction de vos besoins.

Comment télécharger des fichiers sur bootstrap Apr 07, 2025 pm 01:09 PM

La fonction de téléchargement de fichiers peut être implémentée via Bootstrap. Les étapes sont les suivantes: introduire les fichiers Bootstrap CSS et JavaScript; créer des champs d'entrée de fichier; créer des boutons de téléchargement de fichiers; gérer les téléchargements de fichiers (à l'aide de FormData pour collecter des données, puis envoyer au serveur); style personnalisé (facultatif).

Quels changements ont été apportés avec le style de liste de bootstrap 5? Apr 07, 2025 am 11:09 AM

Les modifications de style de la liste Bootstrap 5 sont principalement dues à l'optimisation des détails et à l'amélioration sémantique, notamment: les marges par défaut des listes non ordonnées sont simplifiées, et les effets visuels sont plus propres et soignés; Le style de liste met l'accent sur la sémantique, l'amélioration de l'accessibilité et la maintenabilité.

Quels styles de liste prend en charge Bootstrap? Apr 07, 2025 am 11:15 AM

Bootstrap prend en charge quatre styles de liste: listes non utilisées, listes commandées, listes non ordonnées (tous sont des styles par défaut) et des listes en ligne qui peuvent être utilisées pour créer des menus de navigation horizontale et des nuages de balises. De plus, Bootstrap fournit également une classe de groupe de liste puissante qui crée des listes avec des coins arrondis, des bordures et des couleurs d'arrière-plan pour afficher des listes de projets ou des menus de navigation.

See all articles