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 は略語に対して用いる要素で、点線の下線付きで表示される。

• abbr
  • 属性 title="{説明文}" で完全表現を記述(ホバーするとポップアップ表示)
  • クラス .initialism を用いると若干小さめに表示(イニシャル略語用)

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.

構造

• 引用 blockquote.blockquote
  • 文面 p.mb-1
    • テキスト Lorem ipsum ...
  • 引用ソース footer.blockquote-footer
    • テキスト Someone famous in
      • 引用名 cite 属性
        • 属性 title="Source Title"
        • テキスト 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.

.text-right

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

リスト(ul, ol)

デフォルト書式の解除

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

• Lorem ipsum dolor sit amet
• Consectetur adipiscing elit
• Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
• Ut enim ad minim veniam,
• Quis nostrud exercitation ullamco
• Laboris nisi ut aliquip ex ea commodo consequat.
• Duis aute irure dolor in

インライン表示

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

• Lorem ipsum
• Phasellus iaculis
• Nulla volutpat

説明リストのレイアウト

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

• 説明リスト dl.row
  • 説明する用語 dt.col-md-3 (≥mdで左3/12に配置)
    • テキストを切り詰める場合は .text-truncate を追加
  • 詳細説明 dd.col-md-9 (≥mdで右9/12に配置)
  • (オプション) ネストした説明リスト dl.row (内部は上記と同様)

説明リスト

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

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;
}

• pre.p-2.border.bg-light
  • code
    • function determinant(...

変数

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

例 ⇒ D = b² - 4 a c

ユーザ入力

kbd を用いる

例 ⇒ npm install --save-dev bootstrap

サンプル出力

samp を用いる

例 ⇒ webpack: Compiled successfully.