关于BootStrap4
  1. BootStrap是当前世界最受欢迎的响应式、移动设备优先的门户和应用前端框架
  2. 提供高质量的HTML、CSS以及JavaScript，让我们的web工程项目变得无比简单，包括官方的CDN启动器服务。
浏览器与设备兼容

支持的浏览器

  1. BootStrap几乎支持所有主流操作系统上个浏览器的最新稳定版本
  2. 支持列表：
    BootStrap：基础学习_html

支持移动设备

  1. BootStrap支持主流移动OS的默认浏览器的最新版本
  2. 支持列表
    BootStrap：基础学习_响应式_02

支持桌面浏览器

  1. 支持大多数桌面浏览器的最新版本
  2. 支持列表
    BootStrap：基础学习_响应式_03
快速上手BootStrap4

基本模板

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <title>Hello, world!</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>

使用注意

  1. HTML5 doctype头部规范
    HTML5标准的 doctype 头部定义是首要的，否则会导致样式失真

    <!doctype html>
<html lang="zh-cn">
...
</html>

  2. 响应式meta标签
    为了确保所有的设备的渲染和触摸效果，必须在网页的区添加响应式的视图标签

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  3. 盒尺寸
    为了更直观地用BootStrap的尺寸规范(而不受各浏览标准影响)，将全局box-sizing的值由默认的content-box重定义为border-box，以保证padding不会影响元素的最后计算宽度。
    恢复原尺寸

    .selector-for-some-widget {
      box-sizing: content-box;
}
容器（Container）

概念

  1. Container容器是窗口布局的最基本元素，BootStrap推荐所有样式都定义在.container或.container-fluid容器之中
  2. 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口
  3. 图示
    BootStrap：基础学习_C_04

实操

  1. container：流式容器，自适应大小。

  2. container-fluid：固定宽度容器，始终100%。

  3. 可以用媒体查询自定义container：

    @media (max-width: 575px) {
            .container-self{
                background-color: red;
                width: 100%;
            }
        }

        /*小屏幕*/
        @media (min-width: 576px) and (max-width: 767px){
            .container-self{
                background-color: green;
                width: 540px;
            }
        }

        /*中等屏幕*/
        @media (min-width: 768px) and (max-width: 991px){
            .container-self{
                background-color: blue;
                width: 720px;
            }
        }

        /*大屏幕*/
        @media (min-width: 992px) and (max-width: 1199px){
            .container-self{
                background-color: purple;
                width: 960px;
            }
        }

        /*超大屏幕*/
        @media (min-width: 1200px){
            .container-self{
                background-color: goldenrod;
                width: 1140px;
            }
        }

BootStrap：基础学习_C_05

栅格系统

概念

  1. Bootstrap包含了一个强大的移动优先的网格系统，它是基于一个12列的布局、有5种响应尺寸(对应不同的屏幕)
  2. 支持Sass mixins自由调用，并结合自己预定义的CSS、Js类，用来创建各种形状和尺寸的布局。

原理

  1. 栅格系统提供了集中内容居中、水平填充网页内容的方法，使用.container作为父盒子
  2. 内部由行（.row）和列（.col）组成
    ① 每列都有水平的padding值，行则用于控制它们之间的间隔
    ② 同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验
  3. 网页开发者的呈现内容必须放置在列（.col-*）中，而且只有列可以是行的直接子元素，否则都是违法的，不可以在.col-*以上添加呈现内容
  4. .col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4
  5. .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响
  6. 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

栅格选项

  1. 图示
    BootStrap：基础学习_C_06
  2. 使用

对齐方式

  1. 垂直对齐
    align-items-start
align-items-center
align-items-end
  2. 水平对齐
    justify-content-start
justify-content-center
justify-content-end
justify-content-around
justify-content-between
  3. 网页开发者的呈现内容必须放置在列（.col-*）中，而且只有列可以是行的直接子元素，否则都是违法的，不可以在.col-*以上添加呈现内容
  4. .col-*后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4
  5. .col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响
  6. 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

