Angular 4集成Bootstrap 3所需依赖及导航栏折叠失效问题

一、集成 Bootstrap 3 需要的依赖 #

要在 Angular 4 中顺利使用 Bootstrap 3，你需要安装两个核心依赖：

• Bootstrap 3：提供整套样式和交互组件的核心文件
• jQuery：Bootstrap 3 的所有 JavaScript 交互组件（比如折叠、模态框、下拉菜单等）都完全依赖 jQuery 才能运行

直接用 npm 安装即可：

npm install bootstrap@3 jquery --save

安装完成后，需要在 .angular-cli.json（Angular 4 对应的配置文件）里配置资源路径：

1. 在 styles 数组中添加 Bootstrap 的 CSS 文件，确保样式能全局生效：

   "styles": [
     "../node_modules/bootstrap/dist/css/bootstrap.min.css",
     "styles.css"
   ]
   

2. 在 scripts 数组中添加 jQuery 和 Bootstrap 的 JS 文件，这里一定要注意顺序：必须先加载 jQuery，再加载 Bootstrap——因为 Bootstrap 的 JS 代码需要依赖 jQuery 提前存在：

   "scripts": [
     "../node_modules/jquery/dist/jquery.min.js",
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"
   ]
   

二、导航栏（navbar-default）无法折叠的排查与解决 #

你已经配置了基础依赖，但折叠功能失效，大概率是以下几个细节出了问题：

1. 检查脚本加载顺序 #

如果你的 scripts 数组里把 Bootstrap 的 JS 放在了 jQuery 前面，那折叠功能肯定无法正常工作。一定要确保 jQuery 先加载，Bootstrap 后加载，这是最常见的出错点。

2. 确认 HTML 结构完整且正确 #

你的折叠按钮用了 data-target="#navbar"，那页面中必须存在一个 id="navbar" 的折叠容器，并且这个容器要带有 collapse 类。完整的导航栏结构应该类似这样：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Project name</a>
    </div>
    <!-- 这个就是折叠的目标容器，必须匹配data-target的id，且带有collapse类 -->
    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

要确保 data-target 的值和折叠容器的 id 完全一致，不能拼写错误。

3. 检查折叠按钮的关键属性 #

折叠按钮需要这几个核心属性来触发功能：

• data-toggle="collapse"：告诉 Bootstrap 这是一个折叠触发器
• data-target="#navbar"：指定要控制的折叠容器
• aria-expanded="false"：无障碍相关属性，标识当前折叠状态
• aria-controls="navbar"：关联到折叠容器的 id，提升页面无障碍性

如果少了这些属性，折叠功能可能无法被正确识别。

4. 排查版本冲突 #

确认你安装的是 Bootstrap 3.x 版本，而不是 Bootstrap 4。Bootstrap 4 已经移除了 navbar-default 这类 3.x 的类名，改用 navbar-light/navbar-dark，如果装错版本，不仅样式会混乱，JS 交互也会失效。你可以查看 package.json 里的 Bootstrap 版本，确保是 ^3.4.1 这类 3.x 的版本。

5. 检查是否有 JS 冲突 #

如果你的项目里还有其他 JavaScript 库，可能会和 jQuery 产生冲突。可以打开浏览器开发者工具（F12）的控制台，查看是否有类似 $ is not defined 的报错——这说明 jQuery 没有成功加载，或者被其他库覆盖了。

内容的提问来源于stack exchange，提问作者Hemant Kumar