javascript-将Boostrap4导入angular2 CLI

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

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

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

"assets": [
  "src/favicon.ico","src/assets"
],"styles": [
  "src/styles.css","src/assets/css/bootstrap.min.css","src/assets/css/style.css"
],"scripts": [
  "src/assets/js/jquery.min.js","src/assets/js/bootstrap.min.js"
],

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

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>      
    </ul>
  </div>
</nav>

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

My screen

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

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

最佳答案
Try this command,npm install bootstrap@4 jquery --save 

After edit the Angular.json file modify `"style" 
["node_modules/bootstrap/dist/css/bootstrap.css"]` & `"script: 
["/node_modules/jquery/dist/jquery.js"]`  
and`["node_modules/bootstrap/dist/js/boostrap.js"`]`

猜你在找的HTML相关文章