目次
①Bootstrapとは
②Bootstrapを使うには？
③Bootstrapの考え方
①Bootstrapとは
BootstrapはHTML／CSS／JavaScriptから構成される最も有名なWEBフレームワークのこと。
②Bootstrapを使うには？
https://getbootstrap.com/docs/4.3/getting-started/introduction/
上記を参考にして使う。starter templateを利用してすぐに使うことができる。
③Bootstrapの考え方
bootstrapには「グリッドシステム」という考え方がある。
グリッドシステムはwebサイトの横幅を12個に均等に分けて、PC、スマートフォン、タブレットといったどんな端末においても最適な表示をしてくれる仕組みのこと。
コンテナとローとカラムという考え方がある。
コンテナは、グリッドシステムの外枠のクラスのことで、「ロー」、「カラム」と言う子クラスを持っています。まずはコンテナについて説明をする。
・コンテナについて。
コンテナは以下の表なサイズをもっているので、大きさを調節するときは画面幅に書かれているクラス名をかくことで指定ができる。
| 名称 | ブラウザ幅 | コンテナ幅 |
|---|---|---|
| Extra small | 極小（544px未満） | 基本コンテナ幅:auto(画面いっぱいに広がる) |
| Small | 小（544px以上 768px未満） | 基本コンテナ幅:576px |
| Medium | 中（768px以上 992px未満） | 基本コンテナ幅:720px |
| large | 大（992px以上 1200px未満） | 基本コンテナ幅:940px |
| Extra large | 特大 （1200px以上） | 基本コンテナ幅:1140px |
| container-fluid | ウインドウ幅いっぱいに広がる。 | サイズを狭くしたり、広げる事で流動的に変化 |
・ローについて
ローは行に与えるクラスで、コンテナを水平に分割して上から下へ並べることができる。
ローの中にカラムも含まれている。
・カラムについて
カラムはローを縦に割り、左から右へ並べて表示をする。
12個のグリッドがあるので、カラムの合計が最大で「12」になるように数字を割り振る形になる。
| 名称 | ブラウザ幅 |
|---|---|
| Extra small | 極小（544px未満） |
| Small | 小（544px以上 768px未満 |
| Medium | 中（768px以上 992px未満 |
| large | 大（992px以上 1200px未満 |
| Extra large | 特大 （1200px以上） |