2 Bootstrap4的基本架构
2.1 响应开发技术
1、响应式开发的概念
响应式网站是指可以兼容不同的终端，如笔记本电脑、安卓手机、苹果手机和iPad等，不用为每一个分辨率的设备做一个特定版本的网站。这种网站的开发方式就称为响应式开发。
2、响应式开发的流程
步骤1：将下载好并完成解压缩的Bootstrap源码文件中的CSS和JS文件夹拷贝到新建的项目中。
步骤2：添加标签，代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
</body>
</html>
步骤3：在HTML中引用bootstrap.min.css文件，代码如下：
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
步骤4：在引用Bootstrap中的JavaScript文件时，需要将jQuery文件也一同引入,代码如下：
<!-- jQuery文件，务必在bootstrap.min.js之前引入 -->
<link rel="stylesheet" type="text/css" href="js/jquery-3.4.1.slim.min.js">
<!-- 再引入Bootstrap.min.js文件 -->
<link rel="stylesheet" type="text/css" href="js/bootstrap.min.js">
步骤5：解决IE9以下浏览器兼容的问题，可以通过在标签的前面添加以下代码来解决
<!--[if it IE 9]<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script><!endif]-->
3、响应式布局结构
简单来说，响应式布局就是为了能够兼容多个平台或不同的终端，从而避免开发人员进行重复的工作，所以响应式布局结构的主要任务就是解决这个问题。在Bootstrap中最重要的属性就是viewport，这个属性可以控制网页在不同终端显示的效果。viewport相关属性描述：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--
width：设置viewport的宽度，为一个正整数或“width-device”（表示整个屏幕的宽度）。
initial-scale：设置页面的初始缩放值，为一个浮点数
minimum-scale：允许用户设置的最小缩放值，为一个浮点数
maximum-scale：允许用户设置的最大缩放值，为一个浮点数
height：设置viewport的高度，很少使用
user-scalable：是否允许用户进行缩放，值为“no”或“yes”，“no”代表不允许，“yes”则代表允许
-->
4、设计响应式网站
页面可以根据不同的终端进行自适应的网站叫作响应式网站。
（1）不同终端的页面宽度
在进行开发响应式网站之前，我们需先对当前各种终端的页面宽度（逻辑像素）进行一些简单的了解。
◆ 移动端：320px，375px，414px……
◆ ipad端：768px，834px，1024px……
◆ PC端：1280px，1440px，1920px……
根据上面的数据，虽然还有其他页面斯宾诺莎的终端，但是我们仍然可以将终端类型进行大致的划分，比如，移动端是320px768px，ipad是768px1280px，PC端是1280px以上.
（2）media媒体查询
media媒体查询可以让我们根据设备显示器的特性为其设定CSS样式，由媒体类型和一个或多个检测媒体特性的条件表达式组成。使用media媒体查询可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。
media媒体查询的使用方法分为两种，既作为CSS外链引入和直接在CSS中使用。
（a）作为CSS外链引入，代码如下：
<link rel="stylesheet" media="screen and (min-width:768px)" type="text/css" href="css/style.css">
（b）直接在CSS中使用，代码如下：
@media screen and (min-width: 768px) and (max-width: 1280px){
/*CSS属性：CSS属性值*/
}
media媒体查询的扩展用法有如下几种：
方法一：
@media only/not screen and (min-width: 768px) and (max-width: 1280px){ }
only screen代表只在彩色屏幕上生效，但是实际上网页的运行肯定是在彩色屏幕上的，所以该属性一般来说可以省略。
not的意思是屏幕宽度不在768px~1280px范围内时生效。
方法二：
@media screen and (width: 768px),(width: 1280px){}
两个宽度使用逗号隔开，代表"或者"的意思。
下面是一些常用的media媒体查询会使用到的属性，用法与前面的讲解一样。如下表所示。
| 属性 | 全理属性值 | 是否支持max/min说明 | |
|---|---|---|---|
| –width | 带单位的宽度值 | 是 | 匹配浏览器的宽度 |
| height | 带单位的 | 长度值 | 是 |
| aspect-radio | 比例值，如16/9 | 是 | 匹配浏览器的宽度和高度的比例值 |
| device-width | 带单位的宽度值 | 是 | 匹配设备分辨率的宽度值 |
| device-height | 带单位的长度值 | 是 | 匹配设备分辨率的高度值 |
| device-aspect-radio | 比例值，如16/9 | 是 | 匹配设备分辨率的宽度和高度的比例 |
2.2 Bootstrap的栅格布局
Bootstrap内置了一套响应式、移动设备优先的流式栅格系统，随着屏幕设备或视口尺寸的增加，系统会自动分为最多12列。
栅格实际上就是风格，所以页面的布局实际上是通过一系列的行和列来组合创建的，那么在这里需要学习以下两个概念。
容器：“行（row）”，必须包含在"container（固定宽度）"或"container-fluid（100%宽度）"中，以便为其赋予合适的排列（alignment）和内补（padding）。
rem：实际上是设置列的高度的属性，rem的值是整数，代表的高度是rem值 *字体像素大小。
2.2.1 布局原理
1、布局容器
容器是窗口布局的最基本元素，我们推荐所有样式都定义在.container或.container-fluid容器之中-- 这是启用整个栅格系统必不可少的前置条件，它们分别对应选择一个响应式的、固定宽度的容器，或者选择一个流式自适应浏览器或容器最大合法宽度的窗口（意味着任何时候它的宽度总是100%）。
.container类用于固定宽度并支持响应式布局的容器，容器可以被嵌套，但是大多数布局并不需要这么做（最少层次的嵌套构建出的网页更优雅-译者注）
.container-fluid 类，可以使div宽度扩展到整个宽度（如果没有被其它CSS容器包含，则应是浏览器运行时的宽度，否则应是父容器中允许的最大宽度，一般视为100%宽度）。
2、Bootstrap4栅格机制原理
Bootstrap的网格系统使用一系列div容器的行、列来布局和对齐内容，不同于旧版3.0，4.0是完全基于flexbox流式布局构建的，完全支持响应式标准。下面的示例，可以让我们深入了解网格如何组合在一起。
代码：
<div class="container">
<div class="row">
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
<div class="col-sm">
三分之一空间占位
</div>
</div>
</div>
上面的例子使用BootStrap预定义的栅格系统，演示了在.container容器内建立了三个等宽的列，并且分别兼容在small(极窄宽度网页)、medium(中等宽度网页)、large(宽网页)、extra large(超宽网页)四种设备类型-即无论网页宽度如何，这三个列都是横着呈现的。
工作原理：
◆ 栅格系统提供了集中内容居中、水平填充网页内容的方法，.container实现固定的宽度并居中呈现，.container-fluid实现全宽度，并和其它网格实现对齐(译者注)。
◆ 行(.row)是列(.col-)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。
◆ 网页开发者的呈现内容必须放置在列(.col-中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-以上添加呈现内容。
◆ 这一切都要感谢flexbox流式布局，从而使我们不需要指定列的宽度(旧版Bootsrap3是采用严格宽度定义来实现的)就能实现网页自动等宽排列，比如我们在.container中置入初始化的四个.col-sm就能实现各自25%宽度并左对齐形成一行的排列。
◆ .col-后面有不同的数字，如.col-sm-4或.col-xl-12，这些css类后面的数字用于表明定义div空间想要占用列的数量，每行最多有12列。如果你想用三个等宽的列，则取12的三分之一，即.col-sm-4就是正确的(后文会有详细的介绍)。
◆ .col-的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
◆ 列具有水平padding定义，用于创建列与列之的间隙。
◆ .row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即:
<div class="row no-gutters"></div>
◆ 总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-、中.col-md-、大.col-lg-、特大（大、特大也可以称为宽、超宽）.col-xl-。
◆ 栅格断点的媒体查询基于宽度的最小值，意味着它们应用到某一等级以及这一等级之上的所有（如.col-sm-4的的定义可以在小型、中型、宽、超宽设备上呈现，但不适用于能在超小型.col-sx上呈现）。
◆ 用户不需要自行定义网格，可以直接使用系统预定义的栅格类（如.col-4）或采用Sass mixins来进行更多的语义标记满足开发需要。
3、栅格选项
Bootstrap使用ems或rems来定义大多数属性的规格大小、px用于全局层面网格断点和容器宽度（因为浏览器和设备的宽度是以像素px为单位，且不会随字体大小而变化）。其栅格选项如下表所示：
2.2.2 自动布局列
利用栅格断点特性进行排版，可以简化列的大小，而不需要批定显式的列宽，如强制写为：.col-sm-6。
1、等宽布局 （.col）
效果：
代码：
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
以上代码，展示了一行两列与一行三列的布局，从xs（如上表如见，实际上并不存在xs这个空间命名，是以.col表示，下同不再注）到xl（即.col-xl-*）所有设备上都是等宽并占满一行，只要简单的应用.col就可以完成。
2、等宽多行 (.w-100)
创建跨多个行的等宽列，方法是插入.w-100要将列拆分为新行。.w100似乎与.clearfix有时可以达到同样的网页效果。
效果：
代码：
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
3、设置一列宽度
Flexbox网格列的自动布局还意味着您可以设置一列的宽度，并使同级列在其周围自动调整大小。您可以使用预定义的网格类，网格混合或内联宽度。请注意，无论中间列的宽度如何，其他列都会调整大小。
效果：
代码：
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (更宽-12格中占6格，其它6格另外两列平分)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (更宽-12格中占5格,其它7格另外两列平分-不论奇偶都能达成)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
4、可变宽度的弹性空间
使用 col-{breakpoint}-auto 断点方法，可以实现根据其内容的自然宽度来对列进行大小调整。
效果：
代码：
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
2.2.3 布局对齐
1、水平对齐
水平对齐是通过在行的
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
左对齐
</div>
<div class="col-4">
左对齐
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
居中对齐
</div>
<div class="col-4">
居中对齐
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
右对齐
</div>
<div class="col-4">
右对齐
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
间隔相等对齐
</div>
<div class="col-4">
间隔相等对齐
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
两端对齐
</div>
<div class="col-4">
两端对齐
</div>
</div>
</div>
2、垂直对齐
和水平对齐类似，垂直对齐是通过添加".align-items-类型"类实现的，但是在垂直布局中只有start、center和end三种类型。代码如下：
<div class="container">
<div class="row align-items-start">
<div class="col">
靠上对齐
</div>
<div class="col">
靠上对齐
</div>
<div class="col">
靠上对齐
</div>
</div>
<div class="row align-items-center">
<div class="col">
上下居中对齐
</div>
<div class="col">
上下居中对齐
</div>
<div class="col">
上下居中对齐
</div>
</div>
<div class="row align-items-end">
<div class="col">
靠下对齐
</div>
<div class="col">
靠下对齐
</div>
<div class="col">
靠下对齐
</div>
</div>
</div>
2.2.4排序和偏移
1、排序
在进行Bootstrap的栅格布局时，我们可以通过添加".order-数值"这个类进行栅格排序，提供了.order-1到.order-12个级别的顺序，还可以使用.order-first，快速更改一个顺序到最前面，代码如下：
<div class="container">
<div class="row">
<div class="col">
第1列-未定义序号，位置不变。
</div>
<div class="col order-12">
第2列，定义order-12序号，排最后。
</div>
<div class="col order-1">
第3列，定义order-1序号，排在第1列，但受第1列位置不变影响，排到第2列
</div>
<div class="col order-first">第4列，快速更改顺序到最前面</div>
</div>
2、偏移
可以使用两种方式进行列偏应：
（1）使用响应式的.offset-*栅格偏移方法。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
（2）使用边界处理实用程序，它内置了诸如.ml-、.p-、.pt-*等实用排工具。
在BootStrap V4中，你可以使用.ml-auto与.mr-auto来强制隔离两边的距离，实现类水平隔离的效果。
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4
">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3
">.col-md-3 .ml-md-auto</div>
<div class="col-md-3
">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto
">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
