如何在Angular 2项目中使用Bootstrap css库

简介: https://gxnotes.com/article/44391.html如果您使用Angular-CLI来生成新的项目,那么还有另一种方法可以在角度2/4中使用引导。

https://gxnotes.com/article/44391.html

如果您使用Angular-CLI来生成新的项目,那么还有另一种方法可以在角度2/4中使用引导。

  • 通过命令行界面导航到项目文件夹。然后用npm安装bootstrap:$ npm install --save bootstrap。 --save选项将使引导出现在依赖关系中。
  • 编辑.angular-cli.json文件,它配置您的项目。它在项目目录中。添加对"styles"数组的引用。引用必须是使用npm下载的引导文件的相对路径。在我的情况下是:"../node_modules/bootstrap/dist/css/bootstrap.min.css"

Angular2与Bootstrap、Jquery集成方法

1、在工程目录下面安装以下两个包
npm install -S jquery bootstrap
2、将这两个第三方框架放入到依赖中去
npm install -D @types/jquery @types/bootstrap
3、修改.angular-cli.json文件
 "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],
4、修改tsconfig.app.json文件
"types": [
  "jquery",
  "bootstrap"
]
``
相关文章
N..
|
24天前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
13 0
|
1月前
|
资源调度 前端开发 CDN
纯css动画库animate.css的用法
纯css动画库animate.css的用法
41 0
|
4月前
|
JavaScript
vue中如何使用animate.css库
vue中如何使用animate.css库
|
3月前
|
前端开发 JavaScript
|
6天前
|
资源调度 前端开发 JavaScript
Tailwind CSS如何在vue项目中使用
Tailwind CSS如何在vue项目中使用
25 8
|
10天前
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
设置Open in Terminal快捷键Alt+Shift+Z,方便angular项目的各种命令输入(多任务状态下)
|
4月前
|
JavaScript
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
解决vue项目build之后部署到服务器访问的时候出现报错:Uncaught SyntaxError: Unexpected token ‘<‘ chunk-vendors:XXXXXX
|
1月前
会员项目定价卡css3特效
会员项目定价卡css3特效
15 2
会员项目定价卡css3特效
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0
|
3月前
|
前端开发
【web组件库系列】纯CSS实现典型网页数据分页器
【web组件库系列】纯CSS实现典型网页数据分页器
43 0