Bootstrap 3

1、登录bootstrap官网，点击下载Bootstrap   https://v3.bootcss.com/getting-started/
2、导入对应的样式文件css
3、导入对应的js，需要导入bootstrap.js或者bootstrap.min.js文件，bootstrap的前提是jquery，所以我们要在导入bootstrap.js前面导入jquery.min.js
对应导入代码：
<!--导入样式-->
<link href="Bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="Bootstrap/css/bootstrap.css" rel="stylesheet"/>
<link href="Bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<!--导入bootstrap.js包-->
<script src="jquery/jquery-3.1.1.min.js"></script>

<script src="Bootstrap/js/bootstrap.min.js"></script>

Bootstrap常用的class:

1、.container 居中的内容展示
2、.row  将容器分为12列

3、.col-xs-4  在.row中的列, 列必须在.row 中   .col-xs-4表示占据屏幕的三分之一 

在不同的屏幕宽度下使用:  col-xs-4 宽度小于768px  、col-sm-4宽度≥768px＜992px 、col-md-4 宽度≥992px＜1200px 、col-lg-4宽度≥1200px

4丶按钮

添加 .btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮

按钮组:

<div class="input-group">
    <span  class="input-group-addon">状态</span>
    <select class="form-control">
        <option value="">请选择</option>
        <option value="已审核">已审核</option>
        <option value="未审核">未审核</option>
    </select>
</div>

<div class="input-group">
    <span  class="input-group-addon">备注</span>
    <input class="form-control" type="text">
</div>

5丶pull-left/right  元素浮动到左边/右边 

6丶clearfix  清除浮动

7丶show/hidden 显示/隐藏

8丶divider 分隔线

9丶visible-*  通过单独或联合使用以下列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

10丶.table 基本样式(只有横向分隔线)

.table-striped  条纹状表格、.table-bordered 带边框的表格、.table-hover 对鼠标悬停状态作出响应、.table-condensed 紧缩表格

.table-responsive  将任何 .table 元素包裹在 .table-responsive 元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于 768px 宽度时，水平滚动条消失

tr/th/td 可以使用.active/.success/.info/.warning/.danger来改变行或者单元格的颜色

更多查看官网 https://v3.bootcss.com/css/