1からBootstrapを学ぶ│加藤電業社　色々と検証サイトですよ。

どうも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>

<!DOCTYPE html>

<head>

<title>Bootstrap 101 Template</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Hello, world!</h1>

</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以上

なるほど、
疑問？

画面幅を１２で切ってるなら、全て１にしたら？

<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>

<div class="col-sm-1" style="background-color:yellow;">Yellow</div>

<div class="col-sm-1" style="background-color:yellow;">Yellow</div>

<div class="col-sm-1" style="background-color:yellow;">Yellow</div>

<div class="col-sm-1" style="background-color:yellow;">Yellow</div>

</div>

デモ

１でそうなるのか？

このxs,sm,md,lg　の使い方が分からないな。

col-デバイス-カラム数で分けるというのは分かるが、
visible-{prefix} や hidden-{prefix} で消えるというのかではテスト

X３設定したら消えるな……なんだこれは

デモ５

◆「lg・md・sm・xs」というブレイクポイントの定義がある。
◆指定したブレイクポイント以下のサイズになると、とにかく１カラム縦積みになる。
◆「xs」だけ例外で、指定したカラム数のまま表示されつづける

◆カラム分割は各カラムの数字が合計すると１２になるよう指定する。
◆合計１２を超えるとカラム落ちが発生する

@See http://tonari-it.com/bootstrap-column/

これか……
何かサンプルのテンプレートが欲しいところだが、

つづく(´・ω・) ｽ

@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