Bootstrap 4 tutorial

目次

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

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>

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

⇐ ここをクリック

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

ソースコード

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

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