Bootstrap のグローバルなデフォルト・フォントサイズは 14px で、行の高さは 1.428 です。
これは、<body>
と全てのパラグラフに適用されます。
さらに、すべての <p>
には、各要素から計算された行の高さ (デフォルトで 10px) の半分の下マージンが
設定されます。
この章では、ブラウザ・デフォルトよりも、Bootstrap によって少し異なったスタイル になるいくつかの HTML 要素を見ていきます。
デフォルトで、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 »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 »Bootstrap は、次のように HTML <mark>
要素をスタイルします:
Bootstrap は、次のように HTML <abbr>
要素をスタイルします:
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.
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.
Try it Yourself »Bootstrap は、次のように HTML <dl>
要素をスタイルします:
Bootstrap は、次のように HTML <code>
要素をスタイルします:
The following HTML elements: span
, section
, and div
defines a section in a document.
Try it Yourself »Bootstrap は、次のように HTML <kbd>
要素をスタイルします:
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-success
、bg-info
、bg-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 »下の 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 |
すべての typography 要素/クラスの完全なリファレンスは、 Bootstrap タイポグラフィ・リファレンス をご覧ください。
また、コンテキスト・クラスの詳細については、Bootstrap Helper クラス・リファレンス もご覧ください。