前言
本文讲解了Bootstrap 响应式UI框架 的基本使用与规则，如果本文对你所帮助，请三连支持博主，先赞后看养成习惯。
以下是本篇文章正文内容，下面案例可供参考
Bootstrap介绍
顾名思义 就是一套架构，它有一套完整的网页功能解决方案，而且控制权在框架本身，有预定的样式库、组件库和插件。使用者必须按照框架所规定的规则来开发。
Bootstrap 是基于HTML CSS Javascript 的框架，用于开发响应式布局，移动设备有限的web项目，它简单灵活，使得web 开发更加快捷。
因为它本身已经提供了一套页面样式和功能，所以适合没有设计师的团队。
它框架里包含了自定义的jQuery插件，所以功能上是依赖jquery 插件的，且它整个框架的底层原理是利用Less和Sass。其中bootstrap3是基于Less，bootstrap4是基于Sass。
bootstrap一般用于后台管理界面。如果想在互联网层面用作用户交互，样式还是有点保守的。所以前台一般需要ui设计师来设计，前端工程师来实现。但后台管理界面对样式的需求就没有这么高了，使用bootstrap可以很快的完成页面布局，关键是不难看！所以bootstrap简直就是后台程序员都福音，至于3和4没必要纠结，毕竟这个场景是够用就行
中文官网：
https://www.bootcss.com/
Bootstrap3
Bootstrap 响应式UI框架
想要去快速开发页面，最好的解决办法是使用UI框架即提供了一套UI设计好的样式且带有很多功能的各种插件。
-
自己装修 就是使用媒体查询media 即原生响应式。
-
请装修公司 Bootstrap框架
使用
生产环境：指上线的项目，上线项目为了提高网站访问速度，尽量使用压缩文件。
源码：当时去封装框架的时候使用的底层代码，可以帮助开发者更好的理解，一般本地开发下载该源码
Sass：针对于Sass 项目
创建HTML骨架结构(一般在编辑器里创建html模板)
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- 要求当前网页使用IE浏览器最高版本的内核来渲染，版本不同兼容性不同 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备的宽度一致，默认的缩放比例和PC端一致，用户不能自行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签必须放在最前面，任何其他内容都必须跟随其后！ -->
<title>Bootstrap模板</title>
<link href="css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 以下是条件注释，会自己判断 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.11.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Hbulider 创建html模板
1 新建html文件，选择自定义模板
2 跳转到编辑器设置模板的位置
3 在该html 文件夹里新建一个html文件，命名为bootstrap.html，打开该文件把上述HTML骨架结构复制进去，注意css 文件和 js 文件的路径，保存。
4 验证模板是否创建好
回到HbuliderX编辑器，新建html文件，发现选择模板里多出刚刚创建的bootstrap模板，选择该模板即可。
布局容器
bootstrap 需要为页面内容和栅格系统包裹一个容器，它已经预先定义好了这个类，叫.container
- container类
- 响应式布局的容器 固定宽度
- 大屏（>=1200px） 宽度定位1170px
- 中屏（>=992px） 宽度定位970px
- 小屏（>=768px） 宽度定位750px
- 超小屏（<768px） 宽度100%
- container-fulid类
- 流式布局容器 百分百宽度
- 占据全部视口（viewport）的容器
- 适合单独做移动端开发
栅格系统
-
”grid systems “ 又叫 网格系统 ，意为将页面布局划分成等宽的列，通过列数的定义来模块化页面布局。
-
随着屏幕或视口尺寸的增加，系统自动分为最多12列
-
container 宽度是固定的，但是不同的屏幕下，container宽度不同，但我们仍然container等分成12等份
-
栅格参数:
栅格系统用法
(1) 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）
(2) 通过“行（row）”在水平方向创建一组“列（column）”，且内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素
(3) 列是通过指定1到12的值来表示其跨越的范围，即列数之和不能超过总份数12份。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
(4) 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列，如果一“行（row）”中包含了的“列（column）”小于等于 12，则依次从左向右排列。
(5) 可同时指定多个设备的类名，如：class=”col-lg-2 col-md-6”
(6) 移动设备优先，xs 默认 占12份，没有指定设备类前缀，继承方式为 xs>sm>md>lg
响应式工具类
针对不同屏幕尺寸隐藏或显示页面内容
visible-* ： 只对* 可见
hidden-* ： 只对* 隐藏
- 显示系列
visible-xs/sm/md/lg
- 隐藏系列
hidden-xs/sm/md/lg
- 指定元素类型系列
visible-xs/sm/md/lg-block/inline/inline-block
bootstrap4
特点：
- 新增网格层适配了移动端；
- 全面引入ES6新特性（重写所有JavaScript插件）；
- css文件减少了至少40%；
- 所有文档都用Markdown编辑器重写；
- Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。
bootstrap5
Bootstrap 5（当前的主要版本，于 2021 年 5 月发布）带来了大量的变化和改进，包括添加新组件、新类、旧组件的新样式、更新的浏览器支持、删除一些旧组件，以及更多。
变化的内容
-
jQuery不再是一个依赖项
-
浏览器支持更改
在 v4 之前，Bootstrap 曾经支持 Internet Explorer (IE) 10 和 11。从 Bootstrap 5 开始，对 IE 的支持已完全取消。因此，如果您的网站需要支持 IE，则在迁移到 v5 时可能应该小心。
浏览器支持的其他变化包括：
- Firefox和Chrome现在从60版开始支持
- Safari和iOS支持现在从版本12开始
- Android浏览器和WebView支持现在从版本6开始
-
数据属性的更改
组件的数据属性现在以
data-bs开头，以方便命名Bootstrap属性 -
Bootstrap 5 为库带来了一些新组件
（1）Accordion 手风琴
（2）Offcanvas 重叠侧边栏
（3）Floating Label 浮动标签