Bootstrapのメモ書き。
とりあえずBootstrapの基本的なことについてだけ。
汎用的に使えるクラス名の紹介とかはなし。
グリッドシステム
グリッドシステムとは、
webページ全体を12列に分けて構成するシステム。
グリッドシステムを使う範囲は、
その範囲をcontainer、またはcontainer-fluidのクラスで囲む。
<body>
<div class=“container”>
ここにグリッドシステムで記入
</div>
</body>
class=“container”
一定のウィンドウの幅ごとに、表示される内部の幅（固定）が決まっている。
class=“container-fluid”
ウィンドウの幅と、内部の幅が常に連動する
グリッドシステム：列に関して
class=“col-xs-N”（Nが数字）のようにclass名の一部を使って列数を指定することで、
要素の横幅を指定できる。はみ出した分（12列を超えた場合）は、次の行に送られる。
グリッドシステム：行に関して
行のコンテナのdiv要素などに、class=“raw”のclassを指定して、行であることを指定する。
これはなくても書けるが、書いた方がよい。
グリッドシステムはネストも可能
グリッドの列の中にまたグリッドを埋め込むことも可能。
その場合、入れ子にしたグリッドも合計12列になるようにグリッドを組む点に注意。
グリッドシステム関連のクラスの一部
class=“col-xs-offset-N”
入力した数字の列分、感覚を開ける
class=“col-xs-pull-N”
入力した数字の列分、左にずらす
class=“col-xs-pull-N”
入力した数字の列分、右にずらす
レスポンシブクラス名対応表
大きい画面用のクラス名ほど優先度が高い。
| 画面幅 | 0px～ | 768px～ | 992px～ | 1200px～ |
|---|---|---|---|---|
| クラス | col-xs-N | col-sm-N | col-md-N | col-lg-N |
| ケース | スマフォ | タブレット | PC | PC大 |
要素の表示/非表示
class=“hidden-○○”
画面が指定した大きさの場合、要素を非表示にする
class=“visible-○○”
画面が指定した大きさの場合、要素を表示する
コメントを残す