Bootstrapとレイアウト構築

1.Bootstrapとは

Webサイトやアプリのフロントエンド開発を高速化する、世界的に有名なCSS・JSフレームワークのことを指す。 レスポンシブデザイン（スマホ対応）のボタン、フォーム、レイアウトなどの部品があらかじめ用意されており、HTMLにクラス名を追加するだけでWebを構築することが可能

2.colとrowを使った基本構築

Bootstrapにはカラムシステムが備わっている。 これの考え方は横を１２等分されていて、そこからいくつかとって構築するという考え方である 図式化すると以下のようになる。

12
col-4				col4				col-4
col-3			col-3			col-3			col-3

さらにCol-○の中からさらに１２等分して細分化することもできる

Col-4
col-4				col4				col-4

実際のホームページ

3.背景色の変更

Bootstrapで背景色を変更する場合、従来のhtml/cssとは違い、htmlに直接クラスを付与することで変更するkとができる。 例えば青色の場合、

<div class=col-3 bg-primary>...........</div>

のように記述することで背景色を変更することができる。

4.レスポンシブ対応した画像の挿入

コラムクラスを入れたdivタグにimg-fluidクラスを入れたimgタグを入れるとレスポンシブ対応した画像を挿入することができる。 レスポンシブ対応をさせることで画像サイズが横幅に合わせてスケールするようになる。

5.マージンについて

マージンとは要素の外側に透明な余白を作成し、要素同士の距離を調整するプロパティのことを指す。 Bootstrapにおいてはタグの中に以下のクラスを付与する

クラス名	マージンが追加される場所
mt-○	上
mb-○	下
ms-○	右
me-○	左