Bootstrap

一、认识Bootstrap

Bootstrap 读音 /ˈbu:tstræp/ ，是一个非常受欢迎的前端框架，

Bootstrap是由HTML、CSS和JavaScript编写可复用代码的集合（包括全局样式、组件、插件等），它是一个前端框架，使用该框架能够快速开发出响应的网站（即适配PC、平板和移动端的网站）。

官方网站将其描述为。
1. 最流行的 HTML、CSS 和 JS 框架，用于在 Web 上开发响应式、移动优先的项目。(v3.x) 响应式页面：页面布局会随着屏幕尺寸的变化而自动调整布局，作用是适配各个屏幕。
2. Bootstrap 是功能强大、可扩展，且功能丰富的前端工具包。（v5.x）
3. Bootstrap 底层是使用Sass构建，支持定制（Sass、Color、CSS variable …）。（v5.x）
4. Bootstrap 中的网格系统、组件以及强大的JavaScript 插件可以让我们快速搭建响应式网站。(v5.x)

Bootstrap可以让我们免去编写大量的 CSS 代码（Write less），让我们更专注于网站业务逻辑的开发。
Bootstrap是开源免费的，可以从GitHub直接拿到源码

二、Bootstrap起源和历史

Bootstrap原名Twitter Blueprint，由Twitter公司的Mark Otto和Jacob Thornton编写。他们的本意是想制作一套可以让网页保持统一风格的前端框架。

在Bootstrap之前，Twitter团队在开发界面时，不同的项目组会使用不同的代码库。这样就会很容易导致界面风格不一致等问题，从而增加了后期的维护成本。

Mark Otto发现自己设计的工具比别人设计的更强大，能够做更多的事情。几个月之后，Mark Otto和一群开发人员做出了Bootstrap的原型。然后经过他们开发小组几个月之后的努力，大家把Twitter Blueprint改名为Bootstrap。

各个版本特点

在2011年8月19日将其作为开源项目发布。项目由Mark Otto、Jacob Thornton和核心开发小组维护。

2版本：在2012年1月31日发布Bootstrap 2，增加了十二列网格系统和响应式组件，并对许多组件进行了修改。
3版本：在2013年8月19日发布Bootstrap 3，开始将移动设备优先作为方针，并且开始使用扁平化设计，支持IE8-9。
1. container size 1170px
2. Four Class prefixes 支持ie lg， md， sm， xs
3. 使用 css 浮动和清除浮动
4. 没有 Cards 也不支持 inverse Table
4版本：在2018年1月7日发布Bootstrap 4，增加了Flexbox Grid、Cards、Spacing Utilities等。
1. container Size 1140px
2. Five Class prefixes col-xl , col-lg , col-md, col-sm, col-。
3. 布局使用的是 Flexbox
4. 支持卡片和 inverse Table
5版本：在2021年5月5日发布Bootstrap 5，增强Grid System、增强Form elements、Not Support for IE、Bootstrap Icons等
1. 从BootStrap5 之后就不支持ie了
2. Bootstrap 5 版本以前，Bootstrap是依赖jQuery的。

三、BootStrap的优缺点

BootStrap的优点

对于初学者简单易学

Bootstrap在Web开发人员中如此受欢迎的原因之一是它具有简单的文件结构，只需要懂HTML、CSS 和 JS 的基本知识，就可以上手使用Bootstrap，甚至阅读其源码，对于初学者来是说易于学习。
功能强大

Bootstrap拥有一个强大的网格系统，它是由行和列组成，我们可以直接创建网格，无需自行编写媒体查询来创建。
响应式布局，有很多额外的工具类

Bootstrap预定义很多响应式的类。例如，给图片添加.img-responsive类，图片将会根据用户的屏幕尺寸自动调整图像大小，更方便我们去做各个屏幕的适配。另外Bootstrap 还提供了很多额外的工具类辅助我们进行网页开发。
节省开发时间
Bootstrap框架提供的组件、插件、布局、栅格系统、响应式工具等等，可以为我们节省了大量的开发时间。
- 因此，我们可以很快的开发出一套同时适配PC、iPad和移动端的网站。
Bootstrap框架可以为各个平台和浏览器提供一致的展示效果，

例如在 Firefox 中与在 Chrome 中可以展示相同的效果。

