ヘッダには <h1>
~<h6>
を使用します。.h1
~.h6
のクラスも使用できます。<small class="text-muted">
で副題をつけることもできます。
<h1>H1 Bootstrap入門 <small class="text-muted">Secondary text</small></h1> <h2>H2 Bootstrap入門 <small class="text-muted">Secondary text</small></h2> <h3>H3 Bootstrap入門 <small class="text-muted">Secondary text</small></h3> <h4>H4 Bootstrap入門 <small class="text-muted">Secondary text</small></h4> <h5>H5 Bootstrap入門 <small class="text-muted">Secondary text</small></h5> <h6>H6 Bootstrap入門 <small class="text-muted">Secondary text</small></h6>
通常のヘッダよりもさらに目立たせたいヘッダがあれば、.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
はそれぞれ、テキストを左寄せ、中央寄せ、左寄せします。
左寄せテキスト
中央寄せテキスト
右寄せテキスト
<p class="text-left">左寄せテキスト</p> <p class="text-center">中央寄せテキスト</p> <p class="text-right">右寄せテキスト</p>
.text-justify
はテキストを両端揃えにします。
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
<p style="width:30rem; border:1px solid gray;"> Bootstrap is an ... </p> <p class="text-justify" style="width:30rem; border:1px solid gray;"> Bootstrap is an ... </p>
.text-nowrap
は改行を禁止します。
改行が禁止されたテキスト
<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>
.text-trancated
は横幅に収まりきらないテキストを ... で断ち切ります。
Truncated terms is truncated.
<div style="width:100px; border:1px solid #ccc;"> <pre class="text-truncate">Truncated terms is truncated.</pre> </div>