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

  navigation

(未完待续)