TechAcademy学習記録 Bootstrap編

#TechAcademy Bootstrap編

この記事はTechAcademyの学習メモBootstrap編です。
メインページは[こちら](http://qiita.com/sutatin/items/c8c52ad6190622a37c0e)。

##標準雛形
jqueryやbootstrapがCDNなどで使えるテンプレートHTMLは、すぐに雛形として使えるようにしておくと便利だと実感した。とりあえずevernoteに保存。

##meta情報

```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
```
1行目は[IEの互換モードを防ぐための記述](http://qiita.com/rico/items/09c896290e218ed2b7c3)

2行目はViewpointという仮想ウインドウの設定、レスポンシブデザインのために必要らしい。いったん魔法の言葉として覚えておく。
[もう逃げない。HTMLのviewportをちゃんと理解する](http://qiita.com/ryounagaoka/items/045b2808a5ed43f96607)
[たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる](http://blog.ousaan.com/index.cgi/links/20130925.html)

また上記のmeta情報はスタイルシートやスクリプトタグなどより前に書かないと効果を発揮しない。

##グリッドシステム
[公式ドキュメント](http://getbootstrap.com/css/#grid)を読めばだいたいわかる。
ただレスポンシブにするためのprefixの使い方だけちょっと分かりづらかった。
要するにclass要素なので下みたいにそれぞれのprefixに従ってグリッドを設定できるよという事。
その時のウインドウサイズに応じて適したprefixのスタイルを選択してくれる。まさにレスポンシブ！

```
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-10 col-xs-1" style="background-color:red;">Red</div>
        <div class="col-lg-1 col-xs-1" style="background-color:blue;">Blue</div>
        <div class="col-lg-1 col-xs-10" style="background-color:yellow;">Yellow</div>
      </div>
    </div>
```

###col-lg-offset-xx
xx個分空白を入れる。この空白というのはグリッドシステムの個数分。（だから最大11になる）
[Bootstrap使い方メモ１（基本＋CSS）](https://techacademy-sutatin.c9users.io/bootcamp-sample.html)

##containerとcontainer-fluid
イマイチ使い分けがわからなかったので質問で投げてみる。
ググった感じだと固定レイアウトと流動レイアウトの違いらしい
[サンプルで学ぶTwitter Bootstrapの使い方](http://ascii.jp/elem/000/000/807/807712/index-3.html)
[Container-fluid vs .container](http://stackoverflow.com/questions/22262311/container-fluid-vs-container)

回答：768px以下では特に変化がなく、containerは段階的(指定されたサイズごとに変化)、container-fluidは流動的(リアルタイム)でサイズが変化するとのこと。
containerはガウス記号表記だと考えると個人的にはわかりやすかった。

[Bootstrap3.3.5のグリッドシステムの使い方](http://wordpresscollege.org/bootstrap/bootstrap3-gridsystem/)

##テーブル
これも[公式ドキュメント](http://getbootstrap.com/css/#tables)見れば大丈夫。
忘れやすいこととしてclass=”container”の中で使わないといけない。

あとbootstrapの話ではないが、タブの入れ子を追加するときの最短手順を知りたい。いつもインデント合わせとかで時間がかかるので…。

```
<div class="container">
  <table class="table table-bordered">
    ...
  </table>
</div>
↓
<div class="container">
  <div class="table-responsive">
    <table class="table table-bordered">
    ...
    </table>
  </div>
</div>
```

##フォーム
Bootstrapとフォームの組み合わせは地味に色々と工夫が必要なようだ。
わからないことが出てきた時はHTMLなのかbootstrapなのかをまず区別しよう。
混ざったまま理解しようとしたので初めは混乱した。
基本的にclass要素がbootstrapの話で、その他の属性はhtmlの話である。



入力欄をラベルの右に表示する（＝水平に並べる）場合は下記のようになる。

ポイントは下記
・formタグ属性で囲む、この時水平表示のためにclass="form-horizontal"を付与
・formタグの下の各入力欄のdivごとにclass=”form-group”を付与
・labelと入力欄はグリッドシステムで左右のバランス制御
・inputタグにはclass=”form-control”を付与


```
<form class="form-horizontal">
	<div class="form-group">
		<label for="inputEmail" class="col-sm-2 control-label">Email</label>
		<div class="col-sm-10">
			<input type="email" class="form-control" id="inputEmail" placeholder="ここにメールアドレスを入れてね">
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-10">
			<button type="submit" class="btn btn-default">サブミット！</button>
		</div>
	</div>
</form>
```

あとこの記事がめっちゃ役立つ
[Bootstrap Form おさらい](http://qiita.com/zaburo/items/8983993d173c51cb3827)

##css内の@media
bootstrapの話ではないがサンプルコードに出てくるので
[レスポンシブウェブデザインのメディアクエリのオススメの書き方](http://mamewaza.com/support/blog/20150501.html)

gridシステムとの使い分けは
gridシステムは配置をレスポンシブ化させるが
@mediaはCSS要素をレスポンシブ化させる。
例えばタブレットの時だけ文字サイズを大きくするときとか