我的模板Bootstrap v4.1.3相升级到Bootstrap v5.3.3需要注意的有哪些（3组件核心变化）

三、组件核心变化

1. 表单组件（变化最大）

• 移除.form-group：用margin工具类（如.mb-3）替代，控制表单项间距。

• .form-row→.row：表单行布局直接使用网格的.row，无需专用类。

• 输入框组（Input Group）：移除.input-group-prepend和.input-group-append，直接将前缀 / 后缀元素（如按钮、图标）放入.input-group：

  html

  预览

  <!-- 旧：Bootstrap 4 --><div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text">@</span>
    </div>
    <input type="text" class="form-control"></div><!-- 新：Bootstrap 5 --><div class="input-group">
    <span class="input-group-text">@</span> <!-- 直接放入，无需prepend/append -->
    <input type="text" class="form-control"></div>

  
  

• 浮动标签（Floating Labels）：新增.form-floating类实现浮动标签效果，替代 Bootstrap 4 的自定义实现。

• 复选框 / 单选框：默认样式调整，需用.form-check包裹，且label需与input关联（通过id和for）。

2. 导航栏（Navbar）

• 响应式前缀调整：折叠按钮的data-toggle→data-bs-toggle，data-target→data-bs-target（所有data-*属性均新增bs前缀，见下文 JS 部分）。

• 类名变化：

• .navbar-toggler-icon需配合data-bs-target指向折叠容器（如#navbarCollapse）。

• 导航项间距通过margin工具类（如.me-2）控制，而非内置样式。

• 颜色模式：.navbar-light/.navbar-dark的默认色值调整，若自定义主题需重新适配。

3. 移除的组件

• Jumbotron：用.container+ 间距工具类（如.py-5）+ 自定义背景色替代。

• Card Deck：用网格系统（如.row+.col-md-4）+.gap-3（间距）实现卡片排列。

• Media Object：用弹性盒工具类（.d-flex+.align-items-center）替代。

• List Group 的部分扩展类：如.list-group-horizontal改为.list-group.list-group-horizontal（合并为单一类）。

4. 其他组件调整

• 模态框（Modal）：

• 关闭按钮的data-dismiss="modal"→data-bs-dismiss="modal"。

• 尺寸类名变化：.modal-lg→.modal-lg（保持），新增.modal-xl。

• 下拉菜单（Dropdown）：

• 触发元素的data-toggle="dropdown"→data-bs-toggle="dropdown"。

• 对齐类.dropdown-menu-right→.dropdown-menu-end（适配 RTL）。

• 按钮（Button）：

• 移除.btn-outline-light的默认边框，需手动调整（若依赖旧样式）。

• 新增.btn-link的 hover 状态样式调整。