entityMap|blocks|key|knhp|text|您需要做的就是在index.html文件中包含引导css。|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

All you need to do is include the boostrap css within your index.html file.

<pre><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"&gt;
</code></pre>

entityMap|blocks|key|4p8d3|text|与Angular2的集成也可以通过ng2-bootstrap|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dng3o|项目：https://github.com/valor-software/ng2-bootstrap|juh|要安装它，只需将以下文件放入您的HTML主页：|fg2i3|然后你可以这样在你的组件中使用它：|1f9lg|import+{Component}+from+'angular2/core';
import+{Alert}+from+'ng2-bootstrap/ng2-bootstrap';

@Component({
++selector:+'my-app',
++directives:+[Alert],
++template:+`ng2-bootstrap+hello+world!`
})
export+class+AppComponent+{
}|code-block|syntax|javascript^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|J|6|K|8|R|9|@]|A|@]|B|$L|M]]]]

An integration with Angular2 is also available through the ng2-bootstrap project : <a href="https://github.com/valor-software/ng2-bootstrap">https://github.com/valor-software/ng2-bootstrap</a>.

To install it simply put these files in your main HTML page:

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"&gt;&lt;/script&gt;
&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
</code></pre>

Then you can use it into your components this way:

<pre><code>import {Component} from 'angular2/core';
import {Alert} from 'ng2-bootstrap/ng2-bootstrap';

@Component({
 selector: 'my-app',
 directives: [Alert],
 template: `&lt;alert type="info"&gt;ng2-bootstrap hello world!&lt;/alert&gt;`
})
export class AppComponent {
}
</code></pre>

entityMap|blocks|key|9p1gj|text|另一个非常好的(更好的？)另一种选择是使用angular-ui团队创建的一组小部件：https://ng-bootstrap.github.io|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

Another very good (better?) alternative is to use a set of widgets created by the angular-ui team: <a href="https://ng-bootstrap.github.io">https://ng-bootstrap.github.io</a>

entityMap|blocks|key|4p27n|text|最流行的选择是使用一些作为npm包分发的第三方库，比如ng2-bootstrap项目https://github.com/valor-software/ng2-bootstrap|type|unstyled|depth|inlineStyleRanges|entityRanges|data|onq|或者Angular+UI+Bootstrap库。我个人使用ng2-bootstrap。有很多方法可以配置它，因为配置取决于您的Angular项目是如何构建的。在下面，我发布了基于Angular+2+QuickStart项目的示例配置https://github.com/angular/quickstart|fciqd|首先，我们在package.json中添加依赖项|eb8q4|{+...
"dependencies":+{
++++"@angular/common":+"~2.4.0",
++++"@angular/compiler":+"~2.4.0",
++++"@angular/core":+"~2.4.0",

++++...

++++"bootstrap":+"%5E3.3.7",
++++"ng2-bootstrap":+"1.1.16-11"
++},
...+}|code-block|syntax|javascript|4ds86|然后，我们必须将名称映射到systemjs.config.js中正确的URL|b6arc|(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);|22hui|我们必须在index.html中导入bootstrap+.css文件。我们可以从/node得到它模块/+bootstrap目录在我们的硬盘上(因为我们添加了bootstrap+3.3.7依赖项)或者来自web。在那里我们可以从web上获得它：|a7jg|...
++++
++++...
++

++
++++Loading...|cfcgn|我们应该从/app目录编辑app.module.ts文件|8apv5|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+{+}|6no9q|最后是/app目录中的app.component.ts文件|dvson|import+{+Component+}+from+'@angular/core';

@Component({
++++selector:+'my-app',
++++template:+`
++++
++++++++Well+done!
++++
++++`
})

