栅格系统

    1. row必须放到container和container-fluid里面
    2. 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。                  

列的样式

        .col-xx（lg md sm xs）-数字（1~12）  
        
        container有一个padding是15px
        row有一个margin是-15px
        
        列是支持嵌套的
        
        列偏移： col-xx-offset-数字（1~12）
        
        列排序：  .col-md-pull-数字 .col-md-push-数字         

文本对齐类

            - .text-left
        - .text-center
        - .text-right            

表单

        .form-group
        .form-inline
        .form-horizontal

表格

        .table
        .table-striped
        .table-bordered
        .table-hover
        .table-condensed       

响应式表格

        <div class="table-responsive">  // table外面包裹一层div
          <table class="table">
            ...
          </table>
        </div      

按钮

        .btn
        .btn-default
        .btn-success
        .btn-warning
        .btn-danger
        
        .btn-lg
        .btn-sm
        .btn-xs

快速浮动

        - .pull-left
        - .pull-right

清除样式

    - .clearfix

Bootstrap3居中处理

    水平居中

            - .center-block 不涉及到列的居中 本质上就是 margin: 0 auto 
            让那个标签居中就把它写在哪个标签的样式类中
            
            - 我们自定义的居中 在涉及到列的居中时使用
                .col-centered {
                  float: none;
                  margin: 0 auto;
                }
            - 文本类居中或者display: inline
                .text-center

垂直居中

            .vertical-center {
              display: flex;
              align-items: center;
            }
            
            
            用在父标签中，让子块级标签垂直居中              

Bootstrap组件
图标
span标签，里面加上样式类
glyphicon glyphicon-piggy-bank

    下拉菜单：  后面我们就要用到bootstrap.js --> 之前还要引用jQuery.js        

按钮组
.btn-group
.btn-toolbar
.css 和.min.css的区别是：
.min.css是压缩版的，用于生产环境的，因为它把多余的空格都去掉了，体积很小
.css 是没有压缩的

        我们现在是开发阶段，用哪个都可以
    .min.js
    .js
        同上
        
    js文件我们通常放在body标签里面的最下面
    除非你的js代码就必须在文档加载之前运行，这个时候要放在head标签里面

模态框
位置要放在body里面（body的直接子元素）
弹出方式：
1. 通过 data 属性
data-toggle="modal" data-target="#myModal"
2. 通过JS代码
- ("#myModal").modal("hide) --> 隐藏

    模态框大小：(放在modal里面标签上的)
        .modal-lg
        .modal-sm

bootstrap提供给的都是成型的样式和框架，可以拿过来用然后更改一下样式，所以很多都可以直接过去复制粘贴，当然想要自己的效果还是需要修改。

网页的布局说白了就是一个个的盒子，想好每个盒子有多大要放什么，盒子里面是否还有盒子然后是否要分row，这样来布局的话就好得多