bootstrap全局CSS之表单&按钮&图片&辅助类&响应式工具

• 表单
  • 基本表单
    • class="form-control"：可为<input> <textarea> <select>元素设置该属性，会将宽度设置为100%
    • class="form-group"： 可为<div>设置该属性，<div>中包含<label>和<input>，这样层次会更清晰
  • 内联表单【让所有的表单元素都显示在一行】
    • <form class="form-inline">
  • 表单组合
    • <div class="input-group"> <span class="input-group-addon"></span> <input type="text"> </div>
      • 例如工资、邮箱等
  • 水平排列表单,涉及到栅格
    • <form class="form-horizontal"> <label class="col-lg-2 control-label"> <input class="col-lg-10" type="text"/> </form>
  • 多选框
    • 格式：
      • <div class="checkbox disabled"> <label> <input type="checkbox"/> </label> </div>
    • 内联：
      • <label class="checkbox-inline"> <input type="checkbox" disabled/> </label>
  • 下拉列表
    • <select class="form-control">
  • 控制尺寸(高度)
    • class="form-control input-lg"
    • class="form-control input-sm"
  • 控制尺寸(宽度)
    • <div class="row"> <div class="col-xs-X"> <input type="text" class="form-control" placeholder=".col-xs-2"> </div> </div>
  • 案例1：演示表单样式
• 按钮
  • 可用作按钮使用的标签和元素
    • class="btn：可以给<a><button><input type="button"> <input type="submit">添加按钮样式
  • 预定义样式
    • class="btn-default"：默认样式
    • class="btn-primary"：首选项
    • class="btn-success"：成功
    • class="btn-info"：一般信息
    • class="btn-warning"：警告信息
    • class="btn-danger"：危险信息
    • class="btn-link"：链接
  • 尺寸
    • 默认大小 【md】不用写
    • class="btn-lg"：大按钮
    • class="btn-sm"：小按钮
    • class="btn-xs"：超小按钮
    • class="btn-block"：块级按钮
  • 激活状态：class="btn active"
  • 禁用状态
    • <button class="btn" disabled="disabled">
    • <a class="btn disabled">
  • 案例2：演示按钮
• 图片
  • 响应式图片
    • <img class="img-responsive">
  • 图片形状
    • 圆角矩形<img class="img-rounded"/>
    • 圆形/椭圆<img class="img-circle"/>
    • 缩略图<img class="img-thumbnail"/>
  • 案例3：演示图片
• 辅助类
  • 情境文本颜色[文字颜色]
    • class="text-muted"
    • class="text-primary"
    • class="text-success"
    • class="text-info"
    • class="text-warning"
    • class="text-danger"
  • 情境背景色[背景颜色]
    • class="bg-primary"
    • class="bg-success"
    • class="bg-info"
    • class="bg-warning"
    • class="bg-danger"
  • 关闭按钮
    • class="close"
  • 三角符号
    • class="caret"
  • 快速浮动
    • class="pull-left"
  • 案例4：演示辅助类
• 响应式工具
  • 可见：class="visible-xs-*" *指的是block或者inline
  • 隐藏：class="hidden-xs"
  • 案例5：演示响应式工具