Bootstrap テキスト/タイポグラフィ

❮ 前章へ 次章へ ❯

Bootstrap のデフォルト設定

Bootstrap のグローバルなデフォルト・フォントサイズは 14px で、行の高さは 1.428 です。

これは、<body> と全てのパラグラフに適用されます。

さらに、すべての <p> には、各要素から計算された行の高さ (デフォルトで 10px) の半分の下マージンが 設定されます。


Bootstrap 対 Browser デフォルト

この章では、ブラウザ・デフォルトよりも、Bootstrap によって少し異なったスタイル になるいくつかの HTML 要素を見ていきます。


<h1> - <h6>

デフォルトで、Bootstrap は次の方法で HTML 見出し (<h1><h6>) をスタイルします:

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
Try it Yourself »

<small>

Bootstrap の HTML <small> 要素は、全ての見出しで薄くて補助的な文字を作成するのに使用します:

h1 heading secondary text

h2 heading secondary text

h3 heading secondary text

h4 heading secondary text

h5 heading secondary text
h6 heading secondary text
Try it Yourself »

<mark>

Bootstrap は、次のように HTML <mark> 要素をスタイルします:

Use the mark element to highlight text.

Try it Yourself »

<abbr>

Bootstrap は、次のように HTML <abbr> 要素をスタイルします:

The WHO was founded in 1948.

Try it Yourself »

<blockquote>

Bootstrap は、次のように HTML <blockquote> 要素をスタイルします:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
Try it Yourself »

引用を右揃えにするには、.blockquote-reverse クラスを使用します:

For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

From WWF's website
Try it Yourself »

<dl>

Bootstrap は、次のように HTML <dl> 要素をスタイルします:

Coffee
- black hot drink
Milk
- white cold drink
Try it Yourself »

<code>

Bootstrap は、次のように HTML <code> 要素をスタイルします:

The following HTML elements: span, section, and div defines a section in a document.

Try it Yourself »

<kbd>

Bootstrap は、次のように HTML <kbd> 要素をスタイルします:

Use ctrl + p to open the Print dialog box.

Try it Yourself »

<pre>

Bootstrap は、次のように HTML <pre> 要素をスタイルします:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
bothspaces and
line breaks.
Try it Yourself »

コンテキストカラーと背景色

Bootstrap には、「色を介した意味」を提供するために使用できるいくつかのコンテキストクラスがあります。

テキスト色のクラスは次の通り:.text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger:

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »

背景色のクラスは次の通り:.bg-important .bg-successbg-infobg-warning.bg-danger

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

Try it Yourself »

その他の Typography クラス

下の Bootstrap クラスは、HTML 要素へスタイルをさらに追加することができます:

クラス 説明
.lead 段落を目立たせます Try it
.small 小さいテキストを表します(親のサイズの85%に設定) Try it
.text-left 左揃えのテキストを表します Try it
.text-center 中央揃えのテキストを表します Try it
.text-right I右揃えのテキストを表します Try it
.text-justify 両端揃えのテキストを表します Try it
.text-nowrap 折り返さないテキストを表しますIndicates no wrap text Try it
.text-lowercase 小文字nテキストを表します Try it
.text-uppercase 大文字nテキストを表します Try it
.text-capitalize 先頭が大文字のテキストを表します Try it
.initialism <abbr> 要素内のテキストをわずかに小さいフォントサイズで表示します Try it
.list-unstyled リスト項目におけるデフォルトのリスト·スタイルと左マージンを削除します (<ul><ol> の双方で動作する)。 このクラスは、直接の子であるリスト項目にのみ適用されます (ネストしたリストからデフォルトのリストスタイルを削除するには、ネストしたリストにもこのクラスを適用します) Try it
.list-inline 1 行内に全リスト項目を配置します Try it
.dl-horizontal <dl> 要素内の用語 (<dt>) と 説明 (<dd>) を、同じ行に並べて配置します。 最初は、デフォルトの <dl> と同じに表示されますが、 ブラウザ・ウィンドウがを広げると、並べて表示されるようになります。 Try it
.pre-scrollable <pre> 要素をスクロール可能にします Try it

完全な Bootstrap タイポグラフィ・リファレンス

すべての typography 要素/クラスの完全なリファレンスは、 Bootstrap タイポグラフィ・リファレンス をご覧ください。

また、コンテキスト・クラスの詳細については、Bootstrap Helper クラス・リファレンス もご覧ください。


❮ 前章へ 次章へ ❯