Bootstrap03

一.表单(以下示例 * 代表class)

　　注意:a.使用表单的关键字form

　　　　b.所有的提示词使用label包裹

　　　　c.所写内容按div分类,使得层次分明

　　1.基本表单+表单组合+内联表单

　　*=form-inline  使得标签都归为一行,即为内联

　　*=form-group  分组,使得层次分明

　　*=input-group  使指定符号与输入框分组

　　*=input-group-addon  使指定符号位于输入框之前

 <form class="form-inline">
             <div class="form-group">
                 <label>姓名</label>
                 <input type="text" name="" id="" value="" />
             </div>
             <div class="form-group">
                 <label>密码</label>
                 <input type="password" name="" id="" value="" />
             </div>
             <div class="form-group">
                 <label>薪资</label>
                 <div class="input-group">
                     <span class="input-group-addon">$</span>
                     <input type="text" name="" id="" value="" />
                 </div>
             </div>
         </form>

　　2.水平排列

　　*=form-horizontal 表示水平分布

　　*=control-label 控件组与水平分布一同实现inline所有标签同行的效果

 <form class="form-horizontal">
             <label class="col-md-6 control-label">用户名</label>
             <input class="col-md-6" type="text" name="" id="" value="" />
             <label class="col-md-6 control-label">邮箱</label>
             <input class="col-md-6" type="email" name="" id="" value="" />
         </form>

　　3.多选框与禁用

　　*=checkbox disabled 表示多选与禁用

 <div class="checkbox disabled">
             <label>
                 <input type="checkbox" disabled="disabled" name="" id="" value="" />吃饭
             </label>
         </div>
         <div class="checkbox">
             <label >
                 <input type="checkbox" name="" id="" value="" />睡觉             </label>
         </div>
         <div class="checkbox ">
             <label>
                 <input type="checkbox" name="" id="" value="" />打豆豆             </label>
         </div>

二.图片

　　1.响应式图片 img-responsive

　　2.图片形状

　　　　a.img-rounded

　　　　b.img-circle

　　　　c.img-thumbnail

三.辅助类

　　1.文本颜色

　　　　*=text-muted 灰白色

　　　　*=text-primary 海军蓝

　　　　*=text-success 成功绿

　　　　*=text-info 天空蓝

　　　　*=text-danger 危险红

　　　　*=text-warning 警告黄

　　2.背景颜色

　　　　*=bg-primary 海军蓝

　　　　*=bg-info 天空蓝

　　　　*=bg-warning 警告黄

　　　　*=bg-danger 危险红

　　　　*=success 成功绿

　　3.关闭按钮 *=close

　　4.三角符号 *=caret

四.响应式

　　1.显示 *=visible-lg/md/sm/xs-block/inline

　　2.隐藏 *=hidden-lg/md/sm/xs