タイポグラフィ

Bootstrapデフォルトセッティング

Bootstrapのグローバルデフォルトフォントサイズは14pxで、行間は1.428です。
これは <body> とすべての段落に適用されます。
さらに、すべての <p> 要素には、計算された行の高さの半分に等しいボトムマージンがあります（デフォルトでは10px）。
Bootstrapでは基本的に文章を <p> で囲います。

<h1> - <h6>

デフォルトの <h1> から <h6> のスタイルは以下です。

h1の見出しです。(36px)

h2の見出しです。(30px)

h3の見出しです。(24px)

h4の見出しです。(18px)

h5の見出しです。(14px)

h6の見出しです。(12px)

<small>

<small> 要素を使用して、見出しに軽い2番目のテキストを作成します。

h1の見出しです。(36px) サブ見出し

h2の見出しです。(30px) サブ見出し

h3の見出しです。(24px) サブ見出し

h4の見出しです。(18px) サブ見出し

h5の見出しです。(14px) サブ見出し

h6の見出しです。(12px) サブ見出し

<h1>h1の見出しです。(36px)<small>サブ見出し</small></h1>

<mark>

<mark> はテキストをハイライトします。

<p><code>&lt;mark&gt;</code>はテキストを<mark>ハイライト</mark>します。</p>

<abbr>

<abbr> は略語に正式名称を付けます。 html はHypertext Markup Languageの略です。

<abbr title="Hypertext Markup Language">html</abbr>はHypertext Markup Languageの略です。

<blockquote>

テキストを引用します。

Bootstrapチュートリアル

<blockquote><p>テキストを引用します。</p><footer>Bootstrapチュートリアル</footer></blockquote>

右寄せで引用符を表示するには、 .blockquote-reverse クラスを使用します。

テキストを引用します。

Bootstrapチュートリアル

<blockquote class="blockquote-reverse"><p>テキストを引用します。</p><footer>Bootstrapチュートリアル</footer></blockquote>

<dl>

コーヒー: - 黒くて暖かい飲み物
ミルク: - 白くて冷たい飲み物

<dl>
  <dt>コーヒー</dt>
  <dd>- 黒くて暖かい飲み物</dd>
  <dt>ミルク</dt>
  <dd>- 白くて冷たい飲み物</dd>
</dl>

<code>

次のHTML要素： span 、 section 、および div は、ドキュメント内のセクションを定義します。

<p>次のHTML要素：<code>span</code>、<code>section</code>、および<code>div</code>は、ドキュメント内のセクションを定義します。</p>

<kbd>

印刷するには ctrl + p を押してください。

<p>印刷するには<kbd>ctrl + p</kbd>を押してください。</p>

<pre>

囲まれた範囲
のソースに記述されたスペース・改行
などを、そのまま等幅
フォントで表示します。

<pre>
囲まれた範囲
のソースに記述されたスペース・改行
などを、そのまま等幅
フォントで表示します。
</pre>

色と背景

Bootstrapには、「色を通して意味」を提供するために使用できるいくつかのコンテキストクラスがあります。テキストカラーのクラスは、 .text-muted 、 .text-primary 、 .text-success 、 .text-info 、 .text-warning 、および .text-danger です。

このテキストはmuted。

このテキストはimportant。

このテキストはsuccess。

このテキストはinformation。

このテキストはwarning。

このテキストはdanger。

<p class="text-muted">このテキストはmuted。</p>
<p class="text-primary">このテキストはimportant。</p>
<p class="text-success">このテキストはsuccess。</p>
<p class="text-info">このテキストはinformation。</p>
<p class="text-warning">このテキストはwarning。</p>
<p class="text-danger">このテキストはdanger。</p>

背景色を変える場合は以下のようにします。

このテキストはimportant。

このテキストはsuccess。

このテキストはinformation。

このテキストはwarning。

このテキストはdanger。

<p class="bg-primary">このテキストはimportant。</p>
<p class="bg-success">このテキストはsuccess。</p>
<p class="bg-info">このテキストはinformation。</p>
<p class="bg-warning">このテキストはwarning。</p>
<p class="bg-danger">このテキストはdanger。</p>

その他のタイポグラフィクラス

テキストを目立たせる。

<p class="lead">テキストを目立たせる。</p>

テキストを小さく。

<p class="small">テキストを小さく。</p>

テキストを左寄せ。

<p class="text-left">テキストを左寄せ。</p>

テキストを右寄せ。

<p class="text-right">テキストを右寄せ。</p>

テキストをセンター寄せ。

<p class="text-center">テキストをセンター寄せ。</p>

テキストを両端揃えで表示。テキストを両端揃えで表示。テキストを両端揃えで表示。テキストを両端揃えで表示。

<p class="text-justify">テキストを両端揃えで表示。テキストを両端揃えで表示。テキストを両端揃えで表示。テキストを両端揃えで表示。</p>