基于Bootstrap4的网站向Bootstrap5的迁移

赵丙秀
（武汉软件工程职业学院，湖北 武汉 430205）

摘 要: web前端框架Bootstrap5正式版于2021年5月发布，保留了Bootstrap4中大部分的组件，也新增部分工具和组件。本文主要介绍Bootstrap4和最新版Bootstrap5的差别，从而阐述将基于Bootstrap4的网站向Bootstrap5进行迁移升级。
关键词: Bootstrap 迁移 栅格系统

1. 引言

  Bootstrap是一款基于Html、Css、JavaScript的前端框架，它简洁、灵活、高效，深受用户欢迎。2021年5月发布Bootstrap5正式版，目前最新发布版为5.1.3，当前的Bootstrap4的最后版本为4.6.0。Bootstrap5相对Bootstrap4有许多改变。但是要将从Bootstrap 4升级到5一般来说是很容易的。Bootstrap 4中的大部分组件、它们的类和实用类在Bootstrap 5中仍然可用。在迁移时，着重关注正在使用的类或组件是否已经被删除。如果它们被删除了，那么可以使用哪些实用工具类替换它们，或者使用其他方法来实现相同的结果。

2. 替换内容

（1） 左右类

  因为Bootstrap5提供了文字方向从右到左（RTL），故不在使用left、right表示左右，代替的是start（起点）、end（end）。默认情况下，使用的是LTR，start代表的是left，end代表的是right。在RTL页面中，start代表的是right，end代表的是left。Bootstrap4中所有的左右类，如.text-left、.text-right、.float-left等，在Bootstrap5中为.text-start、.text-end、.float-start等。

（2） js插件

  Bootstsrap5与之前的版本相比，jQuery 不再是 Bootstrap 的依赖项。现在，你可以在没有它的情况下充分利用 Bootstrap，但你仍然需要 Popper.js。这一变化使得在不需要或使用 jQuery 的项目中使用 Bootstrap 变得更容易。
  但是在使用Bootstrap5的页面中依然可以使用JQuery，如果Bootstrap在 window 对象中检测到jQuery，它会自动将所有组件添加到jQuery的插件系统中。因此，如果您从Bootstrap4迁移到Bootstrap5，就不需要担心这个更改，通过引用jQuery，所编写的jQuery代码不需要做任何更改。
  Boostrap5的js插件在使用时，原来的“data-”属性的前缀变为“data-bs-”。

3. 删除的组件或类

3.1 css组件

  Bootstrap5中没有了巨幕、媒体对象组件、按钮组件中的块级按钮类.btn-block。

• 巨幕使用如下代码：

• 媒体对象的代码

• 块级按钮的代码

3.2 工具类

  Booststrap5中，没有了无边距类.no-gutters、页面中隐藏屏幕识别器可读类.sr-only。.no-gutters用新增的类.g-0代替，.sr-only用新增类.visusally-hidden代替，表达的意思相同。
  删除了.embed-responsive 、embed-responsive-16by9等类，取而代之的是.ratio、.ratio-1x1、.ratio-4x3、.ratio-16x9、.ratio-21x9。

3.3 表单类

  在表单中删除了内联表单类.form-inline、和表单组类.form-group、自定义表单类custom-*。

• Bootstrap5中内联表单的代码实现：

  其中.g-3为新增的类，g-（的取值为0~5）用在.row上，设置的是行里面列的水平间距和垂直间距。g-0相当于Bootstrap4中的.no-gutters。
  当做水平或垂直表单时，Bootstrap4中用到的.form-group类，在Bootstrap5中用的是工具类.mb-3获得底部的外间距。
  除此之外，Bootstrap5中表单部分，range输入组件，用.form-range代替.form-control-range，file输入组件用.form-control代替.form-control-file，select组件，使用 .form-select代替.form-control。

3.4 js插件

  Boostrap5中保留了按钮插件data-bs-toggle="button"，可以切换按钮的正常、按压2种状态，但是删除了实现单选和复选按钮的buttons插件。在Boostrap5中用css实现而不是js插件。
  单选、复选框按钮。以下代码为复选按钮，如为单选则将type="checkbox"改为type="radio"。

4. 新增的内容

