ブートストラップテキスト/タイポグラフィ

❮ 前次 ❯

ブートストラップのデフォルト設定

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

これは、<body>要素とすべての段落（<p>）に適用されます。

さらに、すべての<p>要素には、計算された行の高さの半分（デフォルトでは10px）に等しい下マージンがあります。

ブートストラップとブラウザのデフォルト

この章では、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)

<小さい>

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

<マーク>

Bootstrapは<mark>、次の方法でHTML要素のスタイルを設定します。

例

Use the mark element to highlight text.

<略語>

Bootstrapは<abbr>、次の方法でHTML要素のスタイルを設定します。

例

The WHO was founded in 1948.

<blockquote>

Bootstrapは<blockquote>、次の方法でHTML要素のスタイルを設定します。

例

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

右側に引用を表示するには、.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

<dl>

Bootstrapは<dl>、次の方法でHTML要素のスタイルを設定します。

例

Coffee: - black hot drink
Milk: - white cold drink

<コード>

Bootstrapは<code>、次の方法でHTML要素のスタイルを設定します。

例

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

<kbd>

Bootstrapは<kbd>、次の方法でHTML要素のスタイルを設定します。

例

Use ctrl + p to open the Print dialog box.

<pre>

Bootstrapは<pre>、次の方法でHTML要素のスタイルを設定します。

例

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.

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

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

テキストの色のクラスは次のとおりです.text-muted。、、、、、、、および：.text-primary.text-success.text-info.text-warning.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.

背景色のクラスは、、、、、、および：です.bg-primary。.bg-success.bg-info.bg-warning.bg-danger

例