Bootstrap

基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。

Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。

Bootstrap安装

第一种方式：直接引入文件的方式（用CDN的地址）

css：https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

js:https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js

https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js

第二种方式：模块化的包管理的方式 npm install bootstrap

**使用一下两个容器类**

.container类用于固定宽度并支持响应式布局的容器

.container-fluid类用于100%宽度，占据全部视口（viewport）的容器

**固定宽度**

.container 类用于创建固定宽度的响应式页面 (注意：宽度会根据屏幕宽度同比例放大或缩小)

**100%宽度**

.container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width始终为100%）：二者之间的共同点为，两者都可以将高度设置为auto，即自动模式，最大的不同就是宽度的设定上。

container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段一个阶段变化的。

container-fluid则是将宽度设定为auto,所以当缩放浏览器时，它会 保持全屏大小，始终保持100%的宽度。

Bootstrap网格系统

通过定义容器大小，平分12 份（也有平分成24 份或32 份，但12份是最常见的），再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。

**Bootstrap网格系统有以下6个类**

.col-    针对所有设备。

.col-sm-   平板-屏幕宽度等于或大于576px
.col-md-     屏幕宽度等于或大于 768px
.col-lg-        屏幕宽度等于或大于 992px
.col-xl-        屏幕宽度等于或大于 1200px
.col-xxl-      屏幕宽度等于或大于 1400px

网格系统规则

网格每一行需要放在设置了 .container (固定宽度) 或 .container-fluid (全屏宽度) 类的容器中，这样就可以自动设置一些外边距与内边距。

使用行（.row）来创建水平的列组（.col）。

内容需要放置在列中，并且只有列可以是行的直接子节点。

网格列是通过跨越指定的 12 个列来创建。 例如，设置三个相等的列，需要使用三个 .col-sm-4 来设置。

Bootstrap 5 使用 flexbox（弹性盒子）而不是浮动。 flexbox 的一大优势是，没有指定宽度的网格列将自动设置为等宽与等高列 。