bootstrap 5 beta 已经发布，本文介绍 bootstrap4 升级到 bootstrap5 方法
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。
JavaScript
见官网