我正在开始我的第一个 Angular 应用程序，我的基本设置已完成。
如何将 Bootstrap 添加到我的应用程序中？
如果你能提供一个例子，那将是一个很大的帮助。
答案 0 :(得分：112)
如果您使用 Angular-CLI 生成新项目，还有另一种方法可以在 Angular 2/4 中访问引导程序。
$( function() {
$( "#jstree" ).jstree( {
plugins: [ "contextmenu" ],
"contextmenu": {
"items": function( $node ) {
return {
"Enable": {
"label": "Enable",
"action": function( obj ) {
$( "#jstree" ).jstree( "enable_node", $node );
}
},
"Disable": {
"label": "Disable",
"action": function( obj ) {
$( "#jstree" ).jstree( "disable_node", $node );
}
}
};
}
}
} );
} );
。 $ npm install --save bootstrap选项将使引导程序出现在依赖项中。--save数组的引用。引用必须是使用npm下载的引导程序文件的相对路径。就我而言，它是："styles" 我的例子.angular-cli.json：
"../node_modules/bootstrap/dist/css/bootstrap.min.css",现在bootstrap应该是默认设置的一部分。
答案 1 :(得分：77)
通过 ng2-bootstrap 项目也可以与Angular2集成：https://github.com/valor-software/ng2-bootstrap。
要安装它，只需将这些文件放在主HTML页面中：
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
然后你可以用这种方式将它用于你的组件：
import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';
@Component({
selector: 'my-app',
directives: [Alert],
template: `<alert type="info">ng2-bootstrap hello world!</alert>`
})
export class AppComponent {
}
答案 2 :(得分：38)
您需要做的就是在index.html文件中包含boostrap css。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
答案 3 :(得分：20)
另一个非常好（更好？）的替代方案是使用由angular-ui团队创建的一组小部件：https://ng-bootstrap.github.io
答案 4 :(得分：15)
如果你打算使用本线程中提到的angular-ui团队ng-bootstrap所需的Bootstrap 4，你将会想要使用它（注意：你不要＃39; t需要包含JS文件）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
您还可以在npm install bootstrap@4.0.0-alpha.6 --save运行styles.scss之后在本地引用此内容，方法是指向@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
文件中的文件，假设您正在使用SASS：
SQL_C_UBIGINT答案 5 :(得分：10)
最流行的选择是使用一些分发为npm包的第三方库，如ng2-bootstrap project https://github.com/valor-software/ng2-bootstrap或Angular UI Bootstrap库。
我个人使用ng2-bootstrap。有许多方法可以配置它，因为配置取决于Angular项目的构建方式。下面我发布了基于Angular 2 QuickStart项目https://github.com/angular/quickstart
的示例配置首先，我们在package.json
中添加依赖项 { ...
"dependencies": {
"@angular/common": "~2.4.0",
"@angular/compiler": "~2.4.0",
"@angular/core": "~2.4.0",
...
"bootstrap": "^3.3.7",
"ng2-bootstrap": "1.1.16-11"
},
... }
然后我们必须将名称映射到systemjs.config.js
中的正确URL(function (global) {
System.config({
...
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
//bootstrap
'moment': 'npm:moment/bundles/moment.umd.js',
'ng2-bootstrap': 'npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
...
});
})(this);
我们必须在index.html中导入bootstrap .css文件。我们可以从我们硬盘上的/ node_modules / bootstrap目录（因为我们添加了bootstrap 3.3.7依赖）或从web获取它。我们从网上获取它：
<!DOCTYPE html>
<html>
<head>
...
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
...
</head>
<body>
<my-app>Loading...</my-app>
</body>
</html>
我们应该从/ app目录
编辑我们的app.module.ts文件import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
//bootstrap alert import part 1
import {AlertModule} from 'ng2-bootstrap';
import { AppComponent } from './app.component';
@NgModule({
//bootstrap alert import part 2
imports: [ BrowserModule, AlertModule.forRoot() ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
最后是来自/ app目录的app.component.ts文件
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<alert type="success">
Well done!
</alert>
`
})
export class AppComponent {
constructor() { }
}
然后我们必须在运行我们的应用程序之前安装我们的bootstrap和ng2-bootstrap依赖项。我们应该转到我们的项目目录并输入
npm install
最后我们可以启动我们的应用
npm start
ng2-bootstrap项目github上有很多代码示例，展示了如何将ng2-bootstrap导入到各种Angular 2项目构建中。甚至有plnkr样本。还有关于Valor软件（图书馆作者）网站的API文档。
答案 6 :(得分：8)
在angular-cli环境中，我发现最直接的方法如下：
的 1。使用scss样式表的环境中的解决方案
npm install bootstrap-sass —save
在style.scss中：
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
注1：~字符是对 nodes_modules 文件夹的引用。
注2：由于我们使用scss，我们可以自定义我们想要的所有boostrap变量。
的 2。具有css样式表的环境中的解决方案
npm install bootstrap —save
在style.css中：
@import '~bootstrap/dist/css/bootstrap.css';
答案 7 :(得分：6)
有几种方法可以使用Bootstrap配置angular2，其中一个最完整的方法就是使用ng-bootstrap，使用这个配置我们给algular2完全控制我们的DOM，避免使用JQuery和Boostrap.js。
1 - 以Angular-CLI创建的新项目为起点，并使用命令行安装ng-bootstrap：
npm install @ng-bootstrap/ng-bootstrap --save
注意：https://ng-bootstrap.github.io/#/getting-started
的更多信息2 - 然后我们需要为css和网格系统安装bootstrap。
npm install bootstrap@4.0.0-beta.2 --save
注意：https://getbootstrap.com/docs/4.0/getting-started/download/
的更多信息现在我们已经设置了环境，为此我们必须更改.angular-cli.json添加到样式：
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
以下是一个例子：
"apps": [
{
"root": "src",
...
],
"index": "index.html",
...
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
]
下一步是将ng-boostrap模块添加到我们的项目中，为此我们需要添加app.module.ts：
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
然后将新模块添加到应用程序应用程序：NgbModule.forRoot（）
示例：
@NgModule({
declarations: [
AppComponent,
AppNavbarComponent
],
imports: [
BrowserModule,
NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
现在我们可以在angular2 / 5项目中开始使用bootstrap4。
答案 8 :(得分：3)
我有同样的问题，发现这篇文章有一个非常干净的解决方案：
http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/
以下是说明，但我的简化解决方案：
安装Bootstrap 4（instructions）：
npm install --save bootstrap@4.0.0-alpha.6
如果需要，将 src / styles.css 重命名为 styles.scss 并更新 .angular-cli.json 以反映更改：
"styles": [
"styles.scss"
],
然后将此行添加到 styles.scss ：
@import '~bootstrap/scss/bootstrap';
答案 9 :(得分：3)
只需检查你的package.json文件并为bootstrap添加依赖项
"dependencies": {
"bootstrap": "^3.3.7",
}
然后在.angular-cli.json文件
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.css"
],
最后，您只需使用终端
在本地更新您的npm$ npm update
答案 10 :(得分：2)
Angular 6+和Bootstrap 4+的过程：
npm install --save bootstrap@4.1.3 npm install --save jquery 1.9.1 npm audit fix @import "../node_modules/bootstrap/dist/css/bootstrap.min.css"; OR
将此行添加到主index.html文件中：<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
答案 11 :(得分：2)
转到 - ＆gt; angular-cli.json 文件，找到样式属性，然后添加下一个sting：＆＃34; ../ node_modules / bootstrap / dist / css / bootstrap.min.css＆＃34;，它可能是看起来像这样：
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
答案 12 :(得分：1)
我正在寻找相同的答案，最后我找到了这个链接。您可以找到三种不同的方法来解释如何将bootstrap css添加到angular 2项目中。它帮助了我。
以下是链接：http://codingthesmartway.com/using-bootstrap-with-angular/
答案 13 :(得分：0)
当您使用 angular_CLI 或 Visual Studio 2019 运行 angular 项目时，基于 package.json 文件的 angular_CLI 会将文件下载或复制到 node_modules 文件夹。因此 bootstrap 和 JQuery 也存在于该文件夹中，因此无需再次安装它们。 您可以通过以下方式使用它们：
"styles": [
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
注意，由于node_modules文件夹和angular.json文件在同一目录，我们应该使用“./”
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
在这个文件中注意，由于node_modules是styles.css文件的上述文件夹，我们应该使用“../”
我在 Angular 11.0.1、ASP.NET CORE 5、Visual Studio 2019 中使用了这种方法
答案 14 :(得分：0)
将此添加到您的 package.json 中，“依赖项”
"bootstrap": "^3.3.7",
在 .angular-cli.json 文件中，添加到您的“样式”
"../node_modules/bootstrap/dist/css/bootstrap.css"
使用这个命令更新你的 npm
npm 更新
答案 15 :(得分：0)
我的建议是与其在json笔中声明它而不是将其放入scss中，以便将所有内容编译到一个地方。
1）使用npm安装引导程序
npm install bootstrap
2）用我们的样式在css中声明bootstrap npm
创建_bootstrap-custom.scss：
// Required
@import "bootstrap-custom-required";
// Optional
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/tables";
...
..
.
3）我们在styles.scss中插入
@import "bootstrap-custom";
所以我们将所有核心编译在一个地方
答案 16 :(得分：0)
答案 17 :(得分：0)
如果你使用angular cli，在将bootstrap添加到package.json并安装包之后，你只需要将boostrap.min.css添加到.angular-cli.json＆＃39; s＆＃34; styles＆＃34;部分。
重要的是＆＃34;当您对.angular-cli.json进行更改时，您需要重新启动服务以获取配置更改。＆＃34;
价：
https://github.com/angular/angular-cli/wiki/stories-include-bootstrap
答案 18 :(得分：0)
在html页面中添加以下行
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
答案 19 :(得分：0)
您可以尝试使用Prettyfox UI库http://ng.prettyfox.org
这个库使用bootstrap 4样式而不需要jquery。