最新のWeb開発のチュートリアル
 

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


Bootstrap'sデフォルト設定

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

これは、に適用される<body>とすべての段落。

また、すべての<p>要素は、(デフォルトでは10pxの)半分の彼らの計算された行の高さに等しい下マージンを持っています。


Bootstrap対ブラウザのデフォルト

この章では、我々はによって少し違ったスタイルのことであろういくつかのHTML要素を見ていきますBootstrapのブラウザのデフォルト値よりも。


<h1> - <h6>

デフォルトでは、ブートストラップは、(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)
»それを自分で試してみてください

<small>

ブートストラップでは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
»それを自分で試してみてください

<mark>

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

Use the mark element to highlight text.

»それを自分で試してみてください

<abbr>

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

The WHO was founded in 1948.

»それを自分で試してみてください

<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
»それを自分で試してみてください

右側の引用符を表示するには、使用.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 HTMLのスタイルになります<dl>次のように要素を:

Coffee
- black hot drink
Milk
- white cold drink
»それを自分で試してみてください

<code>

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

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

»それを自分で試してみてください

<kbd>

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

Use ctrl + p to open the Print dialog box.

»それを自分で試してみてください

<pre>

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

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-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.

»それを自分で試してみてください

もっとタイポグラフィクラス

以下のブートストラップクラスは、さらにスタイルのHTML要素に追加することができます。

クラス 説明
.lead 段落が目立ちます それを試してみてください
.small (親のサイズの85%に設定)小さいテキストを示します それを試してみてください
.text-left 左揃えのテキストを表示します それを試してみてください
.text-center 中央揃えのテキストを表示します それを試してみてください
.text-right 右揃えのテキストを表示します それを試してみてください
.text-justify 揃えテキストを表示します それを試してみてください
.text-nowrap 何のラップテキストを表示しません それを試してみてください
.text-lowercase 小文字のテキストを示します それを試してみてください
.text-uppercase 大文字のテキストを示します それを試してみてください
.text-capitalize 大文字のテキストを表示します それを試してみてください
.initialism 内のテキストを表示します<abbr>若干小さいフォントサイズの要素 それを試してみてください
.list-unstyled リスト項目のデフォルトのリストスタイルと左マージンを削除します(両方で動作し<ul><ol> このクラスでは唯一の(、任意のネストされたリストからデフォルトのリストスタイルを削除するだけでなく、任意のネストされたリストにこのクラスを適用するために)直接の子リストのアイテムに適用されます それを試してみてください
.list-inline 単一ライン上の場所のすべてのリスト項目を それを試してみてください
.dl-horizontal ラインアップの用語( <dt>と説明( <dd>内) <dl>要素のサイド・バイ・サイド。 デフォルトのようにオフに開始する<dl>のが、ブラウザのウィンドウが拡大したとき、それはサイド・バイ・サイドをラインアップします それを試してみてください
.pre-scrollable 作り<pre>要素のスクロール可能 それを試してみてください

完了してBootstrapタイポグラフィリファレンス

すべてのタイポグラフィ要素/クラスの完全なリファレンスについては、当社の完全に行くBootstrapタイポグラフィリファレンス

また、私たちを見てBootstrapヘルパークラスリファレンスのコンテキストクラスの詳細については。