Bootstrap 5 テキスト/タイポグラフィ

Bootstrap 5 のデフォルト設定

Bootstrap 5 のデフォルトの font-size は 1rem (デフォルトでは 16px) で、line-height は 1.5 です。

さらに、すべての <p> 要素には margin-top: 0 と margin-bottom: 1rem が設定されています (デフォルトは 16px )。

<h1> ～ <h6>

Bootstrap 5 は、HTML 見出し (<h1> ～ <h6>) をスタイル設定して、フォントの太さを太くし、レスポンシブなフォント サイズにします。

例

自分で試してみてください

必要に応じて、他の要素で .h1 クラスから .h6 クラスを使用して、要素を見出しとして動作させることもできます。

例

<p class="h1">h1 Bootstrap heading</p>
<p class="h2">h2 Bootstrap heading</p>
<p class="h3">h3 Bootstrap heading</p>
<p class="h4">h4 Bootstrap heading</p>
<p class="h5">h5 Bootstrap heading</p>
<p class="h6">h6 Bootstrap heading</p>

自分で試してみてください

タイトルを表示

表示見出しは、通常の見出しよりも目立つように使用されます (フォント サイズが大きく、フォントの太さが細くなります)。.display-1 から までの 6 つのクラスから選択できます。ディスプレイ-6:

例

自分で試してみてください

<small>

Bootstrap 5 では、HTML <small> 要素 (および .small クラス) を使用して、見出し内に小さな二次テキストを作成します。

例

自分で試してみてください

<mark>

Bootstrap 5 は、黄色の背景色とパディングを使用して <mark> と .mark をスタイル設定します。

例

自分で試してみてください

<abbr>

Bootstrap 5 は、HTML <abbr> 要素のスタイルを設定して、下部に破線の境界線が表示され、ホバーすると疑問符の付いたカーソルが表示されます。

例

自分で試してみてください

<blockquote>

他のソースからコンテンツ ブロックを引用する場合は、.blockquote クラスを

に追加します。 ソースに名前を付ける場合、たとえば「WWF ウェブサイトから」など、.blockquote-footer クラスを使用します。

 

例

自分で試してみてください

<dl>

Bootstrap 5 は、次の方法で HTML <dl> 要素のスタイルを設定します。

例

自分で試してみてください

<code>

Bootstrap 5 は、次の方法で HTML <code> 要素のスタイルを設定します。

例

自分で試してみてください

<kbd>

Bootstrap 5 は、次の方法で HTML <kbd> 要素のスタイルを設定します。

例

自分で試してみてください

<pre>

Bootstrap 5 は、次の方法で HTML <pre> 要素のスタイルを設定します。

例

自分で試してみてください

その他のタイポグラフィ

次の Bootstrap 5 クラスをスタイル HTML 要素にさらに追加できます。