export+class+AppComponent+{

++++constructor()+{+}

}|2ir8p|然后，在运行应用程序之前，我们必须安装bootstrap和ng2-bootstrap依赖项。我们应该转到我们的项目目录并输入|fhnec|npm+install|aa7h8|最后，我们可以启动我们的应用程序|f8a1l|npm+start|865ro|在ng2-bootstrap项目github上有许多代码示例，展示了如何将ng2-bootstrap导入到各种Angular+2项目构建中。甚至还有plnkr示例。在Valor-software+(库的作者)网站上也有API文档。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1B|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1C|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|1D|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|1E|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|1F|9|@]|A|@]|B|$]]|$2|N|4|O|6|I|8|1G|9|@]|A|@]|B|$J|K]]|$2|P|4|Q|6|7|8|1H|9|@]|A|@]|B|$]]|$2|R|4|S|6|I|8|1I|9|@]|A|@]|B|$J|K]]|$2|T|4|U|6|7|8|1J|9|@]|A|@]|B|$]]|$2|V|4|W|6|I|8|1K|9|@]|A|@]|B|$J|K]]|$2|X|4|Y|6|7|8|1L|9|@]|A|@]|B|$]]|$2|Z|4|10|6|I|8|1M|9|@]|A|@]|B|$J|K]]|$2|11|4|12|6|7|8|1N|9|@]|A|@]|B|$]]|$2|13|4|14|6|I|8|1O|9|@]|A|@]|B|$J|K]]|$2|15|4|16|6|7|8|1P|9|@]|A|@]|B|$]]|$2|17|4|18|6|I|8|1Q|9|@]|A|@]|B|$J|K]]|$2|19|4|1A|6|7|8|1R|9|@]|A|@]|B|$]]]]

The most popular option is to use some third party library distributed as npm package like ng2-bootstrap project <a href="https://github.com/valor-software/ng2-bootstrap" rel="noreferrer">https://github.com/valor-software/ng2-bootstrap</a> or Angular UI Bootstrap library.

I personally use ng2-bootstrap. There are many ways to configure it, because configuration depends on how your Angular project is build. Underneath I post example configuration based on Angular 2 QuickStart project <a href="https://github.com/angular/quickstart" rel="noreferrer">https://github.com/angular/quickstart</a>

Firstly we add dependencies in our package.json

<pre><code> { ...
"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"
 },
... }
</code></pre>

Then we have to map names to proper URL's in systemjs.config.js

<pre><code>(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);
</code></pre>

We have to import bootstrap .css file in index.html. We can get it from /node_modules/bootstrap directory on our hard drive (because we added bootstrap 3.3.7 dependency) or from web. There we are obtaining it from web:

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
 ...
 &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"&gt;
 ...
 &lt;/head&gt;

 &lt;body&gt;
 &lt;my-app&gt;Loading...&lt;/my-app&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>

We should edit our app.module.ts file from /app directory

<pre><code>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 { }
</code></pre>

And finally our app.component.ts file from /app directory

