これはdotinstallの動画「bootstrap3.0」を最初から追ったときに、ロジック部をemmetで残したノートでしかありません。
多いけどレイアウトかスタイルかアクションかに分けれる気がする。
出てくる上位クラスをwrapperととらえるか、クラスのインスタンス呼び出しと考えるのかイメージでいこう。
レイアウト遍
body>#header.container+#main.row.container+#footer.container
画面幅に合わすなら、それぞれにcontainerをつける。
cf. container-fluid
.row>.col-sm-3+.col-sm-6+.col-sm-3
グリッドデザインの基本
横幅、small、１２のうちいくつかを示す。
cf. xs, sm, md, lg
.row>.col-sm-3.hidden-xs+.col-sm-6.col-xs-6+.col-sm-3.col-xs-6
デバイスの違いを同時に記述する。
フォーム
form>.form-group
フォームの基本
.form-groupがform部品のwrapper
これは縦に並べる場合
form>.form-inline>.form-group
真横に並べたい、真横に入れ込むときのwrapper
label.control-label.sr-only
labelのwrapper
sr = screen render、見えない
input:t.form-control
(text)formのwrapper
controlの名前の位置がややこしい
.form-group>.input:t.form-control
.form-group>.input:s.btn.btn-primary
form１部品ごとに.form-groupを作るのがベストプラクティスか
ボタン専用のクラスがある
.form-horizontal>.form-group>label.control-label.col-sm-2+.col-sm-4>input:t.form-control
配列を整えて縦に並べる場合のwrapper
labelはインライン要素だが、しかしグリッドを効かせる
inputはブロックで囲み、グリッドを効かせる
.form-horizontal>.form-group>.col-sm-offset-2.col-sm-4>input:s.btn.btn-primary
上のsm-2 + sm-4に対するレイアウトに合わせた余白要素を加える
アイコンボタン編
p>i.glyphicon.glyphicon-[BOOK]
アイコンはブロック内で
button.btn.btn-primapry>i+TEXT
ボタン要素にもbtnクラスがある
.btn-group>button.btn*3
ボタンをまとめるwrapper
横並びでくっつける場合
.btn-group>(button.btn.dropdown-toggle[data-toggle=dropdown]{Push me}>span.caret)+ul.dropdown-menu>(li>a[href=""])*4
dropdownメニューの場合
caretクラスがある
button.btn.dropdown-toggle[data-toggle]とul.dropdown-menuを同列に置く
.btn-group>button.btn{Push me}+button.btn.dropdown-toggle[data-toggle=dropdown]>span.caret^ul.dropdown-menu>(li>a)*100
dropdownメニューでラベルとキャレットを分ける場合
パン屑、パギネーション、ページャー遍
ul.breadcrumb>(li>a{Something})
li.activeで現在いるページを示せる
ul.pagination>(li>a{$})*3
&laqｕo;でLEFT ANGLE QUOTATIONの実体文字
cf. &raqｕo;
li.activeやli.disabledがある
ul.pager>(li>a{前後へ})*2
li.previous左端スタイル
li.next右端スタイル
ナビバー遍
nav.navbar.navbar-default>(div or ul)
ナビ基本
.navbar-inverseスタイルに変えれる
.navbar-fixed-topで上に固定
nav>.navbar-header>a.navbar-brand{見出し}
^ul.nav.navbar-nav>(li>a{title})*100
見出しのレイアウトがnavbar-header、スタイリングがnavbar-brand
横に並べるのがul.nav.navbar-nav
li.activeとかある
cf. ul.nav.navbar-nav.navbar-right
右端に寄せる
ナビバー・スマホ編（collapse遍）
nav>.navbar-header>a.navbar-brand{見出し}
+button.navbar-toggle[data-toggle=collapse data-target=.target]
>span.icon-bar*10000
見出しと同列に並べて、スマホの時に現れるナビゲーションを置く。
専用のクラスと属性と対応ターゲットを書く
並べるリスト数だけspanを置く
.collapse.navbar-collapse.target>ul(.li.aなど)
ulをtargetにして対応させるためのcollapse wrapper
ラベル・バッジ・アラート・パネル編
p{text}>span.label.label-primary{New!!!}
labelレイアウトとlabel-primaryスタイリング
p{text}>span.badge{10000000}
bedgeはテキストがないと表示しないから便利
.alert.alert-info{INFORMATION}>button.close[data-dismiss=alert]
alertレイアウトとスタイリング
cf. alert-danger
直下に削除ボタンが置ける
.panel.panel-primary>.panel-heading{}+.panel-body{}
パネルとは、なんかつながっててみやすい感じの枠
headingって違和感ありあり
プログレスバー遍
.progress(.progress-striped)(.active)>.progress-bar.progress-bar-primary[style="width=33%"]
宣言wrapper、レイアウトクラスとスタイルクラス
style内で値を扱う
wrapperで縞模様やアニメーションを設定
.progress>.progress-bar-info[style="width=33%"]+.progress-bar-primary[style="width=33%"]+.progress-bar-danger[style="width=33%"]
デフォで積み上げれる
モーダル編
準備
a.btn.btn-primary[href=#myModal data-toggle=modal]{Show me!}
aにも.btnクラスがある
指定したターゲットのモーダルを出す
この後divがめっちゃ多い
#myModal.modal.fade>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer
ターゲットに宣言とfadeスタイルをあてた下で
modal-dialog -> window宣言
modal-content -> htmlContent宣言
modal-header, modal-body, modal-footer の順に続く
.modal-header>button.close[data-dismiss=modal]{$times;}+h4.modal-title{TITLE}
罰印の実体&timｅs;
削除ボタンはアクション(close)とターゲット(data-dismiss)
.modal-body>{}
本文
.modal-footer>button.btn.btn-primary{OK}
フッター
Tabs編（ナビゲーション＋本文切り替え）
ul.nav.nav-tabs>(li>a[href=#content data-toggle=tab]{CONTENT})*10
ulにnavはつきもの、nav-tabsをあてる
li.active使える
どうやらdata-toggleはスタイル上のデータを紐づけるってことっぽい。
次にターゲット先のコンテンツを定義する
.tab-content>#content.tab-panel{CONTENTBODY}
.active使える
tooltip編
なにこれ → マウスホバーで出てくる説明
p>a[href=# title=朝鮮民主主義人民共和国 data-toggle=tooltip]{朝鮮}
titleに残したものがtooltipで表示される。jQueryで生を受ける。
$ () ->
$('[data-toggle=tooltip]').tooltip()
$('[data-toggle=tooltip]').tooltip
placement: 'bottom'
popover編
今度はマウスクリックで出てくる説明
p>a[href=# title=朝鮮民主主義人民共和国 data-content=さらに説明 data-toggle=popover]{朝鮮}
$ () ->
$('[data-toggle=popover]').popover()
カルーセル
スライドギャラリーのことらしい。