Bootstrap的缺点

不适合高度定制类型的项目，因为Bootstrap具有统一的视觉风格，高度定制类的项目需要大量的自定义和样式覆盖。
Bootstrap的框架文件比较大(61KB JS + 159KB CSS)，资源文件过大会增加网站首屏加载的时间，并加重服务器的负担。
Bootstrap样式相对笨重，也会额外添加一些不必要的HTML元素，他会浪费一小部分浏览器的资源。

四、Bootstrap4的安装

安装方式

参照官方文档使用就好

Bootstrap 软件包内容

Popper: 提示框

五、Bootstrap4 框架使用

使用前重要配置信息

HTML5 文档类型（doctype 或 DOCTYPE），Bootstrap 要求文档类型（doctype）是 HTML5。

如果没有设置这个，就会看到一些古怪的、不完整的样式，因此，正确设置文档类型（doctype）能轻松避免这些困扰。
添加视口（viewport）
- Bootstrap 采用的是移动设备优先（mobile first）的开发策略，为了网页能够适配移动端的设备，需在 <head> 标签中添加viewport（视口）。
- 在移动端会把 layout viewport 的宽度设置为设备的宽，并且不允许用户进行页面的缩放。
```
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0,shrink-to-fit=no">
```

1、Bootstrap4 框架架构

功能模块

全局样式	布局	网格系统
全局样式	布局	网格系统
使用工具类	组件	响应式类
图标	定制	Reboot
Content	Popper	jQuery
javaScript插件	主题	…

2、屏幕尺寸的断点（Breakpoints）

Bootstrap的一大核心就是响应式，即开发一套系统便可以适配不同尺寸的屏幕。它底层原理是使用媒体查询来为我们的布局和页面创建合理的断点(Breakpoints)，然后根据这些合理的断点来给不同尺寸屏幕应用不同的CSS样式。

Bootstrap 4设了5个断点来构建响应式系统，
5个断点分别为 Extra-Small、Small、Medium、Large、Extra large
媒体查询是CSS的一项功能，它允许你根据浏览器的分辨率来应用不同的CSS样式，如 @media (min-width: 576px){}

Breakpoint	Class infix	Dimensions
Extra-Small 较小设备	None	<576px
Small 手机移动端	sm	>=576px
Medium paid 平板	md	>=768px
Large 小尺寸笔记本电脑	lg	>=992px
Extra large 普通尺寸笔记本电脑	xl	>=1200px

3、响应式容器Containers

Containers容器是 Bootstrap中最基本的布局元素，并且该布局支持响应式。在使用默认网格系统时是必需的。

Containers容器用于包含、填充，有时也会作为内容居中使用。容器也是可以嵌套，但大多数布局不需要嵌套容器。

Container 容器的类型

.container-fluid (常用-重点记：基础样式)：在所有断点处都是 width: 100%。

对于container设置不同的max-width， container-fluid百分比的方式看起来更加流畅

width: 100% / 某个断点的宽;   - 布局的宽
padding-right: 15px;  -  让包含的内容不会靠在布局右边缘
padding-left: 15px;  -  让包含的内容不会靠在布局左边缘
margin-right: auto;  - 布局居中
margin-left: auto;  - 布局居中

.container: 它在每个断点处会设置不同的max-width。
- 就是在container-fluid 的基础样式上添加 @media 媒体查询
.container-{breakpoint}, 默认是width: 100%，直到指定断点才会修改为响应的值。
- 在container-fluid 基础样式上添加 对应断点的媒体查询

容器类型 bearkpoint 表：注意 .container 和 .container-sm 效果相同

	Extra small<=	Small<540px	Medium<960px	large<1140px	Extra large > 1140px
.container	100%	540px	720px	960px	1140px
.container-sm	100%	540px	720px	960px	1140px
.container-md	100%	100%	720px	960px	1140px
.container-lg	100%	100%	100%	960px	1140px
.container-xl	100%	100%	100%	100%	1140px
.container-fluid	100%	100%	100%	100%	100%

4、（重要）网格系统（Grid system）

从Bootstrap2开始，网格系统从16 列转向12列网格，原因之一是12列比以前的16列系统更灵活。

