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 状态。。

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

君子曰:学不可以已。
《分布式算法精髓》
互联网是一个分布式系统,无线通信、云计算或并行计算、多核系统、移动网络也是如此。蚁群、大脑甚至人类社会都可以被建模为分布式系统。本书强调这些分布式系统中共同涉及的主题和技术,特别是强调分布式系统设计中的一些基本问题,涵盖通信、协调、容错性、本地性、并行性、打破对称性、同步化、不确定性等。
发表感想

© 2016 - 2024 chengxuzhixin.com All Rights Reserved.

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