Bootstrapレイアウト（タイトル）の使い方_JavaScriptスキルを徹底分析

Bootstrap は通常の HTML ページと同じです。タグ

から

は、そのデフォルトのスタイルをオーバーライドして、すべてのブラウザーで同じ効果を表示します。具体的には、定義されたルールを次の表に示します:

<!--Bootstrap中的标题--> 
<h1 id="Bootstrap标题一">Bootstrap标题一</h1>
<h2 id="Bootstrap标题二">Bootstrap标题二</h2>
<h3 id="Bootstrap标题三">Bootstrap标题三</h3>
<h4 id="Bootstrap标题四">Bootstrap标题四</h4>
<h5 id="Bootstrap标题五">Bootstrap标题五</h5>
<h6 id="Bootstrap标题六">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>

効果は次のとおりです:

さらに、Web 制作では、タイトルの後に小さな字幕が続くことがよくあります。 Bootstrap では、この植字効果も考慮し、 タグを使用して字幕を作成しました。このサブタイトルには独自のスタイルがいくつかあります:

1. 行の高さはすべて 1 で、フォントの太さは通常の効果 (太字ではない) になるように標準に設定され、色はグレー (#999) に設定されます。

2. のテキスト フォントは h1 ～ h3 にあるため、そのサイズは現在のフォント サイズの 65% に設定され、h4 ～ h6 のフォント サイズは現在のフォントの 75% に設定されます。サイズ

<!--Bootstrap中使用了<small>标签来制作副标题-->
<h1 id="Bootstrap标题一-small-我是副标题-small">Bootstrap标题一<small>我是副标题</small></h1>
<h2 id="Bootstrap标题二-small-我是副标题-small">Bootstrap标题二<small>我是副标题</small></h2>
<h3 id="Bootstrap标题三-small-我是副标题-small">Bootstrap标题三<small>我是副标题</small></h3>
<h4 id="Bootstrap标题四-small-我是副标题-small">Bootstrap标题四<small>我是副标题</small></h4>
<h5 id="Bootstrap标题五-small-我是副标题-small">Bootstrap标题五<small>我是副标题</small></h5> 
<h6 id="Bootstrap标题六-small-我是副标题-small">Bootstrap标题六<small>我是副标题</small></h6>

効果は次のとおりです:

上記は Bootstrap タイトル レイアウトの詳細な紹介です。今後もさらに内容が更新される予定です。ご注目ください。