Question

我正在将bootstrap 3.4.1与angularcli 6.0.8一起使用，但是当我运行ng服务时，我的网页没有显示我确定的bootstrap类。

我尝试更新引导程序版本，并尝试新类仍然无法正常工作。

<div>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Dating App</a>
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Matches</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Lists</a>
      </li>
      <li class="nav-item">
        <a class="nav-link " href="#">Messages</a>
      </li>
    </ul>

    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="text" placeholder="Username">
      <input class="form-control mr-sm-2" type="password" placeholder="Password">
      <button class="btn btn-success my-2 my-sm-0" type="submit">Login</button>
    </form>
  </nav>
</div>

在angular.json中

"styles": [ "src/styles.css" ],
"scripts": []

在src / styles.css中

@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Answer 1

您使用的是普通CSS，因此@import语句由浏览器执行。我猜想，如果打开“开发工具”的“网络”标签，则会看到有关bootstrap.min.css文件的讨厌的404。

导入css的最简单方法是将其包含在styles的{{1}}数组中：

angular.json

这将产生一个嵌入Bootstrap css的"styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ],文件。

Answer 2

通过npm安装项目的Bootstrap：npm i bootstrap

请注意，Bootstrap依赖于Popper.js和jQuery-您还都需要通过npm i jquery popper.js

进行安装

稍后尝试将其添加到 angular.json

"styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.js",
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]

Answer 3

我已将引导网站推荐的链接和脚本标签添加到index.html文件，该文件以某种方式起作用。但我不知道这是否是一个好习惯。

bootstrap类不适用于角度应用程序中的导航栏组件

3 个答案: