タイポグラフィ

グローバル設定、見出し、本文、リストなど、ブートストラップのタイポグラフィに関するドキュメントと例。

見出し

`<h1>から <h6>`までのすべてのHTML見出しが利用可能です。

見出し Examples

<h1></h1>

h1. Bootstrap 見出し

<h2></h2>

h2. Bootstrap 見出し

<h3></h3>

h3. Bootstrap 見出し

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap 見出し
<h1>h1. Bootstrap 見出し</h1>
<h2>h2. Bootstrap 見出し</h2>
<h3>h3. Bootstrap 見出し</h3>
<h4>h4. Bootstrap 見出し</h4>
<h5>h5. Bootstrap 見出し</h5>
<h6>h6. Bootstrap 見出し</h6>

.h1から .h6クラスも利用できます。これは、見出しのフォントスタイルを一致させたいが、関連するHTML要素を使用できない場合に使用します。

h1. Bootstrap 見出し

h2. Bootstrap 見出し

h3. Bootstrap 見出し

h4. Bootstrap 見出し

h5. Bootstrap 見出し

h6. Bootstrap 見出し

<p class="h1">h1. Bootstrap 見出し</p>
<p class="h2">h2. Bootstrap 見出し</p>
<p class="h3">h3. Bootstrap 見出し</p>
<p class="h4">h4. Bootstrap 見出し</p>
<p class="h5">h5. Bootstrap 見出し</p>
<p class="h6">h6. Bootstrap 見出し</p>

.title, for when you want some bolder titles with a different font family.

h1. Bootstrap 見出し

h2. Bootstrap 見出し

h3. Bootstrap 見出し

h4. Bootstrap 見出し

h5. Bootstrap 見出し
h6. Bootstrap 見出し
<h1 class="title">h1. Bootstrap 見出し</h1>
<h2 class="title">h2. Bootstrap 見出し</h2>
<h3 class="title">h3. Bootstrap 見出し</h3>
<h4 class="title">h4. Bootstrap 見出し</h4>
<h5 class="title">h5. Bootstrap 見出し</h5>
<h6 class="title">h6. Bootstrap 見出し</h6>

見出しのカスタマイズ

付属のユーティリティクラスを使用して、Bootstrap 3から小さな二次見出しテキストを再作成します。

派手なディスプレイの見出し フェードされたセカンダリテキストあり
<h3>
 派手なディスプレイの見出し
  <small class="text-muted">フェードされたセカンダリテキストあり</small>
</h3>

ブロッククォート

ドキュメント内の他のソースからのコンテンツのブロックを引用するためのものです。引用符として«blockquote class = “blockquote”> `を HTML の周りにラップします。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ソースの命名

ソースを識別するための <footer class =" blockquote-footer ">を追加してください。原作の名前を <cite>で囲んでください。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

で有名な人 ソース
<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">で有名な人 <cite title="Source Title">ソース</cite></footer>
</blockquote>

アライメント

必要に応じてテキストユーティリティを使用して、ブロッククォートの配置を変更します。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote text-center">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
<blockquote class="blockquote text-right">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>