Bootstrap 5导航栏折叠功能失效：数据属性迁移指南

聖光之護

发布时间：2025-11-29 10:46:58

833人浏览过

来源于php中文网

原创

Bootstrap 5导航栏折叠功能失效：数据属性迁移指南

本文详细介绍了从bootstrap 4迁移到bootstrap 5时，导航栏折叠功能失效的常见原因及解决方案。核心在于bootstrap 5将数据属性前缀从`data-`更改为`data-bs-`。教程提供了具体的代码示例，帮助开发者正确配置导航栏的`data-bs-toggle`和`data-bs-target`属性，确保折叠功能正常运作，并强调了版本兼容性和脚本引入的重要性。

在开发Web应用时，导航栏（Navbar）的折叠功能是响应式设计中不可或缺的一部分，尤其是在移动设备上。Bootstrap框架提供了便捷的组件来实现这一功能。然而，从Bootstrap 4升级到Bootstrap 5时，开发者可能会遇到导航栏折叠按钮失效的问题。这通常是由于Bootstrap版本之间数据属性（data attributes）的命名约定发生了变化。

Bootstrap 4与Bootstrap 5数据属性的关键差异

Bootstrap 5为了避免与第三方库（如jQuery UI）的data属性命名冲突，并更好地遵循HTML Living Standard，将其自定义数据属性的前缀从data-统一更改为data-bs-。这意味着所有用于控制JavaScript行为的HTML属性都需要进行相应的更新。

对于导航栏折叠功能，主要涉及以下两个属性：

data-toggle: 在Bootstrap 4中，这个属性用于指定触发的JavaScript行为类型，例如data-toggle="collapse"表示触发折叠功能。
data-target: 在Bootstrap 4中，这个属性用于指定要操作的目标元素的ID，例如data-target="#navbarNavAltMarkup"表示操作ID为navbarNavAltMarkup的元素。

在Bootstrap 5中，这两个属性必须更新为：

data-bs-toggle: 对应Bootstrap 4的data-toggle。
data-bs-target: 对应Bootstrap 4的data-target。

如果您的代码仍然使用Bootstrap 4的data-toggle和data-target属性，但在页面中引入的是Bootstrap 5的JavaScript文件，那么折叠功能将无法正常工作。

正确配置Bootstrap 5导航栏折叠

要解决导航栏折叠失效的问题，只需将HTML中触发按钮上的data-toggle和data-target属性替换为data-bs-toggle和data-bs-target。

以下是修改前（Bootstrap 4风格）和修改后（Bootstrap 5风格）的代码对比：

CA.LA

第一款时尚产品在线设计平台，服装设计系统

下载

Bootstrap 4 风格 (失效于Bootstrap 5):

Bootstrap 5 风格 (正确):

请注意，navbar-collapse类所在的div元素的id属性（例如id="navbarNavAltMarkup"）保持不变，因为它只是一个标识符，不受数据属性前缀变化的影响。

完整示例代码

以下是一个完整的Bootstrap 5导航栏示例，其中包含了正确的data-bs-toggle和data-bs-target属性，确保折叠功能正常运作：



  
    
    
    

    
    
    Navbar Test
  
  
    
    

    
    

    
        
            
            
                
                    Home
                    Link 1
                    Link 2
                    
                        
                          Reports
                        

                        
                          Reminders - Send
                          Reminders - Display Only

注意事项：

Bootstrap版本一致性: 确保您引入的CSS和JavaScript文件都属于Bootstrap 5版本。混合使用不同版本的资源是常见的问题来源。
JavaScript引入: Bootstrap 5的JavaScript组件（包括导航栏折叠）不再依赖jQuery。推荐引入bootstrap.bundle.min.js，它包含了Bootstrap的JavaScript插件及其所需的Popper.js库。如果您仍然需要jQuery用于其他目的，可以继续引入，但它不是Bootstrap 5组件运行的必要条件。
其他组件: 除了导航栏，其他Bootstrap组件如模态框（Modal）、下拉菜单（Dropdown）等也遵循相同的data-bs-前缀命名规则。在迁移过程中，请务必检查并更新所有相关的data-属性。
*`aria-属性**:aria-controls、aria-expanded和aria-label`等ARIA（Accessible Rich Internet Applications）属性是用于提高网页可访问性的，它们不受Bootstrap版本更新的影响，应保持不变。

总结

从Bootstrap 4迁移到Bootstrap 5时，导航栏折叠功能失效的核心原因在于数据属性前缀的变化。通过将data-toggle和data-target更新为data-bs-toggle和data-bs-target，并确保正确引入Bootstrap 5的JavaScript文件，即可轻松解决此问题。理解这些版本间的差异对于平稳升级和维护基于Bootstrap的Web项目至关重要。

如何使用 CSS Flexbox 实现 active 列表项置顶排序

如何在 HTML 页面中正确实现一个可交互的图片轮播滑块

如何在输入框右侧精准对齐下拉按钮（含CSS定位与HTML结构详解）

CSS 变量未定义导致 border 样式解析异常的解决方案

如何精准定位下拉列表（UL）使其紧贴输入框底部对齐

相关专题

js获取数组长度的方法

在js中，可以利用array对象的length属性来获取数组长度，该属性可设置或返回数组中元素的数目，只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值，也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容，供大家免费下载使用。

554

2023.06.20

js刷新当前页面

js刷新当前页面的方法：1、reload方法，该方法强迫浏览器刷新当前页面，语法为“location.reload([bForceGet]) ”；2、replace方法，该方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，不能通过“前进”和“后退”来访问已经被替换的URL，语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入

js四舍五入的方法：1、tofixed方法，可把 Number 四舍五入为指定小数位数的数字；2、round() 方法，可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法

js删除节点的方法有：1、removeChild()方法，用于从父节点中移除指定的子节点，它需要两个参数，第一个参数是要删除的子节点，第二个参数是父节点；2、parentNode.removeChild()方法，可以直接通过父节点调用来删除子节点；3、remove()方法，可以直接删除节点，而无需指定父节点；4、innerHTML属性，用于删除节点的内容。

477

2023.09.01

JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号，可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容，供大家免费下载体验。

394

2023.09.04

js生成随机数的方法

js生成随机数的方法有：1、使用random函数生成0-1之间的随机数；2、使用random函数和特定范围来生成随机整数；3、使用random函数和round函数生成0-99之间的随机整数；4、使用random函数和其他函数生成更复杂的随机数；5、使用random函数和其他函数生成范围内的随机小数；6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍：1、内联脚本是将JavaScript代码直接嵌入到HTML标签中；2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中；3、外部脚本是将JavaScript代码放置在一个独立的文件；4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型，用于表示独一无二的值。Symbol的特点：1、独一无二，每个Symbol值都是唯一的，不会与其他任何值相等；2、不可变性，Symbol值一旦创建，就不能修改或者重新赋值；3、隐藏性，Symbol值不会被隐式转换为其他类型；4、无法枚举，Symbol值作为对象的属性名时，默认是不可枚举的。

551

2023.09.20

C++ 单元测试与代码质量保障

本专题系统讲解 C++ 在单元测试与代码质量保障方面的实战方法，包括测试驱动开发理念、Google Test/Google Mock 的使用、测试用例设计、边界条件验证、持续集成中的自动化测试流程，以及常见代码质量问题的发现与修复。通过工程化示例，帮助开发者建立可测试、可维护、高质量的 C++ 项目体系。

2026.01.16

热门下载

网站特效

网站源码

网站素材

前端模板