目次

• このチュートリアルについて
  • 記法 / ソースコード
• Getting started (はじめに)
  • スタートアップ / 利用法 / コンテンツ / ブラウザ / JavaScript
  • カスタマイズ / ビルド / Webpack / アクセシビリティ
• レイアウト
  • 概要 / グリッド / レイアウトユーティリティ
• コンテント
  • Reboot / タイポグラフィ / コード
  • 画像
  • 表
  • 図
• コンポーネント
  • アラート / バッジ / パンくずリスト
  • ボタン / ボタングループ
  • カード
  • カルーセル / 折り畳み / ドロップダウン
  • フォーム
  • インプットグループ / ジャンボトロン
  • リストグループ
  • メディアオブジェクト / モーダル
  • ナビゲーション
  • ナビゲーションバー
  • ページネーション / ポップオーバー / プログレスバー
  • スクロールスパイ / スピナー / トースト / ツールチップ
• ユーティリティ
  • ボーダー / クリアフィックス / クローズアイコン
  • 色 / 表示 / 埋め込み
  • Flexbox / フロート / 画像置換
  • 配置 / スクリーンリーダ / シャドウ / サイズ / 空白
  • テキスト / 上下アライン / 可視性
• Extend / Migration / About

このチュートリアルについて

Bootstrap 4の自習用チュートリアルです。おおむね公式ドキュメントと同じ順に従っていますが読む順番は特にありません。どこからどのように読んでもけっこうです。

記法

本チュートリアルではHTMLの説明に独自の方法を用います。次のボタンツールバーを例に説明します。

これは次のHTMLで作られています。

<div class="btn-toolbar" role="toolbar" aria-label="Button toolbar">
  <div class="btn-group" role="group" aria-label="Group 1">
    <button class="btn btn-secondary" role="button">1</button>
    <button class="btn btn-secondary" role="button">2</button>
    <button class="btn btn-secondary" role="button">3</button>
  </div>
  <div class="btn-group ml-2" role="group" aria-label="Group 2">
    <button class="btn btn-secondary" role="button">A</button>
    <button class="btn btn-secondary" role="button">B</button>
  </div>
</div>

これを解説付きの多重リストで表現します。

• 次の 構造 ボタンで全体構造を入れ子のリストで表示します
  • その先の 属性 ボタンで要素の属性を展開表示します

構造 ⇐ ここをクリック

• ボタンツールバー div.btn-toolbar 属性
  • アクセシビリティ属性 role="toolbar"
  • アクセシビリティ属性 aria-label="Button toolbar"
  • (第1)ボタングループ div.btn-group 属性
    • アクセシビリティ属性 role="group"
    • アクセシビリティ属性 aria-label="Group 1"
    • ボタン button.btn (×3) 属性
      • ボタン色 .btn-secondary
      • アクセシビリティ属性 role="button"
      • テキスト 1, 2, 3
  • (第2)ボタングループ div.btn-group 属性
    • 左マージン .ml-2
    • アクセシビリティ属性 role="group"
    • アクセシビリティ属性 aria-label="Group 2"
    • ボタン button.btn (×2) 属性
      • ボタン色 .btn-secondary
      • アクセシビリティ属性 role="button"
      • テキスト A, B

記法のルールは次の通りです。

• 要素は先頭シンボルが黒丸(disc)、要素名は code 要素の書式(赤色)で表現
• クラス付きの要素はCSSドット記法を用いる (例: div.modal.fade )
• 要素の属性と子要素はリストをネストして子アイテムで表現
  • 追加クラスは先頭が白丸(circle)でCSSドット記法 .{クラス}
  • 属性は先頭が白丸(circle)でHTML属性の記法 {属性}="{値}"
  • テキストは先頭文字なし テキストコンテント
  • 子要素は親要素と同じ書式(先頭は黒丸)、以下子孫も同様

ソースコード

本サイトのマスターレポジトリはGitHubにあり、ホスティングにGitHub Pagesを用いて公開しています。チュートリアルのHTMLはPugで記述し、node.js/npm環境のWebpackでビルドしています。ソースコードはnode.js実行環境で次の手順でビルドできます。

• ZIPソースコードをダウンロードして解凍
• npm install でインストール
• npm run build でビルド (./site/* にファイルを生成)
• npm run start で開発サーバー起動 (⇒ http://localhost:6022/)

その他の開発用コマンドは package.json 中の scripts: エントリーを参照して下さい。