Bootstrapの説明とよく使う機能まとめ

今日は体調が悪くなってしまったので、Bootstrapのまとめのみ。
体調を早く治し明日からまた勉強がんばります！

Bootstrapとは

Bootstrapとは、Twitter社が開発したCSSのフレームワーク。
よく使うスタイルがあらかじめ作られているので、初心者にも扱いやすく、整ったデザインのページを効率的に作成できる。

メリット

1. あらかじめ設計されたスタイルを使用するので、使用が簡単。
2. レスポンシブデザインに対応しているので、異なるデバイスや画面サイズに適応するウェブサイトを簡単に作成できる。
3. グリッドシステムにより、画面の幅に応じて列の幅を調整できるので、レイアウト作成が容易。
4. 多くのUIコンポーネントがあるので、ボタン、フォーム、ナビゲーションバーなど、一貫性のあるデザインを簡単に作成できる。

デメリット

1. デザインが決まっているので、個性を出すことが難しく差別化が難しい。
2. 独自のデザインにしたい場合は、Bootstrapのデザインとのバランスを合わせることが難しい。
3. 多くのCSSやJavaScriptのファイルが含まれるため、ダウンロードサイズが大きくなり、パフォーマンス（速度）が遅くなる可能性がある。

グリッドシステム

12列のグリッドを活用してレイアウトできる仕組みがグリッドシステム。
このシステムを使うことにより、レイアウトやレスポンシブページも効率的に作成できる。

基本要素は、「.container」、「.row」、および「.col-*」を使用する。

.container

ページ全体のコンテンツを包むために使用されるクラス。containerは画面の中央に配置され、幅が自動的に調整される。
以下のように指定する。

html

<div class="container">
  <!-- グリッドのコンテンツを配置する -->
</div>

.row

rowは行（row）を作成するためのクラス。
container内に配置をし、コンテンツを水平方向に配置し、列（col）を包み込むコンテナとして機能する。
以下のように指定する。

html

<div class="container">
  <div class="row">
    <!-- カラムを配置する -->
  </div>
</div>

.col-*

グリッド内のカラムを表す要素。カラムの幅は12列の中で指定する。
colクラスの指定方法は、col-{サイズ}-{カラム数}の形式。例えば、col-md-6は、中サイズ以上の画面（mdサイズ）で6つのカラム幅を持つ列を定義している。
例えば以下のように指定する。

html

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <p>This is column 1.</p>
    </div>
    <div class="col-md-6">
      <p>This is column 2.</p>
    </div>
  </div>
</div>

上記のコードでは、containerクラスでコンテンツを包み込む。そして、その中にrowクラスで行を作成し、2つの列（col-md-6）を配置する。各列は中サイズ以上の画面で半分の幅を占める。

このようにしてcontainer、row、colを組み合わせることで、グリッドベースのレイアウトを簡単に作成することができる。

よく使われる便利なクラス

Bootstrapの便利なクラスを表でまとめてみた。

クラス	説明	使用例	使用シーンの具体例
mx-auto	水平方向に要素を中央に配置	<div class="mx-auto">...</div>	フォームやイメージを中央に配置するとき
my-auto	垂直方向に要素を中央に配置	<div class="my-auto">...</div>	モーダルウィンドウやアラートを垂直方向に中央に配置するとき
mt-auto	上部に余白を設定し、要素をコンテナの上端に寄せる	<div class="mt-auto">...</div>	ページのフッターを下端に固定するとき
mb-auto	下部に余白を設定し、要素をコンテナの下端に寄せる	<div class="mb-auto">...</div>	ページのヘッダーを上端に固定するとき
ml-auto	左側に余白を設定し、要素をコンテナの左端に寄せる	<div class="ml-auto">...</div>	ナビゲーションバーを右寄せにするとき
mr-auto	右側に余白を設定し、要素をコンテナの右端に寄せる	<div class="mr-auto">...</div>	ロゴやメニューを左寄せにするとき
text-center	テキストを水平方向に中央に配置	<p class="text-center">...</p>	タイトルや見出しを中央に配置するとき
text-left	テキストを左端に配置	<p class="text-left">...</p>	ブログ記事や本文を左寄せにするとき
text-right	テキストを右端に配置	<p class="text-right">...</p>	右寄せのキャプションや引用を表示するとき
d-flex	フレックスボックスを使用して要素を横並びに配置	<div class="d-flex">...</div>	ナビゲーションメニューやボタングループを横並びに配置するとき
justify-content-center	フレックスボックス内の要素を水平方向に中央に配置	<div class="d-flex justify-content-center">...</div>	グリッドや画像を水平方向に中央に配置するとき
align-items-center	フレックスボックス内の要素を垂直方向に中央に配置	<div class="d-flex align-items-center">...</div>	カードやアイコンを垂直方向に中央に配置するとき
collapse	要素を初めから非表示にする	<div class="collapse">...</div>	アコーディオンメニューや折りたたみコンテンツを実装するとき

---

bootstrapを実装する際に参考にしたサイト

• 公式サイト

• よく使うクラスが一覧になったサイト