将一个容器(row)被划分为12列网格，具有更广泛的应用，因为 12 可以被 12、6、4、3、2 、1整除，而 16列网格只能被 16、8、4 、2、1 整除，所以12列网格能够在一行中表示更多种列数组合情况。
16列网格一行分解为16、8、4、2和1份（添加3列需要添加额外的css）。

4.1. 网格系统的组成

网格系统是有**container、row、col三部分组成**，底层使用flexbox来布局，并且支持12列网格布局。

container 或 container-fluid是布局容器，网格系统中必用的容器（该容器也会应用在：内容居中或作为包含其它内容等）。

row是网格系统中的每一行，row是存放在container容器中。(4个)

如果row没有负值来抵消的话，那么嵌套网格系统越多，那么左右两边会多个多余的padding。

display: flex; //指定row为弹性布局（并支持12列网格布局）
flex-wrap: wrap; // 支持多行展示flex item。
margin-right: -15px; // 抵消container右边15px的padding。
margin-left: -15px; // 抵消container左边15px的padding。

col基础样式：col是网格系统的每一列，col是存放在row容器中

col 可以直接嵌套，row，因为row 会有 -15px外边距

//（重要所有col的基础值。）这里是共有基础值 col-{?} col-sm,md,lg,xl-{?}
position: relative; // 相对定位布局
width: 100%;
padding-right: 15px; // 让包含内容不会靠右边缘
padding-left: 15px; // 让包含内容不会靠左边缘。
}

col-{number}
- 就是 在col的基础样式 上添加 flex-grow: 1 均等分和根据 number的比例来进行添加 max-width/flex-basis：百分比的值
- 因为flex-basis 的优先级大于width 所以 当存在flex-basis 基础宽度，的情况下 width 就不会生效
```
//col单个属性独有的的值
flex-grow: 1 / flex:0 0 x%; //  自动拉伸布局或占百分比
max-width: 100% / max-width: x%; // 最大的宽
```
col-{sm, md, lg, xl}-{number}
- 同样根据 断点对应的媒体查询 在 col的基础样式上添加 flex-grow 和 max-width/flex-basis
  - 因为flex-basis 的优先级大于width 所以当存在flex-basis 基础宽度，的情况下 width 就不会生效
- 当不满足对应媒体查询样式的时候，就会恢复到基础样式
```
<div class="item main-target col-lg-3 col-md-6">
    <h4 class="info">电子银行</h4>
    <p class="description">助力机器人、汽车中控、电子屏、商用电视等</p>
</div>
```

4.2. 网格系统-嵌套(nesting)

Bootstrap的网格系统是可以支持嵌套的

当网格系统中的某一列嵌套一个网格系统的时候，嵌套的网络系统可以省略container容器。

在网格系统中的col是可以充当一个container-fluid容器来使用（因为对应的 col 类里也有对应的 padding）

4.3. 自动布局列col（auto layout）

col : 等宽列（Equal-width） 底层是 flex-grow: 1, max-width: 100%。该类网格系统仅用flexbox布局。
col-auto : 列的宽为 auto(Variable width content), 底层是 flex: 0 0 auto; width: auto
(重点) col-{num}: 指定某个列的宽（支持12列网格）。底层是 flex: 0 0 x%，max-width: x%

会根据内容的大小来决定，col的宽度

    //**(重点)**  基本样式 根据col- ？ 来添加flex-base和max-width的值.
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;

4.4. 网格系统-响应式类（Responsive Class）

5个断点(Breakpoints)

none(xs) : <576px 、
sm : >=576px、
md : >=768px、
lg : >=992px、
xl : >=1200px

响应式列布局的类

例如：c元素设置col-md之后 lg 和 xl 都会有影响

col-sm : 默认 width:100%，当屏幕>=576px该类启用（flexbox布局）, 启用： flex-grow: 1，max-width: 100%。
col-md: 默认 width:100%，当屏幕>=768px该类启用（flexbox布局），启用： flex-grow: 1，max-width: 100%。
col-lg : 默认 width:100%，当屏幕>=992px该类启用（flexbox布局），启用： flex-grow: 1，max-width: 100%。
col-xl : 默认 width:100%，当屏幕>=1200px该类启用（flexbox布局）, 启用： flex-grow: 1，max-width: 100%。

常用类

