BOOTSTRAP DAY02

二、Bootstrap
  1.Bootstrap css框架
    英文官网：http://getbootstrap.com
    中文官网：http://www.bootcss.com
    简洁、直观、强悍的前端开发框架，让web开发更迅速、简单
  2.Bootstrap内容分为5部分
    （1）如何使用-起步
    （2）全局CSS样式类
    （3）组件
    （4）js插件
    （5）定制（scss）
  3.Bootstrap第一步：起步
    （1）设置基本模板
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.css">
    <script src="jquery.js"></script>
    <script src="popper.js"></script>
    <script src="bootstrap.js"></script>
     在body中<div class="container"></div>
  4.Bootstrap第二步：全局css类
      1.特点：
       （1）所有标记的默认样式都统一化-重写
         body,p,h1~h6,ul,dl等重写样式
       （2）设置box-sizing:border-box
      2.全局css样式-按钮相关
        不同样式按钮：
     .btn 基本按钮
     .btn-danger 危险
     .btn-warning 警告
     .btn-info 信息
     .btn-primary 主要按钮
     .btn-secondary 次要按钮
     .btn-dark 黑色
     .btn-light 浅色
     .btn-link 链接
        不同边框按钮：
     .btn-outline-primary 主要按钮
     .btn-outline-success 成功
     .btn-outline-info 信息
     ...
    不同大小：
     .btn-lg 大按钮
     .btn-sm 小按钮
     .btn-block 块级按钮
      3.全局css样式-图片相关
         .rounded 圆角图片
     .rounded-circle 椭圆图片
     .img-thumbnail 缩略图
     .img-fluid 响应式图片
      4.全局css样式-文本相关
         .h1-.h6
     .text-danger/success/info/dark/light/primary/muted 文字颜色
     .text-uppercase/lowercase/capitalize 大写/小写/首字母大写
     .text-left/center/right/justify/nowrap 对齐方式
     .font-weight-bold 加粗
     .font-weight-light 更细
     .font-weight-normal 普通
     .font-italic 斜体
      5.全局css样式-列表相关
         .list-unstyled 去除标识的效果
     .list-inline 行内列表
     .list-group/list-group-item 创建列表组
     .active 激活状态
     .disabled 禁用状态
     列表项颜色：
     .list-group-item-danger/success/warning/info/primary/dark/light.....
      6.全局css样式-表格相关
         .table
     .table-bordered 带边框的表格
     .table-striped 隔行变色的表格
     .table-hover 带鼠标悬停效果的表格
     .table-primary/success/danger/dark....表格颜色
     .table-responsive 响应式表格，用于table的父元素上
      7.全局css样式-辅助类
         浮动：
     .float-*-left/float-*-right 左/右浮动
     .clearfix 清除浮动
     显示：
     .visible/invisible 可见/隐藏
     背景：
     .bg-success/info/danger/warning/dark...
     边框：
     .border/border-0/border-top/border-bottom/border-left/border-right 边框设置
     .border-success/info/danger/warning...边框颜色
     边框圆角：
     .rounded/rounded-0 边框圆角
     .rounded-top/bottom/left/right
     居中对齐：
     .m-auto 设置居中对齐
     边距：
     m-0/1/2/3/4/5/ml/mr/mt/mb 来设置外边距
     p-0/1/2/3/4/5/pl/pr/pt/pb 来设置内边距
     宽度：
     w-25/50/75/100 来设置元素的宽度
     高度：
     h-25/50/75/100 来设置元素的高度
      8.全局css样式-栅格布局（重点）
          web页面的布局方法有三种：
     (1)table布局
        优点：简单，容易控制
        缺点：语义错误，渲染效率低
     (2)div+css布局
        优点：语义正确，渲染效率高
        缺点：控制起来比较麻烦
     (3)Bootstrap的栅格布局
        优点：简单，容易控制，语义正确，渲染效率高（div+css）
        缺点：如果页面太复杂，不合适