Bootstrap 4 tutorial

コンテント(1): Reboot / タイポグラフィ / コード

Reboot

Reboot(Bootstrap 4の新しいリセットCSS)の解説(略)。

タイポグラフィ

見出し

h1 , h2 , h3 , h4 , h5 , h6 の各要素は次のように表示される。

h1. Sample サンプル

h2. Sample サンプル

h3. Sample サンプル

h4. Sample サンプル

h5. Sample サンプル
h6. Sample サンプル

同じ表示を他の要素に適用する場合は .h(1|2|3|4|5|6) を用いる。次は span に使った場合の例。

span.h(1|2|3|4|5|6)

span.h1 span.h2 span.h3 span.h4 span.h5 span.h6

見出しのカスタマイズ

.text-muted (⇒ 文字色)を用いた例

Fancy display heading With faded secondary text

ディスプレイ用見出し

.display-(1|2|3|4) トップレベルのタイトル表示等に用いる(以下は h1 の設定例)

h1.display-1

h1.display-2

h1.display-3

h1.display-4

.display-(1|2|3|4) も任意要素に設定可。次は span への設定例.

span.display-4

リード

.lead を用いると通常よりも目立ちやすい表示に設定する。

.lead なしの場合: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

.lead ありの場合: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

インラインテキスト用の要素

mark の例 ⇒ You can use the mark tag to highlight text.

del の例 ⇒ This line of text is meant to be treated as deleted text.

s の例 ⇒ This line of text is meant to be treated as no longer accurate.

ins の例 ⇒ This line of text is meant to be treated as an addition to the document.

u の例 ⇒ This line of text will render as underlined

small の例 ⇒ This line of text is meant to be treated as fine print.

strong の例 ⇒ This line rendered as bold text.

em の例 ⇒ This line rendered as italicized text.

略語

abbr は略語に対して用いる要素で、点線の下線付きで表示される。

attr の例

attr

HTML

attr.initialism の例(若干小さくなる)

HTML

引用

blockquote は引用に対して用いる要素。例を示す。

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Someone famous in Source Title

アラインメント

.text-(left|center|right) を用いる(⇒ Textユーティリティ )

上と同じ構造の例: 中央、右揃え(デフォルトは左揃え)

.text-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Someone famous in Source Title

.text-right

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Someone famous in Source Title

リスト(ul, ol)

デフォルト書式の解除

ブラウザ既定の list-style のCSS設定を .list-unstyled で解除して通常テキストと同じように表示できる(左インデント、先頭シンボルともなし)。ただし設定レベルのみ有効でネストの内側に適用されない。次の例では外側の ul にのみ .list-unstyled を設定しており、ネストしたリストの要素(4,5行目)はリストのデフォルト書式で表示される。

インライン表示

.list-inline を用いて横一列に表示できる。

説明リストのレイアウト

説明リスト用の要素( dl , dt , dd )は grid を使ってレスポンシブにレイアウトできる。次の例は公式ドキュメントの例を少しだけ変えたもの(ブレークポイントをsmからmdに変更)。

説明リスト
説明リストは用語の詳細説明に用いる
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
.text-truncate を用いた用語項目
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
ネスト
ネストした説明リスト
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

コード

インラインコード

code を用いる

例 ⇒ Math.sqrt(a*a + b*b)

コードブロック

pre の内部で code を用いる

function determinant(a, b, c, d) {
  return a*d - b*c;
}

変数

var を用いる(斜体で表示)

例 ⇒ D = b2 - 4 a c

ユーザ入力

kbd を用いる

例 ⇒ npm install --save-dev bootstrap

サンプル出力

samp を用いる

例 ⇒ webpack: Compiled successfully.