Angular4:如何包含Bootstrap？

我是一个后端开发人员,我只是在玩Angular4.所以我做了这个安装教程:https://www.youtube.com/watch？v = cdlbFEsAGXo.

鉴于此,我如何添加bootstrap到应用程序,所以我可以使用类"container-fluid"或"col-md-6"等类似的东西？

1> Egor Stambak..：

---

npm install --save bootstrap

之后,在angular-cli.json(在项目的根文件夹内)中,找到styles并添加这样的bootstrap css文件:

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

更新:
在角6+ angular-cli.json 改变到angular.json.

---

要放置js,你必须去angular-cli.json并放入"脚本":["../ node_modules/bootstrap/dist/js/bootstrap.min.js"],你就有了js

---

如何添加bootstarp js和jquery js？

---

这也有效,但我猜http://stackoverflow.com/questions/37649164/how-to-add-bootstrap-to-an-angular-cli-project是我需要的.谢谢您的回答!

---

@vnbrs这是一个相对于index.html的路径.如果使用angular cli创建应用程序,则index.html位于相对于应用程序根目录的`./src`中.如果您的设置不同,您可以根据需要调整路径.

2> Mohammad Fai..：

---

观看视频或按照步骤操作

以角度2 /角度4 /角度5 /角度6安装自举4

在项目中包含bootstrap有三种方法:
1)在index.html文件中添加CDN链接
2)使用npm安装bootstrap并在angular.json中 设置路径推荐
3)使用npm安装bootstrap并在index.html文件中设置路径

我建议您使用npm安装bootstrap的2个方法,因为它安装在项目目录中,您可以轻松访问它

方法1

向您的angular project index.html文件添加Bootstrap,Jquery和popper.js CDN路径

Bootstrap.css
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css "
Bootstrap.js
https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap. min.js "
Jquery.js
https://code.jquery.com/jquery-3.2.1.slim.min.js
Popper.js
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12 0.9/UMD/popper.min.js

方法2

1)使用npm安装bootstrap

npm install bootstrap --save

在安装Bootstrap 4之后,我们需要两个更多Javascript包,即Jquery和Popper.js没有这两个包引导程序是不完整的,因为Bootstrap 4使用的是Jquery和popper.js包,所以我们必须安装

2)安装JQUERY

npm install jquery --save

3)安装Popper.js

npm install popper.js --save

现在,Bootstrap在node_modules文件夹内的Project Directory上安装

打开angular.json这个文件可以在你的angular目录下打开那个文件,并在styles []和scripts []路径中添加bootstrap,jquery和popper.js文件的路径,见下面的例子

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

注意:不要改变js文件的顺序,它应该是这样的

方法3

使用npm安装bootstrap按照方法3中的方法2我们只在index.html文件中设置路径而不是angular.json文件

bootstrap.css

的jquery.js

并开始使用jquery和bootstrap.

6> mani R..：

---

请参考此链接 https://github.com/angular/angular-cli/wiki/stories-include-bootstrap.

它提供了有关使用angular-cli将最新引导程序包含在角度4中的分步说明.

7> Joschi..：

---

当这个得到越来越多的答案时,我会标记帮助我的那个:

如何将bootstrap添加到angular-cli项目中

8> Mohammed Saf..：

---

如果您使用的是Sass / Scss，请遵循此步骤，

做npm安装

npm install bootstrap --save

并将import语句添加到您的sass / scss文件中，

@import '~bootstrap/dist/css/bootstrap.css'