今天完成的事

1 介绍 Bootstrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架

2 使用

     <meta name="viewport">

     <link rel="stylesheet" href="css/bootstrap.min.css">

     <script src="css/jquery-3.3.1.slim.min.js"></script>

     <scriptsrc="js/bootstrap/4.1.1/js/bootstrap.min.js""></script>

3  初始化

     .selector-for-some-widget {

       box-sizing: border-box;}

4 容器

    .container或.container-fluid

5 响应式的分界点

    媒体查询  @media (min-width: 576px) and (max-width: 767px) { ... }

6 栅格系统

    container   row  col-sm

    .col 小.col-sm-*、中.col-md-*、大.col-lg-*、特大.col-xl-*

7 布局对齐

    flexbox布局可以轻松的实现DIV空间布局的垂直、水平对齐。

        垂直对方式

    上对齐   align-items-start      align-self-start

    中间对齐 align-items-center     align-self-center

    下对齐   align-items-end        align-self-end

        水平对齐方式

    左对齐         justify-content-start

    居中对齐       justify-content-center

    右对齐         justify-content-end

    间隔相等对齐帖齐  justify-content-around

    两端对齐帖齐      justify-content-between

8 间隙沟槽(gutters)清除

        容器为 no-gutters

       .no-gutters {

        margin-right: 0;margin-left: 0;> .col,

        > [class*="col-"] {padding-right: 0; padding-left: 0;}}

9媒体对象

    ？？？？ 

10 响应式图片

     给图片添加.img-fluid样式，或定义max-width: 100%、height:auto;样式

11  组件

  明天计划写完任务八  第一个界面