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

目录：

        一：表单

        二：按钮

        三：图片

        四：辅助类

        五：响应式工具

 一：表单

1.1：基本表单

1.2：内联表单

1.3：表单组合

1.4：水平排列表单

1.5：多选框

1.6：下拉列表

1.7：控制尺度

1.1：基本表单

        a：class="form-control"：可为<input> <textarea> <select>元素设置该属性，会将宽度设置为100%

        b：class="form-group"： 可为<div>设置该属性，<div>中包含<label>和<input>，这样层次会更清晰

1.2：内联表单

        内联表单【让所有的表单元素都显示在一行】 <form class="form-inline">

1.3：表单组合

        class=”input-group”、class=”input-group-addon”

1.4：水平排列表单（栅格）

            <form class="form-horizontal">
            <label class="col-lg-2 control-label">
            <input class="col-lg-10" 

1.5：多选框

        a：格式

                <div class="checkbox disabled">
                <label>
                <input type="checkbox"/>
               </label>

        b：内联

                <label class="checkbox-inline">
               <input type="checkbox" disabled/>
                </label>

1.6：下拉列表

        <select class="form-control">

1.7：控制尺度

        class="form-control input-lg"、lg-sm

二：按钮

2.1：可用作按钮使用的标签和元素

2.2：预定式样式

2.3：尺寸

2.4：激活状态

2.5：禁用状态

2.1：可用作按钮使用的标签和元素

        class="btn：可以给<a><button><input type="button">
        <input type="submit">添加按钮样式

2.2：预定式样式

        class="btn-default"：默认样式

        class="btn-primary"：首选项

        class="btn-success"：成功

        class="btn-info"：一般信息

        class="btn-warning"：警告信息

        class="btn-danger"：危险信息

        class="btn-link"：链接

2.3：尺寸

        默认大小 【md】不用写

        class="btn-lg"：大按钮

        class="btn-sm"：小按钮

        class="btn-xs"：超小按钮

        class="btn-block"：块级按钮

2.4：激活状态：class="btn active"

2.5：禁用状态

        <button class="btn" disabled="disabled">

        <a class="btn disabled">

三：图片

3.1：响应式图片

3.2：图片形状

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

3.2：图片形状

        圆角矩形<img class="img-rounded"/>

        圆形/椭圆<img class="img-circle"/> 

        缩略图<img class="img-thumbnail"/> 

 四：辅助类

4.1：情境文本颜色[文字颜色]

4.2：情境背景色[背景颜色]

4.3：关闭按钮

4.4：三角符号

4.5：快速浮动

 4.1：情境文本颜色[文字颜色]

        class="text-muted"/primary/success/info/warning/danger

4.2：情境背景色[背景颜色]

        class="bg-primary"/success/info/warning/danger

4.3：关闭按钮

        class="close"

4.4：三角符号

        class="caret"

4.5：快速浮动

        class="pull-left"

五：响应式工具 

5.1：可见

5.2：隐藏

5.1：可见

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

5.2：隐藏

        class="hidden-xs"