Maison > interface Web > js tutoriel > Analyse complète de la façon d'utiliser les compétences de mise en page Bootstrap (titre)_javascript

Analyse complète de la façon d'utiliser les compétences de mise en page Bootstrap (titre)_javascript

WBOY
Libérer: 2016-05-16 15:28:51
original
1641 Les gens l'ont consulté

Bootstrap est identique à une page HTML ordinaire. Les balises

à

sont utilisées pour définir le titre. Cependant, Bootstrap remplace son style par défaut et l'utilise pour afficher le même effet dans tous les navigateurs. Plus précisément, les règles définies peuvent être affichées dans le tableau suivant :

<!--Bootstrap中的标题--> 
<h1>Bootstrap标题一</h1>
<h2>Bootstrap标题二</h2>
<h3>Bootstrap标题三</h3>
<h4>Bootstrap标题四</h4>
<h5>Bootstrap标题五</h5>
<h6>Bootstrap标题六</h6>

<!--Bootstrap中让非标题元素和标题使用相同的样式-->
<div class="h1">Bootstrap标题一</div>
<div class="h2">Bootstrap标题二</div>
<div class="h3">Bootstrap标题三</div>
<div class="h4">Bootstrap标题四</div>
<div class="h5">Bootstrap标题五</div>
<div class="h6">Bootstrap标题六</div>

Copier après la connexion

L'effet est le suivant :

De plus, en production web, on rencontre souvent un titre suivi d'une ligne de petits sous-titres. Dans Bootstrap, il a également pris en compte cet effet de composition et a utilisé la balise Ce sous-titre a son propre style :

1. La hauteur de la ligne est entièrement de 1, et l'épaisseur de la police est définie sur normal pour devenir un effet régulier (pas en gras), et la couleur est définie sur gris (#999).

2. Étant donné que la police du texte dans est en h1~h3, sa taille est définie sur 65 % de la taille de police actuelle tandis que la taille de police en h4~h6 est définie sur 75 % de la police actuelle ; taille;

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1>Bootstrap标题一<small>我是副标题</small></h1>
<h2>Bootstrap标题二<small>我是副标题</small></h2>
<h3>Bootstrap标题三<small>我是副标题</small></h3>
<h4>Bootstrap标题四<small>我是副标题</small></h4>
<h5>Bootstrap标题五<small>我是副标题</small></h5> 
<h6>Bootstrap标题六<small>我是副标题</small></h6>
Copier après la connexion

L'effet est le suivant :

Ce qui précède est une introduction détaillée à la disposition du titre Bootstrap. D'autres contenus seront mis à jour à l'avenir. J'espère que vous continuerez à y prêter attention.

É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