（1）栅格系统

  Bootstsrap4的断点xs、sm、md、lg、xl，在Bootstrap5中新增了xxl，>=1400px。.g-,的取值为0~5。用在.row上，设置的是行里面列的水平间距和垂直间距，gx-，表示列之间的水平间距，其中gx-4与默认的列的水平间距一直。gy-，表示列之间的垂直间距。

（2）文本类

  fs-1~fs-6，字号类，与h1~h6的字号相同。fw-，代替了font-weight-，fst-italic，代替font-italic，fst-nomal代替font-nomal。

（3）链接类

  新增.link-，取primary、info、danger等8颜色值。这些类设置了：hover、：focus的颜色。新增 .stretched-link，扩展链接，可以将超链接行为扩展到外层设置了position：relative的容器上。

（4）工具类

  Bootstrap5中除了有border-0去掉边框外，还有border-1、border-2....border-5类，设置边框的粗细。
  边框圆角的大小在Bootstrap4中使用rounded-0 .rounded-sm和.rounded-lg，在Bootsstrap5中使用.rounded-0、.rounded-1、.rounded-2、.rounded-3，数字越大圆角越大。
  新增top-{0|50|100}，其中top-50表示top：50%，top-100表示top：100%。除此外还有：bottom-{0|50|100}、start-{0|50|100}、end-{0|50|100}。
  新增opacity-{25|50|75|100}，表示设置透明度opacity: 25%;或者 opacity: 50%;等。.text-opacity-{25|50|75|100}、.bg-opacity-{10|25、50|75|100}，分别来设置文本或背景的透明度。

（5）表单类

  新增.form-floating类，实现输入框浮空标签的效果。

（6）js插件

  新增了offcanvas插件，手风琴accordion插件。Offcanvas插件可以将画布显示在浏览器的四边。Accordion在bootstrap4中用卡片和折叠来实现，这里直接单独作为一个插件。具体使用参见官网。

5. 其他差异

（1）导航条

  Bootstrap5中的导航条内需添加容器类.container 、.container-fluid、.contianer-md等等。另外导航条上如果有表单用.d-flex代替Bootstrap4的.form-inline。

（2）< blockquote >

  引用< blockquote >的样式也略有不同。

(3) 关闭按钮

  Bootstrap5中专门定义关闭类.btn-close。在警告框alert组件中，如果需要关闭按钮靠右显示，则需要在alert上面使用类alert-dismissible。

  除此之外，还有Card组件保留了.card-group，删除.card-deck、.card-columns类。徽章组件中，无. badge-等徽章背景颜色类，用bg- 代替。.order-类，*的取值从原来的order-0~order-12，缩小为order-0~order-5。

6. 结束语

  以上详细介绍Bootstrap5和Boostrap4的差异，如需要将基于Bootstrap4的网站迁移到Bootstrap5，可以对照以上差异进行修改。Bootstrap5相对Bootstrap4而言，工具类更多，使用上更灵活方便，更易于定制。在Bootstrap5的官网上对每个组件的Sass变量、每个工具类的定义进行了说明。使得定制更加的方便，通过定制可以个性化自己的网站。

参考文献（3～5条）要求如下：

[1]Bootstrap5的官网 https://getbootstrap.com/docs/5.1/getting-started/introduction/
[2] Bootstrap4的官网 https://getbootstrap.com/docs/4.6/getting-started/introduction/
[3]书籍：赵丙秀、汪晓青、李文蕙. Bootstrap基础教程. 北京：人民邮电出版社, 2021年.

Bootstrap相关图书推荐

《Bootstrap基础教程 第2版|附微课视频》
书　　号：978-7-115-57232-5
作　　者： 赵丙秀
【点击查看教材详情&申请样书&获取资源】

教材特色

畅销书重磅升级，核心案例移植到Bootstrap4；注重实践应用，作者融多年教学经验和前端开发经验于一体；教学资源丰富，每章配完整的案例，微课视频、项目指导、教学PPT等资源资辅助教学。

《Bootstrap基础教程》
书　　号：978-7-115-47827-6
作　　者： 赵丙秀
【点击查看教材详情&申请样书&获取资源】

教材特色

实践性强，作者融多年教学经验和前端开发经验于一体； 结构合理、内容详实，知识点介绍和案例展示有机结合； 突出职业化教学特色，结合案例详细讲解如何从零开始搭建一个具体的Bootstrap网站。