间隙沟槽(gutters)清除

  1. 概念
    BootStrap默认的栅格和列间有间隙沟槽，一般是左右-15px的margin或padding处理，可以使用.no-gutters类来消除它，这将影响到.row行、列平行间隙及所有子列。
  2. 使用
    <div class="container">
    <div class="row align-items-center no-gutters">
        <div class="col-md-3">第一部分</div>
        <div class="col-md-3">第二部分</div>
        <div class="col-md-3">第三部分</div>
        <div class="col-md-3">第四部分</div>
    </div>
</div>

排序和偏移

  1. Class顺序重定义
    1）使用 .order-* class选择符，可以对DIV空间进行 可视化排序
    2）系统提供了.order-1到.order-12，12个级别的顺序，在五种浏览器和设备宽度上都能生效
  2. 偏移
    1）使用响应式的.offset-*栅格偏移方法
    常用
    2）使用边界处理实用程序，它内置了诸如.ml-*、.p-*、.pt-*等实用排工具
    不常用
内容

标题

  1. 兼容所有HTML标题集，涵括从 <h1> 到 <h6>,的六种标题展现

  2. CSS选择器也支持以.h1 – .h6 方式引用
    注意：不会被视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-译者注）

  3. 自定义标题备注：text-muted

  4. 显式标题

    <h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

  5. Lead中心内容
    通过应用 .lead样式，可以定义一个中心段落，用于提示这是中心内容或重要内容。

  6. code显示代码

    <code>JavaScript</code>

图片

  1. 概念
    BootStrap为图片添加了轻量级的无干扰样式和响应式行为，因此引用图片可以更加方便且不会轻易撑破其它元素

  2. 响应式图片
    ① 在Bootstrap中，给图片添加.img-fluid样式
    ② 定义max-width: 100%、height:auto;样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放

  3. 缩略图处理
    使用.img-thumbnail属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式

  4. 图像对齐处理

  5. Picture标签
    ① 概念
    HTML5标准提供了一个全新的<picture> 元素，它可以为 <img>指定多个<source> 定义，请确保在<img> 标签里使用使用.img-* CSS样式进行定义绑定，而不是仅仅认为引用了<img> 就达成了
    ② 使用
    <pictrue>元素可实现图片在不同屏幕下的针对性响应式

    ​<picture>
    <source srcset="img/s1.jpg"  media="(min-width: 900px)" >
    <source srcset="img/s2.jpg"  media="(min-width: 700px)">
    <source srcset="img/s3.jpg" media="(min-width: 500px)">
    <img src="img/timg.jpg" alt="这是当浏览器不支持picture标签时显示的图片">
</picture>

表格

组件 配置自定义按钮

网址

代码

.btn-lk {
  color: #ffffff;
  background-color: #8330F0;
  border-color: #9318F2;
}

.btn-lk:hover,
.btn-lk:focus,
.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {
  color: #ffffff;
  background-color: #9146F2;
  border-color: #9318F2;
}

.btn-lk:active,
.btn-lk.active,
.open .dropdown-toggle.btn-lk {
  background-image: none;
}

.btn-lk.disabled,
.btn-lk[disabled],
fieldset[disabled] .btn-lk,
.btn-lk.disabled:hover,
.btn-lk[disabled]:hover,
fieldset[disabled] .btn-lk:hover,
.btn-lk.disabled:focus,
.btn-lk[disabled]:focus,
fieldset[disabled] .btn-lk:focus,
.btn-lk.disabled:active,
.btn-lk[disabled]:active,
fieldset[disabled] .btn-lk:active,
.btn-lk.disabled.active,
.btn-lk[disabled].active,
fieldset[disabled] .btn-lk.active {
  background-color: #8330F0;
  border-color: #9318F2;
}

.btn-lk .badge {
  color: #8330F0;
  background-color: #ffffff;
}
实例：利用BootStrap制作全平台响应式站点