bootstrap 标签集整理

原创于 2012-10-20 10:16:34 发布 · 8.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

工作工具

本文提供了 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

### 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