どうもBootstrap基本を覚えてないので、再度勉強。
現在のバージョンは2017年3月17日 v3.3.7
まずは基本のサイト構成
公式サイトの基本を書いて保存してみる。
デモ
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <h1>Hello, world!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
次に、グリッドの確認
@see https://techacademy.jp/magazine/6270
- Extra small / 画面幅 極小(544px未満)
- Small / 画面幅 小(544px以上 768px未満)
- Medium / 画面幅 中 (768px以上 992px未満)
- large / 画面幅 大 (992px以上 1200px未満)
- Extra large / 画面幅 特大 (1200px以上)
上記になってるとの事。
@See http://websae.net/twitter-bootstrap-grid-system-21060224/
種別 | Extra small | Small | Medium | Large |
---|---|---|---|---|
略称 | xs | sm | md | lg |
デバイス | スマートフォンなど | タブレット | 中型ディスプレイ | 大型ディスプレイ |
画面サイズ | 768px未満 | 768~991px | 992~1199px | 1200px以上 |
なるほど、
疑問?
画面幅を12で切ってるなら、全て1にしたら?
<div class="container-fluid"> <div class="row"> <div class="col-sm-1" style="background-color:red;">Red</div> <div class="col-sm-1" style="background-color:blue;">Blue</div> <div class="col-sm-1" style="background-color:yellow;">Yellow</div> <div class="col-sm-1" style="background-color:red;">Red</div> <div class="col-sm-1" style="background-color:blue;">Blue</div> <div class="col-sm-1" style="background-color:yellow;">Yellow</div> <div class="col-sm-1" style="background-color:red;">Red</div> <div class="col-sm-1" style="background-color:blue;">Blue</div> <div class="col-sm-1" style="background-color:yellow;">Yellow</div> <div class="col-sm-1" style="background-color:red;">Red</div> <div class="col-sm-1" style="background-color:blue;">Blue</div> <div class="col-sm-1" style="background-color:yellow;">Yellow</div> </div> </div>
1でそうなるのか?
このxs,sm,md,lg の使い方が分からないな。
col-デバイス-カラム数で分けるというのは分かるが、
visible-{prefix} や hidden-{prefix} で消えるというのかではテスト
X3設定したら消えるな……なんだこれは
◆「lg・md・sm・xs」というブレイクポイントの定義がある。
◆指定したブレイクポイント以下のサイズになると、とにかく1カラム縦積みになる。
◆「xs」だけ例外で、指定したカラム数のまま表示されつづける◆カラム分割は各カラムの数字が合計すると12になるよう指定する。
◆合計12を超えるとカラム落ちが発生する
これか……
何かサンプルのテンプレートが欲しいところだが、
つづく(´・ω・) ス
@https://medium.com/coiney-product-team/%E3%81%86%E3%82%8F%E3%81%A3-%E7%A7%81%E3%81%AE%E3%82%B5%E3%82%A4%E3%83%88bootstrap%E3%81%8F%E3%81%95%E3%81%99%E3%81%8E-%E3%81%9F%E3%81%A3%E3%81%9F%E6%95%B0%E6%96%87%E5%AD%97%E5%A4%89%E3%81%88%E3%82%8B%E3%81%A0%E3%81%91%E3%81%A7bootstrap%E3%81%AE%E3%81%8F%E3%81%95%E3%81%BF%E3%81%8C%E6%8A%9C%E3%81%91%E3%82%8B7%E3%81%A4%E3%81%AEcss%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF-6cd1c3b8410a