基于Bootstrap4的网站向Bootstrap5的迁移
赵丙秀（武汉软件工程职业学院，湖北武汉430205）
摘要:web前端框架Bootstrap5正式版于2021年5月发布，保留了Bootstrap4中大部分的组件，也新增部分工具和组件。本文主要介绍Bootstrap4和最新版Bootstrap5的差别，从而阐述将基于Bootstrap4的网站向Bootstrap5进行迁移升级。关键词:Bootstrap迁移栅格系统
??因为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等。
??Bootstsrap5与之前的版本相比，jQuery不再是Bootstrap的依赖项。现在，你可以在没有它的情况下充分利用Bootstrap，但你仍然需要Popper.js。这一变化使得在不需要或使用jQuery的项目中使用Bootstrap变得更容易。??但是在使用Bootstrap5的页面中依然可以使用JQuery，如果Bootstrap在window对象中检测到jQuery，它会自动将所有组件添加到jQuery的插件系统中。因此，如果您从Bootstrap4迁移到Bootstrap5，就不需要担心这个更改，通过引用jQuery，所编写的jQuery代码不需要做任何更改。??Boostrap5的js插件在使用时，原来的“data-”属性的前缀变为“data-bs-”。
??Bootstrap5中没有了巨幕、媒体对象组件、按钮组件中的块级按钮类.btn-block。
??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。
??在表单中删除了内联表单类.form-inline、和表单组类.form-group、自定义表单类custom-*。
??Boostrap5中保留了按钮插件data-bs-toggle="button"，可以切换按钮的正常、按压2种状态，但是删除了实现单选和复选按钮的buttons插件。在Boostrap5中用css实现而不是js插件。??单选、复选框按钮。以下代码为复选按钮，如为单选则将type="checkbox"改为type="radio"。
??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}，分别来设置文本或背景的透明度。
??新增.form-floating类，实现输入框浮空标签的效果。
??新增了offcanvas插件，手风琴accordion插件。Offcanvas插件可以将画布显示在浏览器的四边。Accordion在bootstrap4中用卡片和折叠来实现，这里直接单独作为一个插件。具体使用参见官网。
??Bootstrap5中的导航条内需添加容器类.container、.container-fluid、.contianer-md等等。另外导航条上如果有表单用.d-flex代替Bootstrap4的.form-inline。
??引用
的样式也略有不同。??Bootstrap5中专门定义关闭类.btn-close。在警告框alert组件中，如果需要关闭按钮靠右显示，则需要在alert上面使用类alert-dismissible。
??以上详细介绍Bootstrap5和Boostrap4的差异，如需要将基于Bootstrap4的网站迁移到Bootstrap5，可以对照以上差异进行修改。Bootstrap5相对Bootstrap4而言，工具类更多，使用上更灵活方便，更易于定制。在Bootstrap5的官网上对每个组件的Sass变量、每个工具类的定义进行了说明。使得定制更加的方便，通过定制可以个性化自己的网站。
参考文献（3～5条）要求如下：
教材特色
畅销书重磅升级，核心案例移植到Bootstrap4；注重实践应用，作者融多年教学经验和前端开发经验于一体；教学资源丰富，每章配完整的案例，微课视频、项目指导、教学PPT等资源资辅助教学。
实践性强，作者融多年教学经验和前端开发经验于一体；结构合理、内容详实，知识点介绍和案例展示有机结合；突出职业化教学特色，结合案例详细讲解如何从零开始搭建一个具体的Bootstrap网站。
2007-2024人邮教育社区·人民邮电出版社有限公司·Allrightsreserved