目的：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 インラインブロック要素で確認。
ちなみにボタンに関して
.btn-group>button*1
ボタンはスタイルが当てられて繋がる。
つまりbuttonを持つbutton上位クラスがある。さらに
.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は入れ子構造を用いて、ダイナミックな表現を提供してくれている。
以下のようなものがある。
.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の改変コードを示した。
ナビゲーションの中身は、タイトルと、ページ一覧と、検索窓がついている。
.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>」のかませがあることに納得できた。