bootstrap 4 升到 bootstrap 5 记录

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