该框架已经帮你写好了很多页面样式，如果需要使用，只需要下载它对应的文件，之后直接cv拷贝即可

在使用Bootstrap的时候所有的页面样式都只需要你通过class来调节即可

版本：https://v3.bootcss.com/

注意：
Bootstrap的JS代码是依赖于jQuery的，也就意味着在使用Bootstrap的动态效果的时候，必须也导入jQuery

布局容器

<body>
<div class="container"></div>   左右两侧有留白
<br>
<div class="container-fluid"></div>  左右两侧无留白
</body>

后续在使用Bootstrap做页面的时候 上来先写一个 <div class = "container"></div> ，之后在div内部书写页面

栅格系统（掌握）

<div class="row"></div>
<!-- 一个row就是将此标签均分为12份 -->

<div class="col-md-6"></div>
<!-- col-md-6意思是此标签占12份中的6份 -->

栅格参数

.col-xs-	.col-sm-	.col-md-	.col-lg-
# 针对不同的显示器 Bootstrap会自动选择对应的参数
# 如果想要兼容所有的显示器 上面四个参数全部加上即可

# 如果想要将标签偏移
<div class="col-md-8 c1 col-md-offset-2"></div>  # 将标签向右偏移2份

排版

Bootstrap将所有原生的html标签的文本字体统一设置成了肉眼可以接受的样式

表格

<body>
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr class="success">
                    <th>ID</th>
                    <th class="text-center">username</th>
                    <th>password</th>
                    <th>hobby</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>jason</td>
                    <td>123</td>
                    <td>study</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>jason</td>
                    <td>123</td>
                    <td>study</td>
                </tr>
                <tr>
                <td>1</td>
                <td>jason</td>
                <td>123</td>
                <td>study</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>


# 不同表格内颜色
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

表单

针对表单标签 加样式就用 "<input class='form-control'>"

<body>
<div class="container">
    <div class="col-md-8 col-md-offset-2">
        <h2 class="text-center">登录页面</h2>
        <form action="">
            <p>username: <input type="text" class="form-control"></p>
            <p>password: <input type="text" class="form-control"></p>
            <p>
                <select name="" id="" class="form-control">
                    <option value="">111</option>
                    <option value="">222</option>
                    <option value="">333</option>
                </select>
            </p>
            <textarea name="" id="" cols="30" rows="10" class="form-control"></textarea>
            <input type="submit">
        </form>
    </div>
</div>
</body>

针对input红色边框 可以加class="has-error"（input的父标签加）
绿色边框 class="has-success"

<p class="has-error">username: <input type="text" class="form-control"></p>
<p class="has-success">password: <input type="text" class="form-control"></p>

按钮

<body>
<a href="https://www.mzitu.com/" class="btn btn-warning btn-lg">最大</a>
<button class="btn btn-danger btn-xs">最小</button>
<button class="btn btn-default btn-sm">较小</button>
<button class="btn btn-success">正常</button>
<button class="btn btn-info disabled">禁用</button>
<br>
<button class="btn btn-primary btn-block">拉伸</button>
</body>

通过给按钮添加 .btn-block 类可以将其拉伸至父元素100%的宽度，而且按钮也变为了块级（block）元素

图标

Bootstrap网站图标导入方法：

复制图标下的英文，建一个class属性的span标签即可

<p>这是一个垃圾桶<span class="glyphicon glyphicon-trash"></span></p>

font-awesome图标导入方法：

图标下载网站：http://www.fontawesome.com.cn/

下载之后代码中导入

<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">

<body>
<i class="fa fa-bath" aria-hidden="true"></i>

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; 首页</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; 关于我们</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; 后台应用编辑</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; 系统设置</a>
</div>

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
</body>

导航条

<nav class="navbar navbar-default">    <!-- 黑色导航条 navbar-inverse -->

分页器

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

警告框

网址：https://lipis.github.io/bootstrap-sweetalert/

使用前先导入

<link rel="stylesheet" href="bootstrap-sweetalert-master/dist/sweetalert.css">
<script src="bootstrap-sweetalert-master/dist/sweetalert.min.js"></script>

swal('来了老弟')
swal('来了老弟','yeah')
swal('来了老弟','yeah','success')
swal('hi bro','yeah','success')
swal('hi bro','yeah','warning')
swal('来了老弟','yeah','error')
swal('来了老弟','yeah','info')