始めに
Bootstrapで扱う内容が初心者の私には難しかったので整理してみました
まずは単語の意味
| 単語 | 意味 |
|---|---|
| レイアウト | 物の配置・配列をすること。 |
| コンポーネント | 部品、成分、構成要素 |
| オプション | 一般には選択、選択権などを意味 |
| コンテナ | 入れ物、箱のこと |
| グリッド | 格子（状のもの）、方眼（状のもの）、送電網、配管網 |
| グリッドシステム | レイアウトを格子状に分解し配置するデザインする手法 |
| フレキシブル | 柔軟性があるさま |
| オブジェクト | 物体 |
| レスポンシブ | Webサイト表示を柔軟に調整し、見やすく最適な表示にすること |
| クラス | 同様のものの一まとまり |
| ブレークポイント | 端末の画面サイズによってデザインを切り替えるポイントのことコンピュータプログラムを実行する際に、開発者の指示で強制的に実行を一旦停止する箇所のこと。 |
| width | 幅 |
| fluid | 流体、流れる様に動く物体 |
公式ページを翻訳？してみる
概要(Overview)
レイアウトのコンポーネントやオプションには, コンテナ, グリッドシステム, フレキシブルオブジェクト, レスポンシブクラス が組み込まれています。
Bootstrapとは
情報の配置のための部品や、自分で好きなデザイン選ぶ方法として、物を入れる箱、柔軟に変形する箱、さまざまな端末に対応した表示ができる機能が備わっています。
Containers
コンテナは基本のレイアウトで, グリッドシステムを使用する場合に必要です。
・固定幅のコンテナ(ブレークポイントで max-width が変わる)
・全幅のコンテナ(常に100%の幅)
から選択できます。 コンテナは入れ子にすることができますが, 多くのレイアウトは入れ子のコンテナは必要としません。
Bootstrapのコンテナは下記の3種類が用意されています。
.container は各ブレークポイントで max-width を設定します。
.container-fluid はすべてのブレークポイントで width:100% となります。
.container-{breakpoint} は指定されたブレークポイントまで width：100％ となります。
コンテナ（箱）とは
配置においてコンテナ（箱）が基本要素となります。格子状の配置をするときに必要です。
・幅が固定された箱（端末サイズが切り替わったときには設定された最大幅に段階的に変化します）
・どのような画面サイズでも常に設定された最大幅で表示される箱
箱の中に箱の様な配置もできるが、する必要性はない。
Bootstrapのコンテナは下記の3種類の箱が用意されています。
・.箱：あらかじめ想定される表示画面に対しての最大表示幅を設定して使う箱
・.箱ー流体：表示画面に対応して常にあらかじめ指定された１００％幅になる
・箱ー表示画面の幅の切り替えポイント：指定された切り替えポイントまで最大幅で表示
画面サイズに対して、箱がどのように振る舞うのか参考資料がある