bootstrap 标签集整理
Bootstrap是快速开发Web应用程序的前端工具包。具体了解请点这里：bootstrap
在学习bootstrap的过程中需要记忆其中不少的className和html结构。为了方便记忆和快速查看，整理一个列表出来。所有内容使用zen coding格式书写。
bootstrap 标签集
============================
## Scaffolding
### grid
basic:
div.row>div.span4+div.span8
offset:
div.row>div.span4.offset4
nesting:
div.row>div.span9>div.row>div.span6+div.span4
fluid:
div.row-fluid>span4+span8
### layouts
basic:
div.container
fluid:
div.container-fluid
### Enabling responsive features
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
### Responsive utility classes
* .visible-phone
* .visible-tablet
* .visible-desktop
* .hidden-phone
* .hidden-tablet
* .hidden-desktop
## Base CSS
p.lead
p.muted
p.text-warning
p.text-error
p.text-info
p.text-success
address>br+br+br
.pull-right
ul.unstyled
dl.dl-horizontal>dt+dd
table
table.table
table.table.table-striped
table.table-bordered
table.table.table-hover
//更紧凑
table.table.table-condensed
tr.success
tr.error
tr.warning
tr.info
forms
base:
form>legend+label+input:text+span+label>input:checkbox
search form:
form.form-search>input:text.input-medium.search-query
inline form:
form.form.form-inline>input*2+label>input
horizontal form:
form.form-horizontal>div.control-group*3>label.control-label+div.controls>input
input
inline checkboxes:
label.checkbox.inline*3>input.checkbox
extending form controls
prepended:
div.input-prepend>span.add-on+input
append:
div.input-append>input+span.add-on
combined:
div.input-prepend.input-append>span.add-on+input+span.add-on
buttons instead of text:
input.input-append>input+button.btn*2
control sizing
input.mini
input-small
input-medium
input-large
input-xlarge
input-xxlarge
grid sizing
.span1 - .span12
div.controls.controls-row>input.span4+input.span1
uneditable inputs
span.uneditable-input
form actions
form-actions>button*2
help text
input+span.help-inline
input+span.help-block
validation states
div.control-group.info>label.control-label+div.controls>input+span.help-inline
div.control-group.warning>label.control-label+div.controls>input+span.help-inline
div.control-group.error>label.control-label+div.controls>input+span.help-inline
div.control-group.success>label.control-label+div.controls>input+span.help-inline
button
style:
button.btn
button.btn.btn-primary
button.btn.btn-info
button.btn.btn-success
button.btn.btn-warning
button.btn.btn-danger
button.btn.btn-inverse
button.btn.btn-link
size:
button.btn.btn-large
button.btn.btn-small
button.btn.btn-mini
block:
button.btn-large.btn-block
disable:
button.btn.disabled
a.btn.btn.disabled
images
img.img-rounded
img.img-circle
img.img-polaroid
icons
i.icon-search.icon-white
example:
div.btn-group>a*4>i.icon-align-left
dropdown
//!!todo
div.btn-group>a.btn.btn-primary>i.icon-user.icon-white
a.btn.dropdown-toggle>span.caret
ul.dropdown-menu>li*3>a>i.icon-pencil
small button:
a.btn.btn-small>i.icon-star