Maison > interface Web > Tutoriel d'amorçage > Combien de classes communes y a-t-il dans bootstrap ?

Combien de classes communes y a-t-il dans bootstrap ?

Libérer: 2019-07-31 14:33:46
original
4548 Les gens l'ont consulté

Combien de classes communes y a-t-il dans bootstrap ?

Classe couramment utilisée dans le bootstrap :

Classe de base

.code来显示单行内联代码
.pre来显示多行块代码
.kbd来显示用户输入代码
.pre-scrollable高度超出340px,就会在Y轴出现滚动条
Copier après la connexion

Classe de table

.table基础表格margin-bottom:20px,在thead底部2px的浅灰实线,每个单元格顶部1px的浅灰实线
.table-striped:斑马线表格,隔行有一个浅灰色的背景色
.table-bordered:带边框的表格,所有单元格有1px的边框
.table-hover:鼠标悬停在表格的行上,有高亮的背景色
.table-condensed:将单元格的内距由8px调至5px
.table-responsive:设置类名.table-responsive的容器,将<table class="table">置于这个容器中
Copier après la connexion

Classe de ligne de tableau

.active表示当前活动信息
.success成功或正确的行为
.info表示中立信息或行为
.warning表示警告
.danger表示危险活着错误行为
Copier après la connexion

En plus de .active, les quatre autres noms de classe doivent correspondre à .table-hover

Form

.form- effet de formulaire horizontal, correspondant au système de grille du framework Bootstrap ; définition des valeurs de remplissage et de marge des contrôles de formulaire ; modification de l'expression de "form-group", similaire à la "ligne" du système de grille
lors de l'utilisation de l'entrée dans Bootstrap Le type type
doit être ajouté afin de garantir que le style de contrôle ne se trompe pas dans différents styles de formulaire. Vous devez ajouter .form-control
pour définir la sélection de plusieurs lignes. la valeur de l'attribut multiple sur plusieurs
lignes pour définir la hauteur et les colonnes pour définir la largeur. .form-control, il n'y a pas besoin de cols
Utilisez le package d'étiquettes pour la case à cocher et la radio
Si la case à cocher doit être disposée horizontalement, il vous suffit d'ajouter le nom de la classe "checkbox-inline" au label label

Barre de navigation fixe

Le haut et le bas du contenu principal de la page sont couverts par la barre de navigation fixe. Afin d'éviter que la barre de navigation fixe ne recouvre le contenu, nous devons faire quelques traitements sur le corps :

body {
padding-top: 70px;/*有顶部固定导航条时设置*/
padding-bottom: 70px;/*有底部固定导航条时设置*/
}
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
 …
</div>
Copier après la connexion

En fait, en plus de cette solution, nous avons d'autres solutions, en plaçant la barre de navigation fixe sur le contenu de la page Recto :

<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
 …
</div>
<div class="content">我是内容</div>
Copier après la connexion

Ajoutez le code de style suivant dans le fichier :

.navbar-fixed-top ~ .content {
padding-top: 70px;
}
.navbar-fixed-bottom ~ .content {
padding-bottom: 70px;
}
Copier après la connexion

Recommandé : Tutoriel de mise en route 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!

É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