32
30

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?