コンテンツ(Content)

目次

• ヘッダ(Headings)
• 見出し用ヘッダ(Display headings)
• リード文(Lead)
• インラインテキスト要素(Inline text elements)
• 略語(Abbreviations)
• 引用(Blockquotes)
• リスト(List)
  • インラインリスト(Inline list)
  • スタイル無しリスト(Unstyled list)
  • 説明リスト(Description list)
• イメージ(Image)
  • レスポンスイメージ(Responsive images)
  • イメージサムネイル(Image thumbnails)
• テーブル(Tables)
  • 通常のテーブル(Normal Table)
  • コンテキストテーブル(Context table)
  • ストリップテーブル(Striped table)
  • ダークテーブル(Dark table)
  • ホバーテーブル(hoverable_table)
  • アクティブテーブル(Active table)
  • ボーダーテーブル(Bordered table)
  • スモールテーブル(Small table)
  • テーブルのキャプション(Caption of table)
  • レスポンシブテーブル(Responsive table)
• フィギュア(Figure)

ヘッダ(Headings)

.h1～.h6 は <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 headings)

.display-{n} は見出しを目立たせたい時に使用するヘッダを表示します。

<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>
<h1 class="display-5">Display 5</h1>
<h1 class="display-6">Display 6</h1>

リード文(Lead)

.lead はリード文を表示します。

<p class="lead">ここにはリード文を記述します。</p>

インラインテキスト要素(Inline text elements)

.mark, .small, .text-decoration-underline, .text-decoration-line-through は、<mark>, <small>, <u>, <s> と同じ見栄えを提供します。

<div>これは <span class="mark">強調</span> されたテキストです。</div>
<div>これは <span class="small">小さな</span> テキストです。</div>
<div>これは <span class="text-decoration-underline">下線がひかれた</span> テキストです。</div>
<div>これは <span class="text-decoration-line-through">打消しされた</span> テキストです。</div>

略語(Abbreviations)

<abbr> で表示した略語にマウスを乗せると title 属性で指定したタイトルが表示されます。.initialism は略語を少し小さく表示します。

<p>Webサイトを作成するには、<abbr title="HyperText Markup Language">HTML</abbr> を使用します。</p>
<p>Webサイトを作成するには、<abbr title="HyperText Markup Language" class="initialism">HTML</abbr> を使用します。</p>

引用(Blockquotes)

.blockquote は引用として文字を少し大きめに表示します。.blockquote-footer は引用下部の引用フッタを表示します。

<figure>
  <blockquote class="blockquote">
    <p>我思う、ゆえに我あり</p>
  </blockquote>
  <figcaption class="blockquote-footer">
    デカルト：<cite title="Source Title">「方法序説」</cite>
  </figcaption>
</figure>

リスト(List)

インラインリスト(Inline list)

.list-inline, .list-inline-item は、横方向に並ぶインラインリストを表示します。

<ul class="list-inline">
  <li class="list-inline-item">Apple</li>
  <li class="list-inline-item">Banana</li>
  <li class="list-inline-item">Strawberry</li>
</ul>

スタイル無しリスト(Unstyled list)

.list-unstyled はスタイルの無いリストを表示します。

<ul class="list-unstyled">
  <li>Apple</li>
  <li>Banana</li>
  <li>Strawberry</li>
</ul>

説明リスト(Description list)

<dl>, <dt>, <dd> で説明リストを記述する際、.col-sm-{n} 等を用いることで、幅の広い画面では用語と説明を横並びで表示し、サイズの狭い画面では改行して表示することができます。

<dl class="row">
  <dt class="col-sm-2">HTML</dt>
  <dd class="col-sm-10">HTML は HyperText Markup Language の略で...</dd>
  <dt class="col-sm-2">JavaScript</dt>
  <dd class="col-sm-10">JavaScript は...</dd>
</dl>

イメージ(Image)

レスポンスイメージ(Responsive images)

.img-fluid は横幅に応じて高さを自動調整するレスポンシブなイメージを表示します。

<div class="col-4">
  <img class="img-fluid" src="..." alt="...">
</div>

イメージサムネイル(Image thumbnails)

.img-thumbnail を指定すると画像の周りに丸みを持つボーダーを表示します。ディスプレイによっては薄くて目立たないことがあります。

<div class="col-4">
  <img class="img-fluid img-thumbnail" src="..." alt="...">
</div>

テーブル(Tables)

通常のテーブル(Normal Table)

.table は通常のテーブルを表示します。

<table class="table">
  <thead>
    <tr><th>Name</th><th>E-Mail</th><th>Description</th></tr>
  </thead>
  <tbody>
    <tr><td>Yamada</td><td>yamada@example.com</td><td>...</td></tr>
    <tr><td>Suzuki</td><td>suzuki@example.com</td><td>...</td></tr>
    <tr><td>Tanaka</td><td>tanaka@example.com</td><td>...</td></tr>
  </tbody>
</table>

コンテキストテーブル(Context table)

.table-{context} はコンテキストに応じた背景色を設定します。<table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td> などに指定することができます。

<table class="table">
  <tbody>
    <tr><td>Default</td><td>...</td><td>...</td></tr>
    <tr class="table-primary">...</tr>
    <tr class="table-secondary">...</tr>
    <tr class="table-success">...</tr>
    <tr class="table-danger">...</tr>
    <tr class="table-warning">...</tr>
    <tr class="table-info">...</tr>
    <tr class="table-light">...</tr>
    <tr class="table-dark">...</tr>
  </tbody>
</table>

ストリップテーブル(Striped table)

.table-striped は1行毎に色を変えたテーブルを表示します。

<table class="table table-striped">
  ...
</table>

ダークテーブル(Dark table)

.table-dark はダークカラーのテーブルを表示します。

<table class="table table-striped table-dark">
  ...
</table>

ホバーテーブル(hoverable_table)

.table-hover は、行の上にマウスを乗せると色が変わるテーブルを表示します。

<table class="table table-hover">
  ...
</table>

アクティブテーブル(Active table)

.table-active は、選択されたなどアクティブなテーブル、行、カラムを示します。

<table class="table">
  ...
  <tbody>
    <tr class="table-active">...</tr>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

ボーダーテーブル(Bordered table)

.table-bordered はボーダー付きのテーブルを表示します。.border-primary 等でボーダーの色を変更することもできます。.table-borderless を指定するとボーダーを表示しません。

<table class="table table-bordered">
  ...
</table>

スモールテーブル(Small table)

.table-sm は、小さなテーブルを表示します。

<table class="table table-sm">
  ...
</table>

テーブルのキャプション(Caption of table)

.caption-top は、通常下部に表示されるキャプションを上部に表示します。

<table class="table caption-top">
  <caption>List of users</caption>
  ...
</table>

レスポンシブテーブル(Responsive table)

.table-responsive でラップしたテーブルは、横幅が広いときにスクロールバーが表示されます。.table-responsive-{breakpoint} は、{breakpoint} 以上の時はスクロール無し、それ未満の場合にスクロールを表示します。

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

フィギュア(Figure)

.figure, .figure-img, .figure-caption は、<figure> や <figcaption> のマージン、フォントサイズ、色など、いくつかのスタイルを設定します。

<div class="col-4">
  <figure class="figure">
    <img src="..." class="figure-img img-fluid" alt="...">
    <figcaption class="figure-caption">Caption</figcaption>
  </figure>
</div>

---