LoginSignup
32
30

More than 5 years have passed since last update.

逆引き!BootStrap 3.1+

Posted at

.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

32
30
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
32
30