Bootstrap的CSS样式全面使用介绍

目录

• 1、基本设置
• （1）使用 HTML5 文档类型。
• （2）响应移动设备。
• 2、网格（Grid）
• （1）Bootstrap 网格系统（Grid System）
• （2）container
• （3）使用 Grid
• （4）举例：
• 3、文本处理
• （1）small 属性 、<small> 标签
• （2）常用文本属性
• （3）补充文本属性
• （4）<abbr> 标签　
• （5）列表
• 4、表格
• （1）常用表格标签
• （2）<table>常用属性
• （3）<tr>, <th> 和 <td>常用属性
• 5、表单
• （1）基本使用
• （2）按钮、下拉框
• 6、按钮
• （1）基本属性
• （2）按钮激活、禁用
• （3）按钮组
• 7、辅助样式
• （1）背景样式
• （2）浮动与隐藏

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

/* 超小设备（手机，小于 768px） */
@media (max-width: @screen-xs-max) { ... }
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

<div class="container">
   <h1>Hello, world!</h1>
   <div class="row">
      <p>排序前</p>
      <div class="col-md-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>
   <div class="row">
      <p>排序后</p>
      <div class="col-md-4 col-md-push-8" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
         我在左边
      </div>
      <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444,inset -1px 1px 1px #444;">
         我在右边
      </div>
   </div>
</div>

<table>         定义表格
<thead>         定义表格标题行
<tbody>         定义表格主体
<tr>            定义表格行
<td>            定义表格列
<th>            定义表格列（用于<thead>中）
<caption>       定义表格描述信息

class="table"            基本表格样式，只有横向的分割线
class="table-striped"    给 tbody 添加条纹（表格间有色差）。
class="table-bordered"   给所有的单元格添加边框
class="table-hover"      给 tbody 添加悬停样式（加个背景色）
class="table-condensed"  使表格样式更紧凑

class="active"           表示选中某条数据（有个阴影）
class="success"          表示成功
class="info"             表示信息变化
class="warning"          表示警告
class="danger"           表示危险

        <form class="form-inline" role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <br />
        <br />
        <!-- 使用 sr-only 可以隐藏表单控件-->
        <form class="form-inline sr-only" role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>
        <br />
        <br />
        <form role="form">
            <div class="form-group">
                <label for="name">名称</label>
                <input type="text" class="form-control" id="name" placeholder="请输入名称">
            </div>
            <div class="form-group">
                <label for="inputfile">文件输入</label>
                <input type="file" id="inputfile">
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> 请打勾
                </label>
            </div>
            <button type="submit" class="btn btn-default">提交</button>
        </form>

<!-- 内联单选框、复选框样式 -->
<label for="name">内联的复选框和单选按钮的实例</label>
<div>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox1" value="option1"> 选项 1
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox2" value="option2"> 选项 2
    </label>
    <label class="checkbox-inline">
        <input type="checkbox" id="inlineCheckbox3" value="option3"> 选项 3
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 选项 1
    </label>
    <label class="radio-inline">
        <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 选项 2
    </label>
</div>
<!-- slect样式 -->
<div class="form-group">
    <label for="name">可多选的选择列表</label>
           <!-- multiple 表示可多选 -->
    <select multiple class="form-control">
        <option>1</option>
        <option>2</option>
        <option>3</option>
        <option>4</option>
        <option>5</option>
    </select>
</div>

class="btn"                基本按钮样式
class="btn btn-default"    默认按钮样式
class="btn btn-primary"    原始按钮样式
class="btn btn-success"    成功按钮样式
class="btn btn-info"       信息按钮样式
class="btn btn-warning"    警告按钮样式
class="btn btn-danger"     危险按钮样式
class="btn btn-link"       链接按钮样式
class="btn btn-lg"        大的基本按钮样式
class="btn btn-sm"        小的基本按钮样式
class="btn btn-xs"        特别小的基本按钮样式
class="btn btn-block"     块级的基本按钮样式，默认会填充满父标签的宽度

class="btn active"         定义激活按钮样式，背景色会改变（有色差）
class="btn disabled"       定义禁止按钮样式，背景色会变（可能有些效果不能完全禁用）。

class="btn-group"           创建一个按钮组
class="btn-group-lg"        创建一个大按钮组
class="btn-group-sm"        创建一个小按钮组
class="btn-group-xs"        创建一个特别小按钮组
class="btn-group-vertical"  创建一个垂直的按钮组
class="btn-group-justified" 创建一个自适应大小的按钮组（若内部是<button>标签，需给其加一个class="btn-group"）
class="dropdown-menu" + class="caret"      可以创建一个有下拉框的按钮

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

class="pull-left"         元素浮动在左侧
class="pull-right"        元素浮动在右侧
class="text-center"       元素居中
class="show"              元素显示
class="hidden"            元素隐藏
class="sr-only"           元素隐藏
class="text-hide"         元素隐藏