Bootstrap 3.1 フォームとナビゲーションを考える。


目的：Bootstrap 3.1 でのフォームを紐解いていき、最終的にナビゲーションバーのコードを理解できるようにする。

注意： emmetごり押し

参考：http://bootstrap.s1.adexd.net/


Bootstrapで誰でも使える簡単なパーツ
-----------
Bootstrapでインライン要素が単純に進化してるこいつら

~~~
span.label.label-primary
span.badge
span.alert.alert-primary
XXXX.btn.btn-primary
~~~

「-primary」はスタイルなので、おまけにすぎない。
これらは簡単なのに便利。alertは.alert-dismissableの使い方はスルーしておいて、、
XXXX には今のところa, button, input:submitといったインライン or インラインブロック要素で確認。

ちなみにボタンに関して

~~~emmet
.btn-group>button*1
~~~

ボタンはスタイルが当てられて繋がる。
つまりbuttonを持つbutton上位クラスがある。さらに

~~~emmet
.btn-toolbar>.btn-group*1
~~~

つまり.btn-groupをさらにまとめる.btn-group上位クラスもある。


Bootstrapの ul > li ナビの基本
-----------
> ul.nav>li*1 # 列挙可

ナビ基本式。さて、この左辺は異常によく出てくるのでこれを「N」とおく。
Nはul要素とは違う、新ul要素として考えると楽。
またnavもよく出てくるのでこれを「B」とおく。

~~~
def
	B=nav
	N=ul.nav
end
~~~

よって

~~~
ul.nav>li*1
= ul.B>li*1
= N>li*1 # !!
~~~

Nを意味通り新しいulと捉え自然な式と捉えていく。
次に、ul>liナビの派生に、タブズナビ、ピルズナビ、ピルズ積み上げナビ、ピルズ均等ナビがある。見た目はともかく、基本式は順に

~~~
ul.nav.nav-tabs>li*1
ul.nav.nav-pills>li*1
ul.nav.nav-pills.nav-stacked>li*1
ul.nav.nav-pills.nav-justified>li*1
~~~

となっている。
ここでtabsを「T」とおく。pillsを「P」とおく。

~~~
def
	T=tabs
	P=pills
end
~~~

よって上の４式は

~~~
N.B-T>li*1
N.B-P>li*1
N.B-P.B-stacked>li*1
N.B-P.B-justified>li*1
~~~

１行目はN要素のメソッドでnavからtabsに適応させていると読めなくもない。Nがnavオブジェクトを持っているかのように！
２〜４行目もそういう意味で楽に分かる、覚えれそうな形になった。

これまでがul.navに関わる説明

よりダイナミックなBootstrapの表現
-----------
先ほどのインライン拡張とは違って、Bootstrapは入れ子構造を用いて、ダイナミックな表現を提供してくれている。
以下のようなものがある。

~~~emmet
.panel.panel-primary>.panel-heading+.panel-body
ul.list-group>li.list-group-item.list-group-item-primary
div.list-group>a.list-group-item.list-group-item-primary
.progress>.progress-bar.progress-primary
~~~

長い、長い。
ただ、まだ意味は読み取れるし、すっとわかる感じがある。
どれがウインドウを用意して、どれがレイアウトを用意して、どれがスタイルを用意しているかで分類すれば、なんとなくわかる。


Bootstrapの優秀なナビゲーション
-----------
これからあるナビバーのコード構成を考える。

下にはナビゲーションバーのうちのひとつで、レスポンスデザインに対応するために、ナビゲーションの構成が入れ替わる機能をもつナビバーのemmetの改変コードを示した。
ナビゲーションの中身は、タイトルと、ページ一覧と、検索窓がついている。

