javascript-将Boostrap4导入angular2 CLI

前端之家收集整理的这篇文章主要介绍了javascript-将Boostrap4导入angular2 CLI 前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在将Angular2 CLI学习到我的http://localhost:4200/中.我按照https://cli.angular.io/的教程进行操作,并成功安装了Angular2.

我在导入bootstrap4 CSS时遇到问题.我已经将以下代码尝试到了src / angular.json文件中.

  1. "assets": [
  2. "src/favicon.ico","src/assets"
  3. ],"styles": [
  4. "src/styles.css","src/assets/css/bootstrap.min.css","src/assets/css/style.css"
  5. ],"scripts": [
  6. "src/assets/js/jquery.min.js","src/assets/js/bootstrap.min.js"
  7. ],

我已将引导程序示例导航栏添加到我的app.component.html中

  1. <nav class="navbar navbar-expand-lg navbar-light bg-light">
  2. <a class="navbar-brand" href="#">Navbar</a>
  3. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  4. <span class="navbar-toggler-icon"></span>
  5. </button>
  6. <div class="collapse navbar-collapse" id="navbarSupportedContent">
  7. <ul class="navbar-nav mr-auto">
  8. <li class="nav-item active">
  9. <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
  10. </li>
  11. <li class="nav-item">
  12. <a class="nav-link" href="#">Link</a>
  13. </li>
  14. </ul>
  15. </div>
  16. </nav>

I am getting the [WDS] Disconnected! error in my local.

My screen

我尝试添加导入’src / assets / css / bootstrap.css’;到我的style.css中,但是它作为内联样式无法获得所需的输出.

如果我尝试使用< link src =“”包含index.html标头,则可以使用它,但我不想使用此方法.任何帮助将不胜感激.提前致谢.

最佳答案
  1. Try this command,npm install bootstrap@4 jquery --save
  2. After edit the Angular.json file modify `"style"
  3. ["node_modules/bootstrap/dist/css/bootstrap.css"]` & `"script:
  4. ["/node_modules/jquery/dist/jquery.js"]`
  5. and`["node_modules/bootstrap/dist/js/boostrap.js"`]`

猜你在找的HTML相关文章