BootStrap 学習メモ by emmet literal



>これは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で生を受ける。

~~~coffee
$ () ->
	$('[data-toggle=tooltip]').tooltip()
	$('[data-toggle=tooltip]').tooltip
		placement: 'bottom'
~~~


popover編
------
今度はマウスクリックで出てくる説明

~~~
p>a[href=# title=朝鮮民主主義人民共和国 data-content=さらに説明 data-toggle=popover]{朝鮮}
~~~

~~~coffee
$ () ->
	$('[data-toggle=popover]').popover()
~~~

カルーセル
------
スライドギャラリーのことらしい。