Bootstrap 4 升级 5 指南

发布时间: 更新时间: 总字数:545 阅读时间:2m 作者: IP上海 分享 网址

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 startend as arguments instead of leftright

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

见官网

Home Archives Categories Tags Statistics
本文总阅读量 次 本站总访问量 次 本站总访客数