前言

本文讲解了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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/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 浮动标签