TechAcademy学習記録 Bootstrap編

#TechAcademy Bootstrap編

この記事はTechAcademyの学習メモBootstrap編です。
メインページはこちら。

##標準雛形
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の互換モードを防ぐための記述

2行目はViewpointという仮想ウインドウの設定、レスポンシブデザインのために必要らしい。いったん魔法の言葉として覚えておく。
もう逃げない。HTMLのviewportをちゃんと理解する
たぶん、ほとんどの人は viewport meta タグの指定をまちがえてる

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

##グリッドシステム
公式ドキュメントを読めばだいたいわかる。
ただレスポンシブにするための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）

##containerとcontainer-fluid
イマイチ使い分けがわからなかったので質問で投げてみる。
ググった感じだと固定レイアウトと流動レイアウトの違いらしい
サンプルで学ぶTwitter Bootstrapの使い方
Container-fluid vs .container

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

Bootstrap3.3.5のグリッドシステムの使い方

##テーブル
これも公式ドキュメント見れば大丈夫。
忘れやすいこととして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 おさらい

##css内の@media
bootstrapの話ではないがサンプルコードに出てくるので
レスポンシブウェブデザインのメディアクエリのオススメの書き方

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