1.1 Bootstrap 简介：什么是 Bootstrap?
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而avaScript负责页面元素的响应，Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简洁灵活，使得 Web 开发更加快捷。Bootstrap5 目前是 Bootstrap 的最新版本，利用提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app。浏览器兼容性: Bootstrap5 兼容所有主流浏览器 (Chrome、 Firefox、Edge、Safari和 Opera) 。如果您需要支持 IE11 及以下版本，请使用 Bootstrap4或 Bootstrap3。
1.2 Bootstrap安装
1.2.1 官网下载 Bootstrap5 资源库
下载下来的文件是压缩包，解压之后可以看到文件的结构。下载的文件包括: 编译并压缩过的 CSS 集成包 编译并压缩过的JavaScript 插件 下载并解压后，将看到文件夹中包含如下文件:
bootstrap/ ├── css/ │ ├── bootstrap-grid.css │ ├── bootstrap-grid.css.map │ ├── bootstrap-grid.min.css │ ├── bootstrap-grid.min.css.map │ ├── bootstrap-grid.rtl.css │ ├── bootstrap-grid.rtl.css.map │ ├── bootstrap-grid.rtl.min.css │ ├── bootstrap-grid.rtl.min.css.map │ ├── bootstrap-reboot.css │ ├── bootstrap-reboot.css.map │ ├── bootstrap-reboot.min.css │ ├── bootstrap-reboot.min.css.map │ ├── bootstrap-reboot.rtl.css │ ├── bootstrap-reboot.rtl.css.map │ ├── bootstrap-reboot.rtl.min.css │ ├── bootstrap-reboot.rtl.min.css.map │ ├── bootstrap-utilities.css │ ├── bootstrap-utilities.css.map │ ├── bootstrap-utilities.min.css │ ├── bootstrap-utilities.min.css.map │ ├── bootstrap-utilities.rtl.css │ ├── bootstrap-utilities.rtl.css.map │ ├── bootstrap-utilities.rtl.min.css │ ├── bootstrap-utilities.rtl.min.css.map │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap.rtl.css │ ├── bootstrap.rtl.css.map │ ├── bootstrap.rtl.min.css │ └── bootstrap.rtl.min.css.map └── js/├── bootstrap.bundle.js├── bootstrap.bundle.js.map├── bootstrap.bundle.min.js├── bootstrap.bundle.min.js.map├── bootstrap.esm.js├── bootstrap.esm.js.map├── bootstrap.esm.min.js├── bootstrap.esm.min.js.map├── bootstrap.js├── bootstrap.js.map├── bootstrap.min.js└── bootstrap.min.js.map
下载了预编辑的Bootstrap解压出来得到了Bootstrap文件夹，只要把html与Bootstrap文件夹放在一起，然后用相对路径引用bootstrap.bundle.min.js和 bootstrap.min.css 文件即可 1、下载已编译版is和css文件，解压缩后将目录改名称为bootstrap5，放在你的网站目录。 2、在网页<head> </head>之间，添加<link href="/static/bootstrap5/css/bootstrap,min,css”> 3、在网页</body>之前，添加<script src="/static/bootstrap5/is/bootstrap,bundle,min,is" x</script> Bootstrap 自带的大部分组件都需要依赖Javascript 才能起作用。将<script>标签粘贴到页面底部，并且是在</body>标签之前，就能起作用了。 注意: 要确保bootstrap.min.css和bootstrap.bundle.min.js确实在这个路径.
1.2.2 Bootstrap5的html模板
<!DOCTYPE htm1> <htm1><head><meta charset="utf-8"><meta name="viewport" content="width=device-width， initial-scale=1"><meta name="keywords" content=""><meta name="description" content=""><!-- Bootstrap 的 CSS 文件 --><link href="./css /bootstrap ,min.css" rel="stylesheet"><title></title></head><body><!-- 包含 Popper 的 Bootstrap 集成包 --><script src="./js/bootstrap .bundle.min.js"></script></body></htm1></body> </html>
响应式布局相关的 标签 Bootstrap 采用的是 移动设备优先 (mobile first) 的开发策略，因此，我们首先为移动设备优化代码，然后根据需要并利用 CSS 媒体查询功能来缩放组件。为了确保所有设备都能支持正确的染和触缩放，请务必在 ·标签中 添加让 viewport(视口)支持响应式布局的标签
<meta name="viewport" content="width=device-width， initia-scale=1">
1.2.3 Bootstrap 5 CDN
<!-- 新 Bootstrap5 核心 CSS 文件 --> <link rel="stylesheet href="https://cdn staticfile,ora/twitter-bootstrap/5,1.1/css /bootstrap ,min,css"> <!-- 最新的 Bootstrap5 核心 Javascript 文件 --> <script src="https://cdn,staticfile,org/twitter-bootstrap/5,1.1/js/bootstrap ,bundle,min, js"></script>
1.2.4 Bootstrap5 容器
容器是Bootstrap一个基本的构建块, 它包含、填充和对齐给定设备或视口中的内容 Bootstrap 需要一个容器元素来包裹网站的内容
我们可以使用以下两个容器类:
.container 类用于固定宽度并支持响应式布局的容器
.container-fluid 类用于 100% 宽度，占据全部视口 (viewport) 的容器。
固定宽度
.container 类用于创建固定宽度的响应式页面 注意: 宽度(max-width) 会根据屏幕宽度同比例放大或缩小。
| 超级小屏幕<576px | 小屏幕>=2576px | 中等屏幕>=2768px | 大屏幕>=2992px | 特大屏幕>=21200px | 超级大屏幕>=21400px | |
|---|---|---|---|---|---|---|
| max-width | 100% | 540px | 720px | 960px | 1140px | 1320px |
100% 宽度 .container-fluid 类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度(width 始终为 100%):二者之间的共同点为，两者都可以将高度设置成auto，即自动模式。最大的不同就是宽度的设定上。
container根据屏幕宽度利用媒体查询，已经设定了固定的宽度，作用为阶段性的改变宽度，所以在改变浏览器的大小时，页面是一个阶段个阶段变化的。 container-fluid则是将宽度设定为auto，所以当缩放浏览器时，它会保持全屏大小，始终保持100%的宽度。
响应式容器 可以使用 .container-sm|mdllglxl类来创建响应式容器。
容器的 max-width 属性值会根据屏幕的大小来改变。
| Class | 超级小屏幕<576px | 小屏幕>=576px | 中等屏幕>=768px | 大屏幕>=992px | 特大屏幕>=1200px | 超级大屏幕>=1400px |
|---|---|---|---|---|---|---|
| .container-sm | 100% | 540px | 720px | 960px | 1140px | 1320px |
| .container-md | 100% | 100% | 720px | 960px | 1140px | 1320px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px | 1320px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px | 1320px |
| .container-xx1 | 100% | 100% | 100% | 100% | 100% | 1320px |
[我耀学IT] Patience is key in life
<div class="container-sm">.container-sm</div> <div class="container-md">.container-md</div> <div class="container-]g">.container-1g</div> <div class="container-x">.container-x1</div> <div class="container-xx1">.container-xx1</div>
1.3 Bootstrap5 网格系统
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统，随着屏幕或视口(viewport) 尺寸的增加，系统会自动分为最多 12列。我们也可以根据自己的需要，定义列数。 Bootstrap 5 的网格系统是响应式的，列会根据屏幕大小自动重新排列。 请确保每一行中列的总和等于或小于 12。 Bootstrap 5 网格系统有以下 6 个类:
-
.col- 针对所有设备。
-
.col-sm- 平板 屏幕宽度等于或大于 576px。
-
.col-md- 桌面显示器- 屏幕宽度等于或大于 768px。
-
.col-lg- 大桌面显示器- 屏幕宽度等于或大于 992px。
-
.col-xl- 特大桌面显示器 - 屏幕宽度等于或大于 1200px。
-
.col-xxl- 超大桌面显示器 屏幕宽度等于或大于 1400px。
1.3.1 网格系统规则
Bootstrap5 网格系统规则:
-
网格每一行需要放在设置了 ,container (固定宽度)或 ontainer-fluid(全宽度)类的容器中，这样就可以自动设置一些外边距与内边距。
-
使用行来创建水平的列组。
-
内容需要放置在列中，并且只有列可以是行的直接子节点
-
预定义的类如 .row 和.colsm-4 可用于快速制作网格布局
1.3.2 Bootstrap 5 网格的基本结构
等宽响应式列
<!-- 创建最多 12 列的响应式行 --> <div class="container"><div cTass="row"><div class="co]-md-1">1</div><div class="co1-md-1">2</div><div class="co1-md-1">3</div><div class="co1-md-1">4</div><div class="co1-md-1">5</div><div class="co1-md-1">6</div><div class="co1-md-1">7</div><div class="co1-md-1">8</div><div class="co1-md-1">9</div><div class="co1-md-1">10</div><div class="co1-md-1">11</div><div class="co1-md-1">12</div></div> </div>
要进行栅格系统操作，首先就要创建栅格系统的容器。 “container”和“row”共同组成栅格容器，“row"代表的就是一行。
创建栅格容器后，设置名为col-md-的div，当尾数为1时，表示每个div的宽度占1/12，所以每行最多可以放置12个子div.
如果超过12个，则会在下一行显示。
继续增加下面的代码，将一行显示为3列
<div class="row"><div class="co1-md-4">1</div><div class="co1-md-4">2</div><div cass="co1-md-4">3</div> </div>
这里的class为col-md-4.表示占整个宽度的4/12，即每个div占1/3宽度。这里的colmd是适应中等屏幕的，即屏幕宽度小于768px 时，四个列将会上下堆叠排版。
不等宽响应式列
<div class="row"><div class="co1-sm-4">1-4</div><div class="co]-sm-8">5-12</div> </div>
在移动设备上，即屏幕宽度小于 576px 时，两个列将会上下堆叠排版
