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>
次のように要素を:
<abbr>
Bootstrap HTMLのスタイルになります<abbr>
次のように要素を:
<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.
»それを自分で試してみてください 右側の引用符を表示するには、使用.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.
»それを自分で試してみてください <dl>
Bootstrap HTMLのスタイルになります<dl>
次のように要素を:
<code>
Bootstrap HTMLのスタイルになります<code>
次のように要素を:
例
The following HTML elements: span
, section
, and div
defines a section in a document.
»それを自分で試してみてください <kbd>
Bootstrap HTMLのスタイルになります<kbd>
次のように要素を:
<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-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.
»それを自分で試してみてください もっとタイポグラフィクラス
以下のブートストラップクラスは、さらにスタイルの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ヘルパークラスリファレンスのコンテキストクラスの詳細については。