Bootstrap Frameworkについて学んだことまとめ

目次

1. Bootstrap Frameworkとは
2. Bootstrap Frameworkを理解する

今回の学習のゴール

• Bootstrap Frameworkとは何か、何ができるかを知る
• 実際の使い方について知る

1. Bootstrap Frameworkとは

• Twitter社が開発したCSSのフレームワーク
• よく使用されるスタイルがあらかじめ定義されているため整ったデザインのページを効率的に作成することができる
• 特徴
  • グリッドシステムの採用
  • レスポンシブ対応
  • 豊富なコンポーネント

2. Bootstrap Frameworkを理解する

グリッドシステム

• グリッドとは、サイトの横幅を均等に分けるガイドラインのことで、Bootstrapではサイトの横幅を12分割してデザインを行う
• グリッドシステムとは、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法のこと
• container, row, colの3つのclassを使ってレイアウトを行う

http://websae.net/twitter-bootstrap-grid-system-21060224/

• container
  • 固定幅のコンテナか全幅のコンテナ(常に100%の幅)から選択できる
  • 固定幅のコンテナの場合は、ブレイクポイントを指定する

サイズ	画面幅	container幅
lg	1200px以上	1170p
md	992px以上、1200px未満	970px
sm	768px以上、992px未満	750px
xs	768px未満	auto

• row
  • 行に適用するclass
  • コンテナを水平に分割して上から下へ積み重ねられる
• col
  • column（カラム）のこと
  • 全体を12カラムに分割し、何カラム分の幅にするのかをcolクラスで指定する

https://getbootstrap.com/docs/3.4/css/

example

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

ユーティリティ

• 配色やボーダー線など各種CSS設定のプリセットのこと
  • 配色
    • 意味合いを色で伝えることができる
    • Colors · Bootstrapで詳細を確認できる
  • ボーダー線
    • borderクラスやborder-radiusクラスを適用すると枠線を適用できる

example

<span class="border">...</span>    <!-- 四面全てに線 -->
<span class="border-top">...</span>    <!-- 上部に線 -->
<span class="border border-primary">...</span>    <!-- primaryの色の線 -->
<img src="..." alt="..." class="rounded">    <!-- 画像の角を全て丸くする -->

コンポーネント

• ボタンやカードなど多様なコンポーネント（パーツ）が用意されているので、コンポーネントを画面上に配置すれば簡単にレイアウトを作成することができる

ex. アラートメッセージ

<div class="alert alert-primary" role="alert">
  アラートメッセージ
</div>

ex. ボタン

<button type="button" class="btn btn-success">ボタン</button>

• 詳細
  • コンポーネント · Bootstrap

参照

• はじめに - Bootstrap 4.3 - 日本語リファレンス