Maison > Article > interface Web > Introduction au style de typographie, au style de liste et au style de tableau de la mise en page bootstrap
Cet article vous présentera le style de mise en page, le style de liste et le style de tableau de la mise en page bootstrap. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile. Si vous souhaitez apprendre et obtenir plus de didacticiels vidéo sur le bootstrap, vous pouvez également visiter : tutoriel bootstrap !
bootstrap Il estime que chaque page Web devrait avoir une largeur fixe, il sera centré horizontalement et verticalement à l’intérieur du conteneur ou occupera 100% de la largeur du conteneur.
Bootstrap définit la taille de police globale sur 14 px, la hauteur de ligne sur 1,428 (20 px), couleur à # 333
1) Largeur fixe
.container la classe est utilisée pour largeur fixe et conteneurs prenant en charge une mise en page réactive (centrée horizontalement).
2) Pourcentage de largeur
.container-fluide est utilisé pour les conteneurs d'une largeur de 100% et occupe toute la fenêtre de visualisation.
Style de composition
.text-center Alignement au centre
.text-right Aligner à droite
.text-left Aligner à gauche
.text-uppercase est utilisé pour convertir les lettres minuscules en lettres majuscules
.text-lowercase est utilisé pour convertir les lettres majuscules en lettres minuscules
.text-capitalize est utilisé pour mettre en majuscule la première lettre
La balise indique une abréviation ou une abréviation, telle que "WWW" ou "OTAN" (favorable aux recherches sur les moteurs de recherche)
Surligner le texte (ombrage)
Les balises suivantes sont de style bootstrap
est utilisé pour représenter le code source d'un ordinateur ou tout autre contenu textuel pouvant être lu par une machine. (Shading)
.table-hover Réalisez l'effet du survol de la souris .table-condensed Table compacte, divisez par deux la valeur de remplissage .table-responsive Définissez la réactivité de l'élément parent de la table Lorsque l'écran est inférieur à 768 pixels, des bordures apparaîtront autour de lui La classe de statut ne peut être définie que pour tr ou td ou th, et ne peut pas être définie pour les balises de table Ces classes d'état vous permettent de définir les couleurs des lignes ou des cellules 具体请看:
danger颜色 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! <span style="color:rgb(0,0,0);font-family:'PingFangSC-Regular', Verdana, Arial, '微软雅黑', '宋体';font-size:14px;text-align:left;background-color:rgb(253,252,248);">Les applications courantes représentent le code source de l'ordinateur (un ombrage et des bordures sont ajoutés) </span></span> </span></p>
<p><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">Style de liste</span></strong></span><br></p>
<p><span style="font-size:14px;color:#000000;"><strong>Liste : liste ordonnée, non ordonnée liste, liste de définitions. </strong></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.sr uniquement </em>Masque un élément, qui peut être une ligne, une colonne ou le tableau entier</span></p>
<p><span style="font-size:14px;color:#000000;"><em>.list-unstyled</em> est utilisé pour supprimer les puces devant la liste et supprimer la valeur de marge par défaut de la liste </span></p>
<p><span style="font-size:14px;color:#000000;">. list-inline organisera le contenu de la liste sur la même ligne et ajoutera une petite quantité de valeur de remplissage </span></p>
<p><span style="font-size:14px;color:#000000;">.dl-horizontal</span><span style="font-size:14px;color:#ff6666;"> pour définir la liste en utilisant </span><span style="font-size:14px;color:#000000;">, Disposez le titre de la définition et les informations de description de la définition sur la même ligne, et disposez le contenu de la balise dt et de la balise dd sur la même ligne </span></p>
<p><span style="color:rgb(0,0,0);"><span style="color:rgb(204,102,0);"><strong><span style="font-size:18px;">Style de table</span> </strong></span><br></span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table</em> Ajoutez la classe .table à n'importe quel < table> pour lui donner un style de base, quelques remplissages et lignes de séparation horizontales. </span></p>
<p><span style="font-size:14px;color:#000000;"><em>.table-bordered</em> Ajoute des bordures au tableau et à chaque cellule qu'il contient </span></p>
<p><span style="font-size:14px;color:#000000;"><em>. rayé </em> obtient l'effet de changement de couleur de chaque ligne (</span><span style="font-size:14px;color:#ff6666;">IE8 ne prend pas en charge </span><span style="font-size:14px;color:#000000;">) </span></p>
<pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
table.table-hover tr:hover{
background:red;
}
/*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/
Catégorie
Description
Instance
.active
Appliquez la couleur de survol à la ligne ou à la cellule
Essayez-le
.success
indique une opération réussie
essayez Juste un instant
.info
Opération indiquant un changement d'information
Essayez-le
.avertissement
Indique une opération d'avertissement
Essayez-le
.danger
indique une opération dangereuse
à essayer une fois
总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。
商品名称
商品价格
商品状态
succès
小米手机
1499
代发货
active颜色
小米手机
1499
info颜色
小米手机
1499
avertissement
小米手机
1499
代发货
danger颜色
商品名称
商品价格
商品状态
success颜色
小米手机
1499
代发货
active颜色
小米手机
1499
代发货
info颜色
小米手机
1499
代发货
warning颜色
小米手机
1499
代发货