Maison > interface Web > Tutoriel d'amorçage > Comment utiliser le panneau d'amorçage

Comment utiliser le panneau d'amorçage

(*-*)浩
Libérer: 2019-07-11 11:30:05
original
2382 Les gens l'ont consulté

Ce chapitre expliquera les panneaux Bootstrap.

Comment utiliser le panneau d'amorçage

Le composant Panel est utilisé pour insérer des composants DOM dans une boîte. (Apprentissage recommandé : Tutoriel vidéo Bootstrap)

Pour créer un panneau de base, ajoutez simplement la classe .panel et la classe .panel-default à l'élément

C'est ça.

Comme le montre l'exemple ci-dessous :

<div class="panel panel-default">
    <div class="panel-body">
        这是一个基本的面板
    </div>
</div>
Copier après la connexion

Titre du panneau

Nous pouvons ajouter des panneaux des deux manières suivantes :

Il est facile d'ajouter un conteneur de titre à un panneau en utilisant la classe .panel-heading.

Utilisez

-

avec la classe .panel-title pour ajouter des titres de style prédéfinis.

Les exemples suivants illustrent ces deux méthodes :

<div class="panel panel-default">
    <div class="panel-heading">
        不带 title 的面板标题
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>
 
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            带有 title 的面板标题
        </h3>
    </div>
    <div class="panel-body">
        面板内容
    </div>
</div>
Copier après la connexion

Pour plus d'articles techniques liés à Bootstrap, veuillez visiter la colonne Tutoriel Bootstrap pour apprendre !

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!

Étiquettes associées:
source:php.cn
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal