bootstrap 4 升到 bootstrap 5 记录

2022-09-03 From 程序之心 By 丁仪

bootstrap 5 发布了有段时间了,之前说是 alpha 版,没敢直接升级。今天看到 bs5 已经到 5.2.0 版本了,决定升级一下看看。

一些变化:

  • 不再支持 IE
  • 去除 jQuery 依赖

需要替换的内容:

  • Components 替换
    • 替换 .dropleft 和 .dropright 为 .dropstart 和 .dropend。
    • 替换 .dropdown-menu-*-left 和 .dropdown-menu-*-right 为 .dropdown-menu-*-start 和 .dropdown-menu-*-end。
    • 替换 .bs-popover-left 和 .bs-popover-right 为 .bs-popover-start 和 .bs-popover-end。
    • 替换 .bs-tooltip-left 和 .bs-tooltip-right 为 .bs-tooltip-start 和 .bs-tooltip-end。
    • 替换 .carousel-item-left 和 .carousel-item-right 为 .carousel-item-start 和 .carousel-item-end。
  • Utilities 替换
    • 替换 .left-* 和 .right-* 为 .start-* 和 .end-*。
    • 替换 .float-left 和 .float-right 为 .float-start 和 .float-end。
    • 替换 .border-left 和 .border-right 为 .border-start 和 .border-end。
    • 替换 .rounded-left 和 .rounded-right 为 .rounded-start 和 .rounded-end。
    • 替换 .ml-* 和 .mr-* 为 .ms-* 和 .me-*。
    • 替换 .pl-* 和 .pr-* 为 .ps-* 和 .pe-*。
    • 替换 .text-left 和 .text-right 为 .text-start 和 .text-end。
  • Mixins 替换
    • 替换 border-left-radius() 和 border-right-radius() 为 border-start-radius() 和 border-end-radius() — as well as their corner relative variants (eg. .border-bottom-left-radius became .border-bottom-start-radius)。
    • 替换 caret-left() 和 caret-right() 为 caret-start() 和 caret-end() — subsequently, the caret() mixin now takes start 和 end as arguments instead of left 和 right。
  • Variables 替换
    • 替换 $navbar-brand-margin-right 为 $navbar-brand-margin-end。
    • 替换 $pagination-margin-left 为 $pagination-margin-start。
    • 替换 $form-check-padding-left 为 $form-check-padding-start。
    • 替换 $form-switch-padding-left 为 $form-switch-padding-start。
    • 替换 $form-check-inline-margin-right 为 $form-check-inline-margin-end。
    • 替换 $form-select-feedback-icon-padding-right 为 $form-select-feedback-icon-padding-end。

下拉框需要单独引入 popper.js。

折叠组件原来的 data-toggle 变为 data-bs-toggle,data-target 变为 href。

bs4 中的多媒体组件被删除,需要人工补上 css。

.media {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}
.media-body {
    -ms-flex: 1;
    flex: 1;
}

bs5 新增了 .link-* 样式,可以为链接着色。与 .text-* 类 不同的是,这些类支持 :hover 和 :focus 状态。。

本文来源:程序之心,转载请注明出处!

君子曰:学不可以已。
《算法导论(原书第3版)》
本书是操作系统领域的经典教材,主要内容包括进程与线程、内存管理、文件系统、输入/输出、死锁、虚拟化和云、多处理机系统、安全,以及关于UNIX、Linux、Android和Windows的实例研究等。第4版对知识点进行了全面更新,反映了当代操作系统的发展与动向。本书适合作为高等院校计算机专业的操作系统课程教材,也适合相关技术人员参考。
发表感想

© 2016 - 2022 chengxuzhixin.com All Rights Reserved.

浙ICP备2021034854号-1    浙公网安备 33011002016107号