Analyse complète de la façon d'utiliser la mise en page Bootstrap (style de texte)_compétences javascript-js tutoriel-php.cn

Analyse complète de la façon d'utiliser la mise en page Bootstrap (style de texte)_compétences javascript

WBOY

Libérer： 2016-05-16 15:28:46

original

1307 Les gens l'ont consulté

1. Paragraphe

Le paragraphe est un autre élément important de la typographie. Définissez un style de texte global pour le texte dans Bootstrap (le texte ici fait référence au corps du texte) :

1. La taille globale de la police du texte est de 14 px (font-size).

2. La hauteur de ligne est de 1,42857143 (hauteur de ligne), soit environ 20 pixels (vous pourriez être confus lorsque vous voyez une série de décimales. En fait, elle est calculée via le compilateur LESS. Bien sûr, Sass a également une telle fonction).

3. La couleur est gris foncé (#333) ;

2. Style de texte

Dans les projets réels, pour certains textes importants, les parties que vous souhaitez mettre en valeur seront traitées dans des styles différents. Bootstrap effectue également un traitement léger de cette partie.

Si vous souhaitez qu'un paragraphe p soit mis en surbrillance, vous pouvez le faire en ajoutant le nom de classe ".lead". Sa fonction est d'augmenter la taille de la police du texte, de mettre le texte en gras et également de traiter la hauteur de ligne et la marge en conséquence. .

1. Gras : Dans Bootstrap, vous pouvez utiliser les balises et pour mettre le texte en gras directement.

2. Italique : Dans Bootstrap, vous pouvez utiliser ou pour obtenir du texte en italique.

3. Catégorie d'accentuation

.text-muted : Indice, utilisez du gris clair (#999)
.text-primary : Primaire, utilisez le bleu (#428bca)
.text-success : Succès, utilisez du vert clair (#3c763d)
.text-info : Informations de notification, utilisez le bleu clair (#31708f)
.text-warning : Attention, utilisez du jaune (#8a6d3b)
.text-danger : Danger, utilisez du marron (#a94442)

<div class="text-muted">.text-muted 效果</div> <div class="text-primary">.text-primary效果</div> <div class="text-success">.text-success效果</div> <div class="text-info">.text-info效果</div> <div class="text-warning">.text-warning效果</div> <div class="text-danger">.text-danger效果</div>
Copier après la connexion

L'effet est le suivant :

4. Alignement du texte
L'alignement du texte est indispensable en composition. Text-align est souvent utilisé en CSS pour définir le style d'alignement du texte. Il existe quatre styles principaux :

☑ Aligné à gauche,
prend la valeur à gauche
☑ Alignez au centre,
prend le centre de valeur
☑ Alignez à droite,
prend la valeur à droite
☑ Alignez les deux extrémités,
prend la valeur justifier
Afin de simplifier l'opération et de faciliter l'utilisation, Bootstrap définit quatre noms de classes
à pour contrôler le style d'alignement du texte :
☑ .text-left：
Aligner à gauche
☑ .text-center：
aligné au centre
☑ .text-right :
aligné à droite
☑ .text-justify：
Alignez les deux extrémités

Avec les styles de texte, l'effet de mise en page est plus clair et plus concis. J'espère que vous pourrez utiliser des styles de texte plus simples et généreux dans vos œuvres pour que vos œuvres se démarquent et soient plus attrayantes.