f:id:jun1221:20190412215220p:plain

f:id:jun1221:20190504223048p:plain:w150:left

Bootstrapを勉強するのは大変？
簡単に勉強するには？

この様な疑問にお答えします。

やること（結論）

サンプルコードをひたすら書いてみても、作成したいレイアウトを学ぶことはできません。ではどうするか？Bootstrapで作られているサイトを見て・カスタマイズして・どんな動きになるか理解を深めましょう！

Bootstrapのサンプルを表示させよう！

Bootstrap 4ではサンプルを用意しており、無料で利用できます。

Examples · Bootstrap

f:id:jun1221:20190504224137p:plain

色々なレイアウトのページがあるので、確認してみましょう。
今回は「Album」というサンプルのソースを見てみましょう！「Album」をクリックしてください。 f:id:jun1221:20190504224519p:plain

そうすると、「Album」画面に遷移します。その上で右クリックするとメニューが表示されるので、「ページのソースを表示」をクリックしてください。 f:id:jun1221:20190504224005p:plain

すると、ソースコードが表示されます。 f:id:jun1221:20190504224823p:plain

これを適当に「index.html」ファイルを作成してソースを全て張り付けると同じ画面が表示できる！と思いきやできません。。。CSSとJSの一部が相対パスでファイルを指定しているためです。

効率よく（面倒なので）BootstrapCDNを使用して表示しましょう！

14行目

<link href="/docs/4.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

を以下に変更します。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

238行目

<script src="/docs/4.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-xrRywqdh3PHs8keKZN+8zzc5TX0GRTLCcmivcbNJWm2rs5C8PRhcEn3czEjhAO9o" crossorigin="anonymous"></script>

を以下に変更します。

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>