Bootstrap まとめ（自分用）

Mobile first

モバイルファースト。

<meta name="viewport" content="width=device-width, initial-scale=1">

レンダリングとタッチのズームを適切に行う

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

モバイルデバイスのズーム機能を無効にすることができる。ただ、Bootstrapはこれを推奨していない。

Containers

.containerは固定幅。.container-fluidはビューポート幅全体。

<div class="container">
</div>

<div class="container-fluid">
</div>

Media queries

ちょっと考える。モバイルファーストの書き方にしておきたい。
768px以下とそれ以外という別けかたのみでいいきがしてる。

media-query.css

@media screen and (min-width:769px) {
}

@media screen and (max-width:768px) {
}

aaa

aaa

Column

aaa

aaa

Columnの順番

.col-md-pull-*
.col-md-push-*

Columnのみ。以下のようなケースは使えない。

.col-md-12.col-md-pull-12
.col-md-12.col-md-push-12

見出し

aaa

aaa

aaa

見出し

aaa

aaa

aaa

見出し

aaa

aaa

aaa