.navbar関係が思い通りに動かなかったので作り直しました。
Emmet記法
気分は単語帳、基本を覚えたら関連、派生、よくある形を理解。
グリッドデザイン基本
.container>.row>.col-sm-6+.col-sm-6.hidden-xs
cf. hidden-xs
cf. visible-xs
見出し
h1, h2, ...
cf. small
大きな文字の段落
p.lead
cf. span.lead
小文字、太文字、斜体
small, strong, em
文字配置
.text-left, text-center, text-right
文字の均等割り付け
.text-justify // 3.1~
文字色
.text-muted // 灰色
.text-primary
.text-success
.text-info // 濃い水色
.text-danger // 石赤
.text-warning // 石黄
文字背景色
.bg-primary
.bg-info
.bg-success
.bg-warning
.bg-danger
省略表現
attr[title=Attribute]{attr}
住所、連絡先
address
cf. strong, abbr, a
引用
blockquote
cf. small, cite
同ブロックで右寄せ左寄せ
.pull-left{LEFT}+.pull-right{RIGHT}+.clearfix
cf. .pull-left{LEFT}+.clearfix+.pull-right{RIGHT}
リストのマーク消
ul.list-unstyled
横並びリスト
ul.list-inline
用語と説明基本(Desciption)
dl>dt+(dd*1)
用語と説明横並び
dl.dl-horizontal
tableセルに色をつける
th.primary
td.success
ラベル
span.label.label-primary
バッジ
span.badge
cf. button.btn.btn-default.btn-lg
アラート
.alert.alert-primary
cf. >button.close[data-dismiss=alert]
cf. >a.alert-link
プログレスバー
.progress>.progress-bar.progress-bar-primary[style=""]
cf. .progress-striped
cf. active
liリストグループ
ul.list-group>li.list-group-item
cf. active
cf. >li.list-group-item.list-group-item-primary (3.1~)
リンク付リストグループ
div.list-group>a.list-group-item
cf. list-group-heading
cf. list-group-text
パネル
.panel>.panel-body
cf. panel-primary
cf. panel-heading
cf. panel-title
cf. panel-footer
cf. .panel>.list-group>
囲み枠
.well
自由度高し
cf. well-lb, well-sm
ボタン
XXXX.btn.btn-primary
cf. XXXX = a, button, input:submit
ボタングループ
.btn-group>button*3
cf. btn-group-lg, btn-group-sm, btn-group-xs
cf. btn-group-justified
ボタンツールバー
.btn-toolbar>.btn-group*3
フォーム基本
form(>fieldset)>.form-group>input
cf. fieldset
フォーム前にアドオン
.input-group>span.input-group-addon+input.form-control
cf. input-group-lg
フォーム後にアドオン
.input-gtoup>input.form-control+span.input-group-addon
cf. input-group-sm
「ul.nav」リスト
ul.nav>li*1
タブズ
ul.nav.nav-tabs>(li>a)*1
cf. .active
cf. a[href=# data-toggle="tab"]
cf. tab.js
ピルズ
ul.nav.nav-pills>(li>a)*1
cf. .active
積み重ねナビ
ul.nav.nav-pills.nav-stacked>(li>a)*1
cf. .disabled
パン屑リスト
ul.breadcrumb>li*1
cf. .active
ナビバーの表現要素 (ul, form, button, p)
.navbar>ul.navbar-nav.nav>(li)*1
.navbar>form.navbar-form.navbar-left>.form-group
.navbar>button.navbar-btn.btn.btn-primary
.navbar>p.navbar-text
cf. .navbar-primary
cf. .navbar-inverse
cf. .navbar-left, .navbar-right
ナビバーのヘッダー(表現要素と同列扱い)
.navbar>.navbar-header>a{Title}
cf. .navbar-brand
cf. >button.navbar-toggle[data-toggle=collapse data-target=.navbar-collapse]
collapse表現要素ラッパー
.navbar>.collapse.navbar-collapse>表現要素
cf. .navbar>.navbar-header+.collapse.navbar-collapse>表現要素
ナビバー上固定
body[style="padding:70px;"]>.navbar.navbar-fixed-top
cf. navbar-fixed-bottom
パギネーション
ul.pagination>(li>a)*1
cf. .active
cf. .disabled
cf. pagination-sm, lg
ページャー
ul.pager>(li>a)*1
cf. .previous, .next
すべての表示をなくす
.sr-only