一.表单(以下示例 * 代表class)
注意:a.使用表单的关键字form
b.所有的提示词使用label包裹
c.所写内容按div分类,使得层次分明
1.基本表单+表单组合+内联表单
*=form-inline 使得标签都归为一行,即为内联
*=form-group 分组,使得层次分明
*=input-group 使指定符号与输入框分组
*=input-group-addon 使指定符号位于输入框之前
1 <form class="form-inline"> 2 <div class="form-group"> 3 <label>姓名</label> 4 <input type="text" name="" id="" value="" /> 5 </div> 6 <div class="form-group"> 7 <label>密码</label> 8 <input type="password" name="" id="" value="" /> 9 </div> 10 <div class="form-group"> 11 <label>薪资</label> 12 <div class="input-group"> 13 <span class="input-group-addon">$</span> 14 <input type="text" name="" id="" value="" /> 15 </div> 16 </div> 17 </form>
2.水平排列
*=form-horizontal 表示水平分布
*=control-label 控件组与水平分布一同实现inline所有标签同行的效果
1 <form class="form-horizontal"> 2 <label class="col-md-6 control-label">用户名</label> 3 <input class="col-md-6" type="text" name="" id="" value="" /> 4 <label class="col-md-6 control-label">邮箱</label> 5 <input class="col-md-6" type="email" name="" id="" value="" /> 6 </form>
3.多选框与禁用
*=checkbox disabled 表示多选与禁用
1 <div class="checkbox disabled"> 2 <label> 3 <input type="checkbox" disabled="disabled" name="" id="" value="" />吃饭 4 </label> 5 </div> 6 <div class="checkbox"> 7 <label > 8 <input type="checkbox" name="" id="" value="" />睡觉 9 </label> 10 </div> 11 <div class="checkbox "> 12 <label> 13 <input type="checkbox" name="" id="" value="" />打豆豆14 </label> 15 </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