【1】セットアップ
では、まずはセットアップからね。
techacademy.jp
Compiled CSS and JSを、ダウンロード！
https://getbootstrap.com/docs/4.5/getting-started/download/
jqueryもダウンロードだ！
https://jquery.com/
ちなみに、注意点です。
ここで重要なのは、BootstrapのJavaScriptよりも、jQueryを先に読み込むということです。そうしなければ、BootstrapのJavaScriptを使う動きが動作しないのでご注意ください。
ところで、minって、何？
Bootstrap.min.css の .min って何よ？ | piroblog
改行もインデントもなくて 読みにくいファイルなだけで、同じなんですね。
ダブルクォーテーションとシングルクォーテーションは、どちらでも良いけど、
htmlのときはダブルクォーテーションが多いみたいですね。
JavaScriptのシングルクォーテーションとダブルクォーテーション - Qiita
ちなみに、javascriptにはテンプレートリテラルに使うバッククォートというものもある。
JSでバッククォート？テンプレートリテラル完全攻略 | Webクリエイターのアトリエ
Viewportって、何だ？
もう逃げない。HTMLのviewportをちゃんと理解する - Qiita
まぁ、次で良いかな。
<meta name="viewport" content="width=device-width,initial-scale=1">
【2】container
まずは、コンテナだ。
Bootstrapのグリッドを理解する【図解たっぷりBootstrap入門】 | Skillhub[スキルハブ]
<body>
<div class="container">
<h1>Hello, world!</h1>
<button type="button" class="btn btn-primary">Primary</button>
</div>
</body>【3】col
Bootstrapのブレークポイントを理解して実装する【図解たっぷりBootstrap入門】 | Skillhub[スキルハブ]
<div class="col-md-6 col-lg-3 px-0">
横幅を12分割と考えて、
コンテナがlg(large)より大きければ幅3、
コンテナがmd(lmedium)より大きければ幅6、
そうでなければ幅12、ということです。
【4】コンポーネント
ここから探せば良いっぽい。
https://getbootstrap.com/docs/4.5/components/alerts/
使い方の説明は、こちら。
https://skillhub.jp/courses/168/lessons/931
【5】マージンとパディング
マージンが外余白、パディングが内余白です。
https://design-studio-f.com/blog/bootstrap-utilities-spacing/
【6】スクロール
[Rails]bootstrapを使っているサービスでCSSで画面の一部をスクロールさせる - CPX
ムリヤリhtmlの中に書くのであれば・・・
<div class="col-xs-6 col-sm-8 col-lg-8" style="overflow-y: auto; height: 95vh;">
・・・という感じかな。
bootstrapのclass="overflow-auto"をそのまま使うと、横スクロールが自動で入ってしまうので、上記の方法にしました。
【7】iPhone縦でも2列表示にしたい
rowの指定で工夫をします。
<div class="row row-cols-2 bg-light">
