ヘッダには <h1>
~<h6>
を使用します。.h1
~.h6
のクラスも使用できます。<small>
で副題をつけることもできます。
<h1>H1 Bootstrap入門 <small>Secondary text</small></h1> <h2>H2 Bootstrap入門 <small>Secondary text</small></h2> <h3>H3 Bootstrap入門 <small>Secondary text</small></h3>
通常のヘッダよりもさらに目立たせたいヘッダがあれば、.display-1
~.display-4
を用いてさらに大きな見出しとします。
<h1 class="display-1">Boorstrap入門 1</h1> <h1 class="display-2">Boorstrap入門 2</h1> <h1 class="display-3">Boorstrap入門 3</h1> <h1 class="display-4">Boorstrap入門 4</h1>
本文には <p>
を用います。.lead
は記事のリード(要旨)を示します。
Bootstrap 入門へようこそ
Bootstrap は・・・
<p class="lead">Bootstrap 入門へようこそ</p> <p>Bootstrap は・・・</p>
<mark>
, <del>
, <s>
, <ins>
, <u>
, <small>
, <strong>
, <em>
はそれぞれ下記の様に使用します。.mark
, .small
などのクラスも利用可能です。
<mark> は 重要なテキスト を示します。
<del> は 削除されたテキスト を示します。
<s> は 取り消されたテキスト を示します。
<ins> は 挿入されたテキスト を示します。
<u> を指定すると 下線付き で表示されます。
<small> を指定すると 小さなテキスト で表示されます。
<strong> は 強調されたテキスト を示します。
<em> は emphasis(強調された) text を示します。
<p><mark> は <mark>重要なテキスト</mark> を示します。</p> <p><del> は <del>削除されたテキスト</del> を示します。</p> <p><s> は <s>取り消されたテキスト</s> を示します。</p> <p><ins> は <ins>挿入されたテキスト</ins> を示します。</p> <p><u> を指定すると <u>下線付き</u> で表示されます。</p> <p><small> を指定すると <small>小さなテキスト</small> で表示されます。</p> <p><strong> は <strong>強調されたテキスト</strong> を示します。</p> <p><em> は <em>emphasis(強調された) text</em> を示します。</p>
<abbr>
は略語を示します。title="..."
を指定すると略語が点線の下線付きで表示され、マウスを乗せると説明が表示されます。.initialism
を指定すると、略語が少し小さく表示されます。
HTML is ...
HTML is ...
<p><abbr title="HyperText Markup Language">HTML</abbr> is ...</p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is ...</p>
<blockquote class="blockquote">
は引用を示します。<footer class="blockquote-footer">
は引用元、<cite>
は引用元のタイトルを示します。
吾輩は猫である。名前はまだ無い。
<blockquote class="blockquote"> <p>吾輩は猫である。名前はまだ無い。</p> <footer class="blockquote-footer">夏目漱石 <cite>「吾輩は猫である」</cite></footer> </blockquote>
.text-left
, .text-center
, .text-right
, .text-justify
, .text-nowrap
はそれぞれ、下記の様に指定します。
左寄せテキスト
中央寄せテキスト
右寄せテキスト
両端揃えテキスト
改行禁止テキスト
<p class="text-left">左寄せテキスト</p> <p class="text-center">中央寄せテキスト</p> <p class="text-right">右寄せテキスト</p> <p class="text-justify">両端揃えテキスト</p> <p class="text-nowrap">改行禁止テキスト</p>
リストに .list-unstyled
を指定すると、先頭マークの無いリストを表示します。
<ul class="list-unstyled"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul>
.list-inline
, .list-inline-item
は横方向に並ぶインラインリストを表示します。
<ul class="list-inline"> <li class="list-inline-item">HTML</li> <li class="list-inline-item">CSS</li> <li class="list-inline-item">JavaScript</li> </ul>