Bootstrap第三式：全局CSS之表单&按钮&图片&辅助类&响应式工具

今天我们来学习Bootstrap第三式，通过更多的CSS样式以及Bootstrap框架来规范页面布局

第一部分：表单

基本表单
    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>
 

---

 第二部分：按钮

可用作按钮使用的标签和元素
    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">
 

---

  第三部分：图片

响应式图片
    <img class="img-responsive">

图片形状
    圆角矩形<img class="img-rounded"/>
    圆形/椭圆<img class="img-circle"/> 
    缩略图<img class="img-thumbnail"/> 
 

---

第四部分：辅助类 

情境文本颜色[文字颜色]
    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"
 

---

第五部分：响应式工具

可见：class="visible-xs-*"   *指的是block或者inline

隐藏：class="hidden-xs"
 

 总结：学习第三式，在后面的项目中用到表单，可以修饰表单布局，使页面更加整齐好看。