<pre><code>import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
 &lt;alert type="success"&gt;
 Well done!
 &lt;/alert&gt;
 `
})

export class AppComponent {

 constructor() { }

}
</code></pre>

Then we have to install our bootstrap and ng2-bootstrap dependencies before we run our app. We should go to our project directory and type

<pre><code>npm install
</code></pre>

Finally we can start our app

<pre><code>npm start
</code></pre>

There are many code samples on ng2-bootstrap project github showing how to import ng2-bootstrap to various Angular 2 project builds. There is even plnkr sample. There is also API documentation on Valor-software (authors of the library) website.

entityMap|blocks|key|223s5|text|您可以尝试使用Prettyfox+UI库|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1qa83|http://ng.prettyfox.org|c0g6p|这个库使用bootstrap+4样式，不需要jquery。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

You can try to use Prettyfox UI library <a href="http://ng.prettyfox.org" rel="nofollow noreferrer">http://ng.prettyfox.org</a>

This library use bootstrap 4 styles and not need jquery.

entityMap|blocks|key|5cn7r|text|如果您计划使用Bootstrap+4，这是angular-ui团队的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5h07k|ng-bootstrap|6unbr|在本线程中提到的，您将希望使用以下代码(注意:您不需要包含JS文件)：|2pqml|您也可以在运行以下命令后在本地引用它npm+install+bootstrap@4.0.0-alpha.6+--save通过指向您的styles.scss|bpr6v|文件，假设您使用的是SASS：|aju14|@import+'../../node_modules/bootstrap/dist/css/bootstrap.min.css';|code-block|syntax|javascript^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|S|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|T|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|U|9|@]|A|@]|B|$N|O]]]]

If you plan on using Bootstrap 4 which is required with the angular-ui team's <a href="https://ng-bootstrap.github.io" rel="noreferrer">ng-bootstrap</a> that is mentioned in this thread, you'll want to use this instead (NOTE: you don't need to include the JS file):

<pre><code> &lt;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"&gt;
</code></pre>

You can also reference this locally after running <code>npm install bootstrap@4.0.0-alpha.6 --save</code> by pointing to the file in your <code>styles.scss</code> file, assuming you're using SASS:

<pre><code>@import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
</code></pre>

entityMap|blocks|key|a2s1d|text|如果您使用Angular-CLI要生成新项目，还有另一种方法使bootstrap可在角度2/4|type|unstyled|depth|inlineStyleRanges|entityRanges|data|dh4v6|通过命令行界面导航到项目文件夹。然后使用npm要安装bootstrap，请执行以下操作：$+npm+install+--save+bootstrap.+The+--save|offset|length|style|CODE|6iqfb|ehi5i|选项将使bootstrap出现在依赖项中。编辑.angular-cli.json文件，该文件用于配置您的项目。它在项目目录中。将引用添加到"styles"|28bhb|数组。引用必须是使用npm下载的引导程序文件的相对路径。在我的例子中它是："../node_modules/bootstrap/dist/css/bootstrap.min.css",|191u9|2av9k|我的示例.angular-cli.json：|dqslk|{
++"$schema":+"./node_modules/@angular/cli/lib/config/schema.json",
++"project":+{
++++"name":+"bootstrap-test"
++},
++"apps":+[
++++{
++++++"root":+"src",
++++++"outDir":+"dist",
++++++"assets":+[
++++++++"assets",
++++++++"favicon.ico"
++++++],
++++++"index":+"index.html",
++++++"main":+"main.ts",
++++++"polyfills":+"polyfills.ts",
++++++"test":+"test.ts",
++++++"tsconfig":+"tsconfig.app.json",
++++++"testTsconfig":+"tsconfig.spec.json",
++++++"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"
++++++}
++++}
++],
++"e2e":+{
++++"protractor":+{
++++++"config":+"./protractor.conf.js"
++++}
++},
++"lint":+[
++++{
++++++"project":+"src/tsconfig.app.json"
++++},
++++{
++++++"project":+"src/tsconfig.spec.json"
++++},
++++{
++++++"project":+"e2e/tsconfig.e2e.json"
++++}
++],
++"test":+{
++++"karma":+{
++++++"config":+"./karma.conf.js"
++++}
++},
++"defaults":+{
++++"styleExt":+"css",
++++"component":+{}
++}
}|code-block|syntax|javascript|27tfp|现在，bootstrap应该是您的默认设置的一部分。^0|0|18|U|28|6|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|X|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Y|9|@$E|Z|F|10|G|H]|$E|11|F|12|G|H]]|A|@]|B|$]]|$2|I|4|-4|6|7|8|13|9|@]|A|@]|B|$]]|$2|J|4|K|6|7|8|14|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|15|9|@]|A|@]|B|$]]|$2|N|4|-4|6|7|8|16|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|17|9|@]|A|@]|B|$]]|$2|Q|4|R|6|S|8|18|9|@]|A|@]|B|$T|U]]|$2|V|4|W|6|7|8|19|9|@]|A|@]|B|$]]]]

Provided you use the Angular-CLI to generate new projects, there's another way to make bootstrap accessible in Angular 2/4.

<ol>
<li>Via command line interface navigate to the project folder. Then use npm to install bootstrap: 
<code>$ npm install --save bootstrap</code>. The <code>--save</code> option will make bootstrap appear in the dependencies.</li>
<li>Edit the .angular-cli.json file, which configures your project. It's inside the project directory. Add a reference to the <code>"styles"</code> array. The reference has to be the relative path to the bootstrap file downloaded with npm. In my case it's: <code>"../node_modules/bootstrap/dist/css/bootstrap.min.css",</code></li>
</ol>

My example .angular-cli.json:

<pre><code>{
 "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
 "project": {
 "name": "bootstrap-test"
 },
 "apps": [
 {
 "root": "src",
 "outDir": "dist",
 "assets": [
 "assets",
 "favicon.ico"
 ],
 "index": "index.html",
 "main": "main.ts",
 "polyfills": "polyfills.ts",
 "test": "test.ts",
 "tsconfig": "tsconfig.app.json",
 "testTsconfig": "tsconfig.spec.json",
 "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"
 }
 }
 ],
 "e2e": {
 "protractor": {
 "config": "./protractor.conf.js"
 }
 },
 "lint": [
 {
 "project": "src/tsconfig.app.json"
 },
 {
 "project": "src/tsconfig.spec.json"
 },
 {
 "project": "e2e/tsconfig.e2e.json"
 }
 ],
 "test": {
 "karma": {
 "config": "./karma.conf.js"
 }
 },
 "defaults": {
 "styleExt": "css",
 "component": {}
 }
}
</code></pre>

Now bootstrap should be part of your default settings.

entityMap|blocks|key|e6be4|text|在html页面中添加以下行|type|unstyled|depth|inlineStyleRanges|entityRanges|data^0^^$0|$]|1|@$2|3|4|5|6|7|8|C|9|@]|A|@]|B|$]]]]

add the following lines in your html page

<pre><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"&gt;&lt;/script&gt;

&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"&gt;
</code></pre>

entityMap|blocks|key|1ebrc|text|我一直在寻找同样的答案，最后我找到了这个链接。你可以找到三种不同的方法来将引导css添加到你的angular+2项目中。这对我有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|f7djj|链接如下：|3mfbe|http://codingthesmartway.com/using-bootstrap-with-angular/^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|G|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|H|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|I|9|@]|A|@]|B|$]]]]

I was looking for same answer and finally I found this link. You can find explained three different ways how to add bootstrap css into your angular 2 project. It helped me.

Here is the link: <a href="http://codingthesmartway.com/using-bootstrap-with-angular/" rel="nofollow noreferrer">http://codingthesmartway.com/using-bootstrap-with-angular/</a>

entityMap|blocks|key|c3d35|text|在angular-cli环境中，我找到的最简单的方法如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8tp2c|abe79|1.使用s̲c̲s̲s̲样式表的环境中的解决方案|fg3jj|npm+install+bootstrap-sass+—save|code-block|syntax|javascript|d39i3|在style.scss中：|ard2l|$icon-font-path:+'~bootstrap-sass/assets/fonts/bootstrap/';
@import+'~bootstrap-sass/assets/stylesheets/bootstrap';|8qche|Note1：~字符是对节点模块文件夹。|6l6dr|Note2:当我们使用scss时，我们可以定制我们想要的所有引导变量。|ac0bn|eb5jn|2.在使用c̲的̲的̲样式表的环境中的解决方案。|fetf0|npm+install+bootstrap+—save|cqqd5|在style.css中：|ega5m|@import+'~bootstrap/dist/css/bootstrap.css';^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|11|9|@]|A|@]|B|$]]|$2|C|4|-4|6|7|8|12|9|@]|A|@]|B|$]]|$2|D|4|E|6|7|8|13|9|@]|A|@]|B|$]]|$2|F|4|G|6|H|8|14|9|@]|A|@]|B|$I|J]]|$2|K|4|L|6|7|8|15|9|@]|A|@]|B|$]]|$2|M|4|N|6|H|8|16|9|@]|A|@]|B|$I|J]]|$2|O|4|P|6|7|8|17|9|@]|A|@]|B|$]]|$2|Q|4|R|6|7|8|18|9|@]|A|@]|B|$]]|$2|S|4|-4|6|7|8|19|9|@]|A|@]|B|$]]|$2|T|4|U|6|7|8|1A|9|@]|A|@]|B|$]]|$2|V|4|W|6|H|8|1B|9|@]|A|@]|B|$I|J]]|$2|X|4|Y|6|7|8|1C|9|@]|A|@]|B|$]]|$2|Z|4|10|6|H|8|1D|9|@]|A|@]|B|$I|J]]]]

In an angular-cli environment, the most straightforward way I've found is the following:

 
1. Solution in an environment with s̲c̲s̲s̲ stylesheets

<pre><code>npm install bootstrap-sass —save
</code></pre>

In style.scss:

<pre><code>$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';
</code></pre>

Note1: The <code>~</code> character is a reference to nodes_modules folder. 
Note2: As we are using scss, we can customize all boostrap variables we want.

 
2. Solution in an environment with c̲s̲s̲ stylesheets

<pre><code>npm install bootstrap —save
</code></pre>

In style.css:

<pre><code>@import '~bootstrap/dist/css/bootstrap.css';
</code></pre>

entityMap|blocks|key|5gqhc|text|如果你使用angular+cli，在将bootstrap添加到package.json并安装包之后，你所需要做的就是将boostrap.min.css添加到.Angular-cli.json的“样式”部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4v6pr|一个重要的事情是“当你对.angular-cli.json进行更改时，你将需要重新启动ng服务来获取配置更改。”|ap46k|参考：|26g3|https://github.com/angular/angular-cli/wiki/stories-include-bootstrap^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

If you use angular cli, after adding bootstrap into package.json and install the package, all you need is add boostrap.min.css into .angular-cli.json's "styles" section.

One important thing is "When you make changes to .angular-cli.json you will need to re-start ng serve to pick up configuration changes."

Ref:

<a href="https://github.com/angular/angular-cli/wiki/stories-include-bootstrap" rel="nofollow noreferrer">https://github.com/angular/angular-cli/wiki/stories-include-bootstrap</a>

entityMap|blocks|key|680i8|text|另一个非常好的替代方法是使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2qhnt|骨架角度2/4+%2B+Bootstrap+4|3nnk2|1)下载ZIP并解压缩zip文件夹|bsc8a|2)+ng服务^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

Another very good alternative is to use the <a href="https://github.com/Giancarlo1974/SailsAngular" rel="nofollow noreferrer">skeleton Angular 2/4 + Bootstrap 4</a>

1) Download ZIP and extract zip folder

2) ng serve

entityMap|blocks|key|bpgru|text|我也有同样的问题，并找到了这篇文章的一个非常干净的解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4d71j|http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/以下是说明，但使用我的简化解决方案：安装Bootstrap+4(使用说明)：|5vnr5|npm+install+--save+bootstrap@4.0.0-alpha.6|code-block|syntax|javascript|4q1gr|如果需要，请重命名您的src/styles.css至styles.scss和更新..angular+cli.json要反映更改，请执行以下操作：|1gvc7|"styles":+[
++"styles.scss"
],|2oeuf|然后将此行添加到|3tfkg|styles.scss|13slp|@import+'~bootstrap/scss/bootstrap';^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|V|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|W|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|X|9|@]|A|@]|B|$H|I]]|$2|N|4|O|6|7|8|Y|9|@]|A|@]|B|$]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|G|8|10|9|@]|A|@]|B|$H|I]]]]

I had the same question and found this article with a really clean solution:

<a href="http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/" rel="nofollow noreferrer">http://leon.radley.se/2017/01/angular-cli-and-bootstrap-4/</a>

Here are the instructions, but with my simplified solution:

Install Bootstrap 4 (<a href="https://v4-alpha.getbootstrap.com/getting-started/download/#npm" rel="nofollow noreferrer">instructions</a>):

<pre><code>npm install --save bootstrap@4.0.0-alpha.6
</code></pre>

If needed, rename your src/styles.css to styles.scss and update .angular-cli.json to reflect the change:

<pre><code>"styles": [
 "styles.scss"
],
</code></pre>

Then add this line to styles.scss:

<pre><code>@import '~bootstrap/scss/bootstrap';
</code></pre>

entityMap|blocks|key|c8315|text|只需检查package.json文件并为引导添加依赖项|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3fbjv|"dependencies":+{

+++"bootstrap":+"%5E3.3.7",
}|code-block|syntax|javascript|1de6b|然后将下面的代码.angular-cli.json添加到文件|as6ki|"styles":+[
++++"styles.css",
++++"../node_modules/bootstrap/dist/css/bootstrap.css"
++],|4pv3e|最后，您只需使用终端在本地更新您的npm|34le1|$+npm+update^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|Q|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|R|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|S|9|@]|A|@]|B|$F|G]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|E|8|U|9|@]|A|@]|B|$F|G]]]]

just check your package.json file and add dependencies for bootstrap

<pre><code>"dependencies": {

 "bootstrap": "^3.3.7",
}
</code></pre>

then add below code on <code>.angular-cli.json</code> file 

<pre><code> "styles": [
 "styles.css",
 "../node_modules/bootstrap/dist/css/bootstrap.css"
 ],
</code></pre>

Finally you just update your npm locally by using terminal 

<pre><code>$ npm update
</code></pre>

entityMap|blocks|key|dji77|text|npm+install+--save+bootstrap|type|unstyled|depth|inlineStyleRanges|entityRanges|data|qheg|转到->angular-cli.json|bnnct|文件中，找到样式属性，然后添加下一个字符串："../nodemodules/bootstrap/dist/css/bootstrap.min.css"，可能是这样的：“样|d2eal|式”："../nodmodules/bootstrap/dist/css/bootstrap.min.css"，"styles.css“^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

<ol>
<li>npm install --save bootstrap</li>
<li>go to -> angular-cli.json file, find styles properties and just add next sting: "../node_modules/bootstrap/dist/css/bootstrap.min.css", It might be looks like this:

<pre><code>"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
</code></pre></li>
</ol>

entityMap|blocks|key|57ll9|text|有几种方法可以用bootstrap配置angular2，最完整的方法之一是使用ng-bootstrap，使用这种配置，我们让algular2完全控制我们的DOM，避免使用JQuery和Boostrap.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4g9ih|1-以使用Angular-CLI并使用命令行创建的新项目为起点，安装ng-bootstrap：|t07h|npm+install+@ng-bootstrap/ng-bootstrap+--save|code-block|syntax|javascript|esp78|注:有关详细信息，请访问https://ng-bootstrap.github.io/#/getting-started|3rrq7|2-然后我们需要为css和网格系统安装bootstrap。|4cb18|npm+install+bootstrap@4.0.0-beta.2+--save|922b7|注:有关详细信息，请访问https://getbootstrap.com/docs/4.0/getting-started/download/|f6eh3|现在，我们已经设置好了环境，为此，我们必须更改.angular-cli.json，并将其添加到样式中：|9qb5q|"../node_modules/bootstrap/dist/css/bootstrap.min.css"|5umuq|下面是一个示例：|cpapn|"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"
++++++}
++++}
++]|3le8h|下一步是将ng-boostrap模块添加到我们的项目中，为此，我们需要在app.module.ts上添加：|6h318|import+{+NgbModule+}+from+'@ng-bootstrap/ng-bootstrap';|485va|然后将新模块添加到应用程序app:+NgbModule.forRoot()|cq134|示例：|8ik4k|@NgModule({
++declarations:+[
++++AppComponent,
++++AppNavbarComponent
++],
++imports:+[
++++BrowserModule,
++++NgbModule.forRoot()
++],
++providers:+[],
++bootstrap:+[AppComponent]
})|co0n0|现在我们可以开始在angular2/5项目中使用bootstrap4了。^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|1B|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|1C|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|1D|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|1E|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|1F|9|@]|A|@]|B|$]]|$2|N|4|O|6|G|8|1G|9|@]|A|@]|B|$H|I]]|$2|P|4|Q|6|7|8|1H|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|1I|9|@]|A|@]|B|$]]|$2|T|4|U|6|G|8|1J|9|@]|A|@]|B|$H|I]]|$2|V|4|W|6|7|8|1K|9|@]|A|@]|B|$]]|$2|X|4|Y|6|G|8|1L|9|@]|A|@]|B|$H|I]]|$2|Z|4|10|6|7|8|1M|9|@]|A|@]|B|$]]|$2|11|4|12|6|G|8|1N|9|@]|A|@]|B|$H|I]]|$2|13|4|14|6|7|8|1O|9|@]|A|@]|B|$]]|$2|15|4|16|6|7|8|1P|9|@]|A|@]|B|$]]|$2|17|4|18|6|G|8|1Q|9|@]|A|@]|B|$H|I]]|$2|19|4|1A|6|7|8|1R|9|@]|A|@]|B|$]]]]

There are several ways to configure angular2 with Bootstrap, one of the most complete ways to get the most of it is to use ng-bootstrap, using this configuration we give to algular2 complete control over our DOM, avoiding the need to use JQuery and Boostrap.js.

1-Take as a starting point a new project created with Angular-CLI and using the command line, install ng-bootstrap:

<pre><code>npm install @ng-bootstrap/ng-bootstrap --save
</code></pre>

Note: More info at <a href="https://ng-bootstrap.github.io/#/getting-started" rel="noreferrer">https://ng-bootstrap.github.io/#/getting-started</a>

2-Then we need to install bootstrap for the css and the grid system.

<pre><code>npm install bootstrap@4.0.0-beta.2 --save
</code></pre>

Note: More info at <a href="https://getbootstrap.com/docs/4.0/getting-started/download/" rel="noreferrer">https://getbootstrap.com/docs/4.0/getting-started/download/</a>

Now we have the setup the environment and for that we have to change the .angular-cli.json adding to the style:

<pre><code>"../node_modules/bootstrap/dist/css/bootstrap.min.css"
</code></pre>

Here is an example:

<pre><code>"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"
 }
 }
 ]
</code></pre>

The next step is to add the ng-boostrap module to our project, to do so we need to add on the app.module.ts:

<pre><code>import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
</code></pre>

Then add the new module to the application app: NgbModule.forRoot()

Example:

<pre><code>@NgModule({
 declarations: [
 AppComponent,
 AppNavbarComponent
 ],
 imports: [
 BrowserModule,
 NgbModule.forRoot()
 ],
 providers: [],
 bootstrap: [AppComponent]
})
</code></pre>

Now we can start using bootstrap4 on our angular2/5 project.

entityMap|blocks|key|81pg|text|使用Angular+6%2B和Bootstrap+4%2B的过程：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7ce7u|在项目的文件夹中打开一个shell|39ifa|使用以下命令安装bootstrapBootstrapnpm+install+--save+bootstrap@4.1.3|bckrr|需要依赖项jquery，所以如果您没有依赖项jquery，可以使用以下命令进行安装：npm+install+--save+jquery+1.9.1|7b9tc|您可能需要使用以下命令修复漏洞：|ehbjd|在主style.scss文件中，添加以下行：npm+audit+fix|e5qc6|或者@import+"../node_modules/bootstrap/dist/css/bootstrap.min.css";|2bot2|将下面这一行添加到主index.html文件中：^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Q|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|R|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|S|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|T|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|U|9|@]|A|@]|B|$]]|$2|K|4|L|6|7|8|V|9|@]|A|@]|B|$]]|$2|M|4|N|6|7|8|W|9|@]|A|@]|B|$]]|$2|O|4|P|6|7|8|X|9|@]|A|@]|B|$]]]]

Procedure with Angular 6+ &amp; Bootstrap 4+ : 

<ol>
<li>Open a shell on the folder of your project</li>
<li>Install bootstrap with the command : <code>npm install --save bootstrap@4.1.3</code></li>
<li>Bootstrap need the dependency jquery, so if you don't have it, you can install it with the command : <code>npm install --save jquery 1.9.1</code></li>
<li>You may need to fix vulnerability with the command : <code>npm audit fix</code></li>
<li>In your main style.scss file, add the following line : <code>@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";</code></li>
</ol>

OR

Add this line to your main index.html file : <code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;</code>

entityMap|blocks|key|f8lm9|text|我的建议是，不要在json指示笔中声明它，而是将它放在scss中，这样所有东西都被编译并放在一个地方。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|76ium|1)使用npm安装bootstrap|6ld2r|npm+install+bootstrap|code-block|syntax|javascript|b5l3m|2)使用我们的样式在css中声明bootstrap+npm|91aoc|创建_bootstrap-custom.scss:|offset|length|style|CODE|5a3en|//+Required
++@import+"bootstrap-custom-required";


++//+Optional
++@import+"~bootstrap/scss/root";
++@import+"~bootstrap/scss/grid";
++@import+"~bootstrap/scss/tables";

++++...
++++..
++++.|cuf7c|3)在我们插入的styles.scss中|cn4om|@import+"bootstrap-custom";|cfcad|所以我们将编译我们所有的核心并放在一个地方^0|0|0|0|0|2|M|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|Z|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|10|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|11|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|12|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|13|9|@$N|14|O|15|P|Q]]|A|@]|B|$]]|$2|R|4|S|6|G|8|16|9|@]|A|@]|B|$H|I]]|$2|T|4|U|6|7|8|17|9|@]|A|@]|B|$]]|$2|V|4|W|6|G|8|18|9|@]|A|@]|B|$H|I]]|$2|X|4|Y|6|7|8|19|9|@]|A|@]|B|$]]]]

My recommendation would be instead of declaring it in the json stylus to put it in the scss so that everything is compiled and in one place.

1)install bootstrap with npm

<pre><code> npm install bootstrap
</code></pre>

2) Declare bootstrap npm in the css with our styles

Create <code>_bootstrap-custom.scss</code>:

<pre><code> // Required
 @import "bootstrap-custom-required";


 // Optional
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/grid";
 @import "~bootstrap/scss/tables";

 ...
 ..
 .
</code></pre>

3) Within the styles.scss we insert

<pre><code>@import "bootstrap-custom";
</code></pre>

so we will have all our core compiled and in one place

entityMap|blocks|key|22ee6|text|将这个添加到你的package.json中，“dependency”|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e5cap|"bootstrap"："%5E3.3.7"，|48n1f|在.angular-cli.json文件中，在“Styles”中添加|cok0n|"../node_modules/bootstrap/dist/css/bootstrap.css"|code-block|syntax|javascript|92g35|使用以下命令更新您的npm|dcdka|npm更新^0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|P|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|Q|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|R|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|S|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|T|9|@]|A|@]|B|$]]|$2|N|4|O|6|7|8|U|9|@]|A|@]|B|$]]]]

Add this to your package.json , “dependency”
&quot;bootstrap&quot;: &quot;^3.3.7&quot;,
In .angular-cli.json file, to your “Styles” add
<pre><code>&quot;../node_modules/bootstrap/dist/css/bootstrap.css&quot;
</code></pre>
update your npm by using this command
npm update

I am starting my first Angular application and my basic setup is done.

How can I add Bootstrap to my application?

If you can provide an example then it would be a great help.

How to use Bootstrap in an Angular project?

 我要开始我的第一次角度应用程序，我的基本设置就完成了。如何添加引导我的申请吗？ 如果你能提供一个例子，那将是一个很大的帮助。

问如何在Angular项目中使用Bootstrap？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular项目中使用Bootstrap？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在Angular项目中使用Bootstrap？
EN