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 !

Conteneur de mise en page

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)

 <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>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">table.table-striped tr:nth-child(odd){
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

Copier après la connexion

.table-hover Réalisez l'effet du survol de la souris

		 table.table-hover tr:hover{
            background:red;
            }
            /*控制各行的颜色,odd控制下标为偶数的行,even控制下标为奇数的行*/

.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

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

代发货

商品名称	商品价格	商品状态	success颜色
小米手机	1499	代发货	active颜色
小米手机	1499	代发货	info颜色
小米手机	1499	代发货	warning颜色
小米手机	1499	代发货	danger颜色

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!