我是一名后端开发者,现在正在使用Angular4进行实验。所以我看了这个安装教程:https://www.youtube.com/watch?v=cdlbFEsAGXo。
鉴于此,我应该如何将Bootstrap添加到应用程序中,以便可以使用"class=container-fluid"或"class=col-md-6"等类似的内容?
我是一名后端开发者,现在正在使用Angular4进行实验。所以我看了这个安装教程:https://www.youtube.com/watch?v=cdlbFEsAGXo。
鉴于此,我应该如何将Bootstrap添加到应用程序中,以便可以使用"class=container-fluid"或"class=col-md-6"等类似的内容?
npm install --save bootstrap
然后,在angular-cli.json文件中(在项目的根文件夹内),找到styles
,并像这样添加bootstrap CSS文件:
之后,在项目的根文件夹中,找到angular-cli.json文件。查找styles
,并将bootstrap CSS文件添加进去,就像下面这样:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
更新:
在 Angular 6+ 中,angular-cli.json
已变更为 angular.json
。
完成后,您就可以在页面上使用Bootstrap和jQuery提供的特性和功能了。 - Ravi Ji../node_modules [...]
吗?对我来说应该只需要 /node_modules [...]
。 - vinibrsl./src
目录下。如果你的设置不同,你可以相应地调整路径。 - Egor Stambakio观看视频或按照以下步骤操作:
在 Angular 2 / Angular 4 / Angular 5 / Angular 6 中安装 Bootstrap 4
有三种方法可以将 Bootstrap 包含在您的项目中:
1)在 index.html 文件中添加 CDN 链接。
2)使用 npm 安装 Bootstrap 并在angular.json文件中设置路径。推荐使用此方法。
3)使用 npm 安装 Bootstrap 并在 index.html 文件中设置路径。
我建议您使用 2 种方法,即使用 npm 安装 Bootstrap,因为它会安装在您的项目目录中,您可以轻松访问它。
方法 1
将 Bootstrap、Jquery 和 popper.js CDN 路径添加到 Angular 项目 index.html 文件中:
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.9/umd/popper.min.js
方法 2
1)使用 npm 安装 Bootstrap。
npm install bootstrap --save
安装 Bootstrap 4 后,我们需要另外两个 JavaScript 包,即 Jquery 和 Popper.js。如果没有这两个包,Bootstrap 4 就不完整,因为 Bootstrap 4 使用了 Jquery 和 Popper.js 包,所以我们也必须将它们安装。
2) 安装 JQUERY
npm install jquery --save
3) 安装Popper.js
npm install popper.js --save
现在Bootstrap已经安装在您的项目目录中的node_modules
文件夹中。
打开angular.json
这个文件可以在您的Angular目录中找到,将bootstrap、jquery和popper.js文件的路径添加到styles[]
和scripts[]
路径中,如下面的示例所示:
"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,请按照方法2的步骤进行操作,在方法3中,我们只需要在index.html文件中设置路径,而不是在angular.json文件中。
bootstrap.css
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css">
jQuery.js
<script src="node_modules/jquery/dist/jquery.min.js"><br>
Bootstrap.js
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"><br>
Popper.js
<script src="node_modules/popper.js/dist/umd/popper.min.js"><br>
现在 Bootstrap 工作良好
要在Angular中配置/集成/使用Bootstrap,首先需要使用npm安装Bootstrap包。
$ npm install bootstrap@4.0.0-alpha.6 --save // for specific version
or
$ npm install bootstrap --save // for latest version
注意:--save命令将把依赖项保存在我们的angular应用程序中的package.json文件中。
现在我们已经通过上述步骤安装了该软件包,我们可以使用以下任何一种选项或两种选项来告诉Angular CLI需要加载这些样式:
我们可以按照下面所示添加依赖项:
@import "~bootstrap/dist/css/bootstrap.min.css";
我们可以将样式css文件添加到位于我们Angular应用程序根目录下的angular-cli.json或angular.json文件中,如下所示:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
]
首先使用以下命令将 Bootstrap 安装到您的项目中:
npm install --save bootstrap
然后在 angular-cli.json 文件(根目录)中的 styles 中添加此行:"../node_modules/bootstrap/dist/css/bootstrap.min.css"
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
安装完依赖项后,通过以下方式安装ng-bootstrap:
npm install --save @ng-bootstrap/ng-bootstrap
安装完成后,您需要导入主模块。
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
完成后,您可以使用所有的Bootstrap小部件(例如:轮播、模态框、弹出框、工具提示、选项卡等)以及一些额外的好东西(日期选择器、评分、时间选择器和类型提示等)。
在处理@types系统时,你需要遵循以下步骤在 Angular4 中:
执行:
1) npm install --save @types/jquery
2) npm install --save @types/bootstrap
tsconfig.json
查找types数组并添加jquery和bootstrap条目,
"types": [
"jquery",
"bootstrap",
"node"
]
首页.html
在 head 部分添加以下条目,
<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="node_modules/jquery/dist/jquery.min.js "></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js "></script>
开始使用 jquery 和 bootstrap。
.angular-cli.json
文件中,告诉Angular将它们与其他内容捆绑在一起并提供给客户端。 - Noxxys以下是详细步骤和工作示例,您可以访问https://loiane.com/2017/08/how-to-add-bootstrap-to-an-angular-cli-project/。
非常详细的步骤和适当的解释。
步骤: 从NPM安装Bootstrap
接下来,我们需要安装Bootstrap。将目录更改为我们创建的项目(cd angular-bootstrap-example),并执行以下命令:
对于Bootstrap 3:
npm install bootstrap --save
对于Bootstrap 4(目前处于beta版):
npm install bootstrap@next --save
或者 替代方案:本地引入Bootstrap CSS 作为替代方案,您还可以下载Bootstrap CSS并将其本地添加到项目中。我从网站上下载了Bootstrap并创建了一个styles文件夹(与styles.css同级):
注意: 不要将本地CSS文件放在assets文件夹下。当我们使用Angular CLI进行生产构建时,.angular-cli.json中声明的CSS文件将被压缩,并且所有样式将被捆绑成一个styles.css。在构建过程中,assets文件夹会被复制到dist文件夹中(CSS代码将被重复)。只有在直接在index.html中导入它们的情况下,才将本地CSS文件放在assets下。
导入CSS 1.我们有两个选项来导入从NPM安装的Bootstrap CSS:
强调文本1:配置.angular-cli.json:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
2:直接在src/style.css或src/style.scss中导入:
@import '~bootstrap/dist/css/bootstrap.min.css';
"styles": [
"styles/bootstrap-3.3.7-dist/css/bootstrap.min.css",
"styles.scss"
],
or src/style.css
@import './styles/bootstrap-3.3.7-dist/css/bootstrap.min.css';
4: 使用ngx-bootstrap(选项1)与Bootstrap JavaScript组件 如果您不需要使用需要JQuery的Bootstrap JavaScript组件,那么这就是您所需的全部设置。但是,如果您需要使用模态框、手风琴、日期选择器、工具提示或任何其他组件,我们如何在不安装jQuery的情况下使用这些组件呢?
有一个名为ngx-bootstrap的Angular包装库可用于Bootstrap,我们也可以从NPM安装:
npm install ngx-bootstrap --save
注意:ng2-bootstrap和ngx-bootstrap是同一个包。#itsJustAngular之后,ng2-bootstrap被重命名为ngx-bootstrap。
如果您想在创建Angular CLI项目时同时安装Bootstrap和ngx-bootstrap:
npm install bootstrap ngx-bootstrap --save
4.1: 在 app.module.ts 中添加所需的 Bootstrap 模块
浏览 ngx-bootstrap 并在 app.module.ts 中添加所需的模块。例如,假设我们想要使用 Dropdown、Tooltip 和 Modal 组件:
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
BrowserModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
// ...
})
export class AppBootstrapModule {}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { ModalModule } from 'ngx-bootstrap/modal';
@NgModule({
imports: [
CommonModule,
BsDropdownModule.forRoot(),
TooltipModule.forRoot(),
ModalModule.forRoot()
],
exports: [BsDropdownModule, TooltipModule, ModalModule]
})
export class AppBootstrapModule {}
@NgModule({
imports: [BrowserModule, AppBootstrapModule],
// ...
})
export class AppModule {}
ngx-bootstrap适用于Bootstrap 3和4。我还进行了一些测试,大多数功能也适用于Bootstrap 2.x(是的,我仍然需要维护一些遗留代码)。
希望这能帮助到某些人!
npm install bootstrap --save
并且在您的sass/scss文件中添加import
语句,
@import '~bootstrap/dist/css/bootstrap.css'
在Angular 7.0.0中测试通过
步骤1 - 安装所需依赖项
npm install bootstrap(如果您需要特定版本,请指定版本号)
npm install popper.js(如果您需要特定版本,请指定版本号)
npm install jquery
我尝试过的版本:
"bootstrap": "^4.1.3",
"popper.js": "^1.14.5",
"jquery": "^3.3.1",
第二步:在angular.json文件中按以下顺序指定库。在最新版本的Angular中,配置文件名称为angular.json而不是angular-cli.json。
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"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"
]
},
针对 bootstrap 4.0.0-alph.6 版本
npm install bootstrap@4.0.0-alpha.6 jquery tether --save
然后完成这些步骤后,运行:
npm install
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
]
我看到您已经得到了很多答案,但是您可以尝试使用以下方法。
在Angular中最好不要使用jquery,我更喜欢使用ngx-bootstrap方法安装bootstrap,而不使用依赖于jquery的bootstrap js组件。
您可以参考:https://github.com/valor-software/ngx-bootstrap/blob/development/docs/getting-started/ng-cli.md
npm install ngx-bootstrap bootstrap --save
or
ng add ngx-bootstrap (Preferred)