~~~emmet
.navbar.navbar-primary>
	.navbar-header>
		button.navbar-toggle[data-toggle=collapse data-target=.navbar-collapse]>
			span.icon-bar*3
		^a.navbar-brand[href=#]{見出し}
	^.navbar-collapse.collapse>
		ul.navbar-nav.nav>(li>a[href=#]{$})*3
		^^form.navbar-form.navbar-left>
			.form-group>input:text.form-control[placeholder=検索ワード]
						+.button:submit.btn.btn-primary{検索}
~~~

コピペにしたいのにロジックが分からない。
Emmet表記だからでもない。navbarが気持ち悪い。
navbarを「A」と置いて基本から考えてみる。


.navbar
---------

.navbarについて知っていることを話そう。
簡単のためにnavbarをAと置く。

~~~
def
	A=navbar
	B=nav
end
~~~


さて、.Aの配下に
ul か form か button か p といったものを置く場合はこうなるらしい。

~~~
.A>ul.A-B.B>(li*a)*1
.A>form.A-form.A-left>.form-group>input:text
.A>button.A-btn.btn.btn-primary
.A>p.A-text
~~~

この表現に慣れないだろうか。

１行目はnavbarからnavへA-Bがかませている。Bが使えるようになる結果、先ほど語ったN要素と一致する。
２行目はこれもnavbarからformのかませだ。A-leftはセレクタブルな左寄せレイアウト。form>.form-groupはパターン。
３行目はこれもnavbarからbtnへのかませだ。他はインライン拡張だった。
４行目はpというテキストにかませている。

とわからなくもない。
よって、上の関係をなしている.Aの小要素を
■■■Aに列挙される要素■■■
とする。
.A>■■■Aに列挙される要素■■■、を満たせばナビゲーションバーはひとまず動くのだ。
では先ほどのコードは何が複雑なのか。
ナビゲーションのコードはこう書き変わる。

~~~
.A.A-primary>
	.A-header>
		button.A-toggle[data-toggle=collapse data-target=.A-collapse]>
			span.icon-bar*3
		^a.A-brand[href=#]{見出し}
	^.A-collapse.collapse>
		■■■Aに列挙される要素■■■
~~~

■■■Aに列挙される要素■■■は.Aの直下にはない。間にかまされているものがある。collapseだ。
collapseを「C」と置くと

.A>.A-C.C>■■■Aに列挙される要素■■■

「>A-C.C>」これはよく見たかませの形をしている。
かましてあるcollapseは■■■Aに列挙される要素■■■には存在しない。
このなくてもいいdivはレスポンスデザインのためにかまされているようだ。

A-headerのbuttonの属性が６行目の要素を指してあることが分かる。(.collapse .A-collapse)
これはレスポンシブルデザインに応じて、変形が行なわれたときに６行目を参照しボタンの表示を切り替えるといったもののようだ。（.A-toggle）
■■■Aに列挙される要素■■■がbutton配下の span.icon-bar*3 に対応して表示する。
５行目のa.A-brandは独立したヘッダーでレスポンスに関わらず表示される。


つまりナビゲーションの構成は

~~~
.A.A-primary>
	.A-header>
		レスポンスデザイン用のメニューのボタン（Cを指す）
		本当のヘッダー
	.A-C.C>
		■■■Aに列挙される要素■■■
~~~

に過ぎなかったらしい。

buttonの怪しげな属性について
----

>
data-toggle = C
data-target = .A-C

.A-Cはクラスを指定しているので、data-targetは対象のセレクタになっているのだろう。
data- ではじまる属性は主にjavascriptから読み込まれる。

他にdata-toggleを使用する例

~~~
button:b.btn.btn-primary[data-toggle=button]{Push me!}
~~~

これもdata-属性がjavascriptから読みこまれるらしく、buttonが on / off があるように振る舞う。つまりdata-toggleは実際にあるタグを指している。

一方、先ほどのdata-toggleでは、C、collapseはタグではない。用意されているjavascriptで振る舞っているということか。

結論：
なんとなくdata-toggleとdata-targetの振る舞いが分かり、「>.A-C.C>」のかませがあることに納得できた。