col-sm-{num} : 默认 width:100%，当屏幕>=576px该类启用 (支持12列网格), 启用： flex: 0 0 x%。
col-md-{num} : 默认 width:100%，当屏幕>=768px该类启用 (支持12列网格), 启用： flex: 0 0 x%。
col-lg-{num} : 默认 width:100%，当屏幕>=992px该类启用 (支持12列网格), 启用： flex: 0 0 x%。
col-xl-{num} : 默认 width:100%，当屏幕>=1200px该类启用 (支持12列网格) , 启用： flex: 0 0 x%。

5、(重要) Bootstrap的响应式工具类-Display

同样，当满足断点关键字对应的媒体查询的时候，就会显示对应的样式，媒体查询同样是覆盖的

隐藏元素可以给某个元素添加 .d-none 类或 .d-{sm,md,lg,xl,xxl}-none 类中的任何一个。
显示元素可以给某个元素添加 .d-block 类或 .d-{sm,md,lg,xl,xxl}-block 类中的任何一个。

尺寸表

屏幕尺寸	类
在所有尺寸的屏幕上隐藏	.d-none
只在xs尺寸的屏幕上隐藏 <576px	.d-none .d-sm-block
只在sm尺寸的屏幕上隐藏 >576px	.d-sm-none .d-md-block
只在md尺寸的屏幕上隐藏 >768px	.d-md-none .d-lg-block
只在lg尺寸的屏幕上隐藏 >992px	.d-lg-none .d-xl-block
只在xl尺寸的屏幕上隐藏 >1200px	.d-xl-none

屏幕尺寸	类
在所有尺寸的屏幕上显示	.d-block
只在xs尺寸的屏幕上显示	.d-block .d-sm-none
只在sm尺寸的屏幕上显示	.d-sm-none .d-md-block .d-md-none
只在md尺寸的屏幕上显示	.d-md-none .d-lg-block .d-lg-none
只在lg尺寸的屏幕上显示	.d-lg-none .d-xl-block .d-xl-none
只在xl尺寸的屏幕上显示	.d-xl-none .d-xl-block

6、实用的工具类（Utility classes）

快速浮动（Float） float-left float-right
文本（Text） text-left、text-right、text-center text-{sm、md、lg、xl}-left
边框 borde border-top border-left … border border-primary border-success
截断文本，文字溢出，看官方文档 text-truncate

6、可访问性-辅助类（了解）

屏幕阅读器的适配（专门针对残障人士设备的适配） .sr-only .sr-only 类可以对屏幕阅读器以外的设备隐藏内容，即对屏幕阅读辅助器可见。 .sr-only-focusable .sr-only 和 .sr-only-focusable 联合使用的话可以在元素有焦点的时候再次显示出来（例如，使用键盘导航的用户）。对于需遵循可访问性的网站来说是很有必要的。增强可访问性的辅助类（针对残障人使用的设备的适配，同时增强语义化） role=”xxx” : 定义用户界面元素的类型，作用增强Web可访问性，使残障人士可以更好的使用Web内容。 aria-*=”xxx”: 增强可访问性，当与role=“xxx”结合使用时，当元素的状态和属性发生变化时会触发辅助技术发出通知，并将信息传达给用户。

7、Bootstrap组件

查官方文档

六、案例(重要)

重点：切换思想

**相同条件 ** 判断切换

//初始化界面要触发
let flagStr = "none";
window.addEventListener("resize", function() {
      let slideStr = ``
      flag = document.documentElement.clientWidth < 768
      //这里flag判断的时候，flagStr 还没有来的急修改负值。所以flag：true 且 flagStr 和flag判断不符合的时候就一定是做了切换

      if(flag && flagStr === "big" || !flag && flagStr === "small" || flagStr === "none") {

                 arr.forEach((el, index) => {
                      const imgUrl = flag ? el.samll : el.big
                      const active = index===0 ? "active" : "";
                      slideStr += `<div class="carousel-item ${active}">
                                  <img src="${imgUrl}" class="d-block w-100" alt="...">
                                  </div>`
                  })
            flagStr = document.documentElement.clientWidth < 768 ? "small" : "big";

      }

  })

  //初始化页面触发事件
  var event = new Event('resize')
  window.dispatchEvent(event)
  $(".carousel").carousel('cycle')