タイポグラフィ
グローバル設定、見出し、本文、リストなど、ブートストラップのタイポグラフィに関するドキュメントと例。
見出し
`<h1>から <h6>`までのすべてのHTML見出しが利用可能です。
| 見出し | Examples |
|---|---|
|
|
h1. Bootstrap 見出し |
|
|
h2. Bootstrap 見出し |
|
|
h3. Bootstrap 見出し |
|
|
h4. Bootstrap heading |
|
|
h5. Bootstrap heading |
|
|
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.
<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.
<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>