Bootstrap4を実際に書き始めるまでの基礎をまとめました。
CDN
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
前提として、Bootstrapの要素はbody直下にcontainerクラスのdivで囲います。
marginとpadding
Bootstrapでは、クラスを用いてmarginとpaddingを表し、プロパティ 上下左右-サイズの型で記述します。(例: mt-4 , p-auto)
| プロパティ | 内容 | 上下左右 | 内容 | サイズ | 内容 |
|---|---|---|---|---|---|
| m | margin | t | top | 0 | 0 |
| p | padding | b | bottom | 1 | *0.25 |
| l | left | 2 | *0.5 | ||
| r | right | 3 | *1 | ||
| x | left,right | 4 | *1.5 | ||
| y | top,bottom | 5 | *3 | ||
| top,bottom,left,right | auto | auto |
グリッドシステム
Bootstrapでは、要素の横1行をrowクラスのdivタグで区切り、12等分した1列をカラムと呼びます。
カラムは、クラス名にcol-画面サイズ-サイズの型で記述します。(例: col-md－6 , col-10)
| 画面サイズ | 内容 | サイズ | 内容 |
|---|---|---|---|
| <540px | 1 | 1/12rem | |
| sm | 540px | 2 | 2/12rem |
| md | 720px | 3 | 3/12rem |
| lg | 960px | 4 | 4/12rem |
| xl | 1140px | ... | |
| offset | 余白 | 12 | 1rem |
参考文献
詳しい内容やコンポーネントは公式ドキュメントが参考になります↓ ↓
公式ドキュメント