blocks|key|116293|text|重要更新：+ng2-bootstrap现已被ngx-bootstrap取代|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|116294|ngx-bootstrap同时支持Angular+3和4。|116295|更新:+1.0.0-beta.11-webpack或以上版本|116296|首先，在终端中使用以下命令检查您的angular-cli版本：|116297|ng+-v|code-block|syntax|javascript|116298|如果您的angular-cli版本高于1.0.0-beta.11-webpack，则应执行以下步骤：|116299|116300|安装ngx-bootstrap和bootstrapnpm安装ngx-bootstrap+bootstrap+--保存|ordered-list-item|116301|116302|这一行现在安装Bootstrap+3，但将来可以安装Bootstrap+4。请记住，ngx-bootstrap支持这两个版本。|116303|打开src/app/app.module.ts并添加|116304|：|116305|116306|从‘ngx-bootstrap’导入{+AlertModule+}；...+@NgModule({+...导入:+AlertModule.forRoot()，...，...+})打开angular-cli.json+(对于angular6和更高版本，文件名更改为angular.json+)，并在styles数组中插入一个新条目：|CODE|116307|“src/app/app.component.html”："styles.css"，"../node_modules/bootstrap/dist/css/bootstrap.min.css“，|116308|打开样式并添加：|unordered-list-item|116309|116310|你好，|116311|1.0.0-beta.10及以下版本：|116312|而且，如果您的angular-cli版本是1.0.0-beta.10或更低，那么您可以使用以下步骤。|116313|首先，转到项目目录并输入：|116314|npm+install+ngx-bootstrap+--save|116315|然后，打开您的angular-cli-build.js并添加以下行：|116316|vendorNpmFiles:+[
+++...
+++'ngx-bootstrap/**/*.js',
+++...
]|116317|现在，打开你的src/system-config.ts，然后写：|116318|const+map:any+=+{
+++...
+++'ngx-bootstrap':+'vendor/ngx-bootstrap',
+++...
}|116319|...and：|116320|const+packages:+any+=+{
++'ngx-bootstrap':+{
++++format:+'cjs',
++++defaultExtension:+'js',
++++main:+'ngx-bootstrap.js'
++}
};|116321|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/valor-software/ngx-bootstrap^0|0|5|M|D|0|0|0|0|3|0|H|B|0|0|4|B|0|0|0|0|0|2|L|0|0|0|2J|G|3N|C|44|6|0|1|Q|0|0|0|0|0|J|0|7|B|0|0|0|7|K|0|0|7|K|0|0|0|0^^$0|@$1|2|3|4|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@$9|2A|A|2B|1|2C]]|E|$]]|$1|F|3|G|5|6|7|2D|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2E|8|@$9|2F|A|2G|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|2H|8|@$9|2I|A|2J|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|2K|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|2L|8|@$9|2M|A|2N|B|C]]|D|@]|E|$]]|$1|S|3|-4|5|6|7|2O|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|2P|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|2R|8|@]|D|@]|E|$]]|$1|Z|3|10|5|6|7|2S|8|@$9|2T|A|2U|B|C]]|D|@]|E|$]]|$1|11|3|12|5|V|7|2V|8|@]|D|@]|E|$]]|$1|13|3|-4|5|6|7|2W|8|@]|D|@]|E|$]]|$1|14|3|15|5|6|7|2X|8|@$9|2Y|A|2Z|B|C]|$9|30|A|31|B|C]|$9|32|A|33|B|16]]|D|@]|E|$]]|$1|17|3|18|5|6|7|34|8|@$9|35|A|36|B|C]]|D|@]|E|$]]|$1|19|3|1A|5|1B|7|37|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|38|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|39|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|3A|8|@$9|3B|A|3C|B|C]]|D|@]|E|$]]|$1|1H|3|1I|5|6|7|3D|8|@$9|3E|A|3F|B|C]]|D|@]|E|$]]|$1|1J|3|1K|5|6|7|3G|8|@]|D|@]|E|$]]|$1|1L|3|1M|5|N|7|3H|8|@]|D|@]|E|$O|P]]|$1|1N|3|1O|5|6|7|3I|8|@$9|3J|A|3K|B|C]]|D|@]|E|$]]|$1|1P|3|1Q|5|N|7|3L|8|@]|D|@]|E|$O|P]]|$1|1R|3|1S|5|6|7|3M|8|@$9|3N|A|3O|B|C]]|D|@]|E|$]]|$1|1T|3|1U|5|N|7|3P|8|@]|D|@]|E|$O|P]]|$1|1V|3|1W|5|6|7|3Q|8|@]|D|@]|E|$]]|$1|1X|3|1Y|5|N|7|3R|8|@]|D|@]|E|$O|P]]|$1|1Z|3|-4|5|6|7|3S|8|@]|D|@]|E|$]]]|20|$21|$5|22|23|24|E|$25|26]]]]

IMPORTANT UPDATE: ng2-bootstrap is now replaced by <a href="https://github.com/valor-software/ngx-bootstrap" rel="noreferrer">ngx-bootstrap</a>

ngx-bootstrap supports both Angular 3 and 4. 

Update : 1.0.0-beta.11-webpack or above versions

First of all check your angular-cli version with the following command in the terminal:

<pre><code>ng -v
</code></pre>

If your angular-cli version is greater than 1.0.0-beta.11-webpack, then you should follow these steps:

<ol>
<li>Install ngx-bootstrap and bootstrap: 

<pre><code>npm install ngx-bootstrap bootstrap --save
</code></pre></li>
</ol>

This line installs Bootstrap 3 nowadays, but can install Bootstrap 4 in the future. Keep in mind ngx-bootstrap supports both versions.

<ol start="2">
<li>Open src/app/app.module.ts and add:

<pre><code>import { AlertModule } from 'ngx-bootstrap';
...
@NgModule({
...
imports: [AlertModule.forRoot(), ... ],
... 
})
</code></pre></li>
<li>Open angular-cli.json (for angular6 and later file name changed to angular.json ) and insert a new entry into the <code>styles</code> array:

<pre><code>"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
</code></pre></li>
<li>Open src/app/app.component.html and add:

<pre><code>&lt;alert type="success"&gt;hello&lt;/alert&gt;
</code></pre></li>
</ol>

1.0.0-beta.10 or below versions:

And, if your angular-cli version is 1.0.0-beta.10 or below, then you can use below steps.

First, go to the project directory and type:

<pre><code>npm install ngx-bootstrap --save
</code></pre>

Then, open your angular-cli-build.js and add this line:

<pre><code>vendorNpmFiles: [
 ...
 'ngx-bootstrap/**/*.js',
 ...
]
</code></pre>

Now, open your src/system-config.ts then write:

<pre><code>const map:any = {
 ...
 'ngx-bootstrap': 'vendor/ngx-bootstrap',
 ...
}
</code></pre>

...and:

<pre><code>const packages: any = {
 'ngx-bootstrap': {
 format: 'cjs',
 defaultExtension: 'js',
 main: 'ngx-bootstrap.js'
 }
};
</code></pre>

blocks|key|116140|text|更新v1.0.0-beta.26|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|116141|您可以在文档上看到导入引导程序here的新方法|116142|如果仍然不起作用，请使用命令ng+serve重新启动|116143|1.0.0及以下版本：|116144|在index.html文件中，您只需要bootstrap+css链接(不需要js脚本)|116145|<link+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"+rel="stylesheet">|code-block|syntax|javascript|116146|和|116147|npm+install+ng2-bootstrap+--save
npm+install+moment+--save|116148|在my_project/src/system-config.ts中安装ng2-bootstrap后:|116149|/**+Map+relative+paths+to+URLs.+*/
const+map:+any+=+{
++'moment':+'vendor/moment/moment.js',
++'ng2-bootstrap':+'vendor/ng2-bootstrap'
};

/**+User+packages+configuration.+*/
const+packages:+any+=+{
++'ng2-bootstrap':+{
++++defaultExtension:+'js'
++},
++'moment':{
+++++format:+'cjs'
++}
};|116150|在my_project/angular-cli-build.js中:|116151|module.exports+=+function+(defaults)+{
return+new+Angular2App(defaults,+{
++++vendorNpmFiles:+[
++++++++'ng2-bootstrap/**/*',
++++++++'moment/moment.js'
++++]
});
};|116152|不要忘了使用以下命令将您的模块放入供应商:|116153|ng+build|116154|从另一个具有相同原理的模块导入。|116155|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md|1|https://github.com/valor-software/ng2-bootstrap^0|0|G|0|F|4|0|0|0|0|B|0|0|0|0|0|1|1D|Z|D|1|0|0|1|X|0|0|0|L|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|H|3|I|5|6|7|1R|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1S|8|@$9|1T|A|1U|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|1V|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1W|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|1X|8|@]|D|@]|E|$]]|$1|U|3|V|5|P|7|1Y|8|@]|D|@]|E|$Q|R]]|$1|W|3|X|5|6|7|1Z|8|@$9|20|A|21|B|C]]|D|@$9|22|A|23|1|24]]|E|$]]|$1|Y|3|Z|5|P|7|25|8|@]|D|@]|E|$Q|R]]|$1|10|3|11|5|6|7|26|8|@$9|27|A|28|B|C]]|D|@]|E|$]]|$1|12|3|13|5|P|7|29|8|@]|D|@]|E|$Q|R]]|$1|14|3|15|5|6|7|2A|8|@$9|2B|A|2C|B|C]]|D|@]|E|$]]|$1|16|3|17|5|P|7|2D|8|@]|D|@]|E|$Q|R]]|$1|18|3|19|5|6|7|2E|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2F|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H]]|1I|$5|1D|1E|1F|E|$1G|1J]]]]

Update v1.0.0-beta.26 

You can see on the doc for the new way for importing bootstrap <a href="https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md" rel="noreferrer">here</a>

If it still does not work, restart with the command ng serve

1.0.0 or below versions:

In your index.html file you just need bootstrap css link (no need js scripts)

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

And 

<pre><code>npm install ng2-bootstrap --save
npm install moment --save
</code></pre>

After having installed <a href="https://github.com/valor-software/ng2-bootstrap" rel="noreferrer">ng2-bootstrap</a> in my_project/src/system-config.ts :

<pre><code>/** Map relative paths to URLs. */
const map: any = {
 'moment': 'vendor/moment/moment.js',
 'ng2-bootstrap': 'vendor/ng2-bootstrap'
};

/** User packages configuration. */
const packages: any = {
 'ng2-bootstrap': {
 defaultExtension: 'js'
 },
 'moment':{
 format: 'cjs'
 }
};
</code></pre>

And in my_project/angular-cli-build.js : 

<pre><code>module.exports = function (defaults) {
return new Angular2App(defaults, {
 vendorNpmFiles: [
 'ng2-bootstrap/**/*',
 'moment/moment.js'
 ]
});
};
</code></pre>

Don't forget this command 
to put your module in the vendor : 

<pre><code>ng build
</code></pre>

to import from another module that is the same principle.

blocks|key|116344|text|在https://github.com/angular/angular-cli上查找关键字>全局库安装可以帮助您找到答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|116345|根据他们的文档，你可以采取以下步骤来添加Bootstrap库。|116346|首先从npm安装Bootstrap：|116347|npm+install+bootstrap@next|code-block|syntax|javascript|116348|然后将所需的脚本文件添加到angular-cli.json文件中的apps.scripts：|116349|+"scripts":+[
++++"../node_modules/bootstrap/dist/js/bootstrap.js"
++++],|116350|最后，将Bootstrap+CSS添加到apps.styles数组中：|116351|"styles":+[
++++"styles.css",
++++"../node_modules/bootstrap/dist/css/bootstrap.css"
++++],|116352|如果您正在运行ng+serve，请重新启动它，Bootstrap4应该可以在您的应用程序上运行。|style|BOLD|116353|这是最好的解决方案。但是如果你不重新启动ng服务，它就永远不会工作。强烈建议您执行最后一项操作。|116354|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli^0|1|12|0|0|0|0|0|0|0|0|0|0|1C|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|D|3|E|5|6|7|1C|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1D|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1E|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1G|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1H|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1I|8|@]|9|@]|C|$K|L]]|$1|U|3|V|5|6|7|1J|8|@$A|1K|B|1L|W|X]]|9|@]|C|$]]|$1|Y|3|Z|5|6|7|1M|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1N|8|@]|9|@]|C|$]]]|11|$12|$5|13|14|15|C|$16|17]]]]

Looking up for the key word > Global Library Installation
on <a href="https://github.com/angular/angular-cli">https://github.com/angular/angular-cli</a> helps you finding the answer.

As per their document, you can take following steps to add Bootstrap library.

First install Bootstrap from npm:

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

Then add the needed script files to to apps[0].scripts in angular-cli.json file:

<pre><code> "scripts": [
 "../node_modules/bootstrap/dist/js/bootstrap.js"
 ],
</code></pre>

Finally add the Bootstrap CSS to the apps[0].styles array:

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

Restart ng serve if you're running it, and Bootstrap 4 should be working on your app.

This is best solution.
But if you don't restart ng serve it never works. It is strongly recommended to do this last action.

blocks|key|116359|text|您还可以观看Mike+Brocchi的视频，其中包含有关如何将bootstrap添加到Angular-Cli生成的项目的有用信息。https://www.youtube.com/watch?v=obbdFFbjLIU+(大约13:00分钟)|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|116360|entityMap|0|LINK|mutability|MUTABLE|url|https://www.youtube.com/watch?v=obbdFFbjLIU^0|1T|17|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can also watch this video by Mike Brocchi which has useful information on how to add bootstrap to your Angular-Cli generated project. 
<a href="https://www.youtube.com/watch?v=obbdFFbjLIU" rel="nofollow">https://www.youtube.com/watch?v=obbdFFbjLIU</a> (around minutes 13:00)

blocks|key|2663351|text|首先，您必须使用以下命令安装tether、jquery和bootstrap|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2663352|npm+i+-S+tether
npm+i+-S+jquery
npm+i+-S+bootstrap@4.0.0-alpha.4+|code-block|syntax|javascript|2663353|在将这些行添加到angular-cli.json+(从版本6开始的angular.json)文件中之后|2663354|++"styles":+[
++++"styles.scss",
++++"../node_modules/bootstrap/scss/bootstrap-flex.scss"
++],
++"scripts":+[
++++"../node_modules/jquery/dist/jquery.js",
++++"../node_modules/tether/dist/js/tether.js",
++++"../node_modules/bootstrap/dist/js/bootstrap.js"
++]|2663355|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

At first, you have to install tether, jquery and bootstrap with these commands

<pre><code>npm i -S tether
npm i -S jquery
npm i -S bootstrap@4.0.0-alpha.4 
</code></pre>

After add these lines in your angular-cli.json (angular.json from version 6 onwards) file 

<pre><code> "styles": [
 "styles.scss",
 "../node_modules/bootstrap/scss/bootstrap-flex.scss"
 ],
 "scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/tether/dist/js/tether.js",
 "../node_modules/bootstrap/dist/js/bootstrap.js"
 ]
</code></pre>

blocks|key|2874354|text|执行以下操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2874355|npm+i+bootstrap@next+--save|code-block|syntax|javascript|2874356|这会将bootstrap+4添加到您的项目中。|2874357|接下来，转到您的src/style.scss或src/style.css文件(选择您正在使用的文件)，并导入bootstrap：|offset|length|style|CODE|2874358|对于style.css|2874359|/*+You+can+add+global+styles+to+this+file,+and+also+import+other+style+files+*/
@import+"../node_modules/bootstrap/dist/css/bootstrap.min.css";|2874360|对于style.scss|2874361|/*+You+can+add+global+styles+to+this+file,+and+also+import+other+style+files+*/
@import+"../node_modules/bootstrap/scss/bootstrap";|2874362|对于脚本，您仍然需要将文件添加到angular-cli.json文件中，如下所示(在Angular版本6中，此编辑需要在文件angular.json__)中完成|BOLD|2874363|"scripts":+[
++++++++"../node_modules/jquery/dist/jquery.js",
++++++++"../node_modules/tether/dist/js/tether.js",
++++++++"../node_modules/bootstrap/dist/js/bootstrap.js"
],|2874364|entityMap^0|0|0|0|8|E|N|D|0|0|0|0|0|1Q|C|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|16|8|@$K|17|L|18|M|N]|$K|19|L|1A|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1C|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1E|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1F|8|@$K|1G|L|1H|M|Y]]|9|@]|A|$]]|$1|Z|3|10|5|D|7|1I|8|@]|9|@]|A|$E|F]]|$1|11|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|12|$]]

Do the following:

<pre><code>npm i bootstrap@next --save
</code></pre>

This will add bootstrap 4 to your project.

Next go to your <code>src/style.scss</code> or <code>src/style.css</code> file (choose whichever you are using) and import bootstrap there:

For style.css

<pre><code>/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
</code></pre>

For style.scss

<pre><code>/* You can add global styles to this file, and also import other style files */
@import "../node_modules/bootstrap/scss/bootstrap";
</code></pre>

For scripts you will still have to add the file in the angular-cli.json file like so (In Angular version 6, this edit needs to be done in the file angular.json):

<pre><code>"scripts": [
 "../node_modules/jquery/dist/jquery.js",
 "../node_modules/tether/dist/js/tether.js",
 "../node_modules/bootstrap/dist/js/bootstrap.js"
],
</code></pre>

blocks|key|2663465|text|我猜上面的方法在发布后发生了变化，请查看此链接|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2663466|https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md|offset|length|2663467|启动项目|style|BOLD|2663468|npm+i+-g+angular-cli
ng+new+my-app
cd+my-app
ng+serve
npm+install+--save+@ng-bootstrap/ng-bootstrap|code-block|syntax|javascript|2663469|引导安装ng-和bootstrap|2663470|npm+install+ng2-bootstrap+bootstrap+--save|2663471|打开src/app/app.module.ts并添加|2663472|import+{+AlertModule+}+from+'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
+++...
+++imports:+[AlertModule,+...+],
++++...+
})|2663473|打开angular-cli.json并在样式数组中插入一个新条目|2663474|"styles":+[
++++++++"styles.css",
++++++++"../node_modules/bootstrap/dist/css/bootstrap.min.css"
++++++],|2663475|打开src/app/app.component.html并通过添加来测试所有工作|2663476|<alert+type="success">hello</alert>|2663477|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|2N|0|0|0|4|0|0|7|A|0|0|0|Q|0|0|0|O|0|0|0|X|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1C|8|@]|9|@$D|1D|E|1E|1|1F]]|A|$]]|$1|F|3|G|5|6|7|1G|8|@$D|1H|E|1I|H|I]]|9|@]|A|$]]|$1|J|3|K|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1K|8|@$D|1L|E|1M|H|I]]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1N|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1O|8|@$D|1P|E|1Q|H|I]]|9|@]|A|$]]|$1|U|3|V|5|L|7|1R|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1S|8|@$D|1T|E|1U|H|I]]|9|@]|A|$]]|$1|Y|3|Z|5|L|7|1V|8|@]|9|@]|A|$M|N]]|$1|10|3|11|5|6|7|1W|8|@$D|1X|E|1Y|H|I]]|9|@]|A|$]]|$1|12|3|13|5|L|7|1Z|8|@]|9|@]|A|$M|N]]|$1|14|3|-4|5|6|7|20|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|C]]]]

I guess the above methods have changed after the release, check this link out

<a href="https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md" rel="noreferrer">https://github.com/valor-software/ng2-bootstrap/blob/development/docs/getting-started/ng-cli.md</a>

initiate project

<pre><code>npm i -g angular-cli
ng new my-app
cd my-app
ng serve
npm install --save @ng-bootstrap/ng-bootstrap
</code></pre>

install ng-bootstrap and bootstrap

<pre><code>npm install ng2-bootstrap bootstrap --save
</code></pre>

open src/app/app.module.ts and add

<pre><code>import { AlertModule } from 'ng2-bootstrap/ng2-bootstrap';
...

@NgModule({
 ...
 imports: [AlertModule, ... ],
 ... 
})
</code></pre>

open angular-cli.json and insert a new entry into the styles array

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

open src/app/app.component.html and test all works by adding

<pre><code>&lt;alert type="success"&gt;hello&lt;/alert&gt;
</code></pre>

blocks|key|2663481|text|在bash+npm+install+ng2-bootstrap+bootstrap+--save|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2663482|Add/Change中运行|unordered-list-item|2663483|，在angular-cli.json中执行以下命令|ordered-list-item|2663484|2663485|2663486|"styles":+[+++++"../node_modules/bootstrap/dist/css/bootstrap.min.css"+++],+++"scripts":+[+++++"../node_modules/jquery/dist/jquery.min.js",+++++"../node_modules/bootstrap/dist/js/bootstrap.min.js"+++++],|2663487|entityMap^0|6|16|0|0|2|G|0|0|0|0|5N|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|U|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|P|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|Q|$]]

<ol>
<li>Run in bash <code>npm install ng2-bootstrap bootstrap --save</code></li>
<li>Add/Change the following in <code>angular-cli.json</code> 
<code>"styles": [
 "../node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],
 "scripts": [
 "../node_modules/jquery/dist/jquery.min.js",
 "../node_modules/bootstrap/dist/js/bootstrap.min.js"
 ],</code></li>
</ol>

blocks|key|116312|text|尝尝这个|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116313|npm+install+bootstrap@next|code-block|syntax|javascript|116314|https://github.com/angular/angular-cli#global-library-installation|offset|length|116315|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|1U|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

Try this

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

<a href="https://github.com/angular/angular-cli#global-library-installation" rel="nofollow noreferrer">https://github.com/angular/angular-cli#global-library-installation</a>

blocks|key|2874456|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2874457|安装引导|ordered-list-item|2874458|2874459|npm将bootstrap@next|2874460|Add代码安装到.angular-cli.json：|unordered-list-item|2874461|2874462|“样式”：“样式”，"../node_modules/bootstrap/dist/css/bootstrap.css“，”脚本“：”../节点模块/jquery/dist/jquery.js“，”../节点模块/styles.css/tether/dist/js/tether.js“，"../node_modules/bootstrap/dist/js/bootstrap.js”，|2874463|最后一次将bootstrap.css添加到您的代码style.scss|2874464|2874465|@导入您的本地服务器|2874466|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|T|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|U|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|V|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|W|7|@]|8|@]|9|$]]|$1|G|3|H|4|I|6|X|7|@]|8|@]|9|$]]|$1|J|3|-4|4|5|6|Y|7|@]|8|@]|9|$]]|$1|K|3|L|4|5|6|Z|7|@]|8|@]|9|$]]|$1|M|3|N|4|I|6|10|7|@]|8|@]|9|$]]|$1|O|3|-4|4|5|6|11|7|@]|8|@]|9|$]]|$1|P|3|Q|4|5|6|12|7|@]|8|@]|9|$]]|$1|R|3|-4|4|5|6|13|7|@]|8|@]|9|$]]]|S|$]]

<ol>
<li>Install bootstrap

<pre><code>npm install bootstrap@next
</code></pre></li>
<li>Add code to .angular-cli.json:

<pre><code>"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"
],
</code></pre></li>
<li>Last add bootstrap.css to your code style.scss

<pre><code>@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
</code></pre></li>
<li>Restart your local server</li>
</ol>

blocks|key|114109|text|在相应的项目目录中打开终端/命令提示符，然后键入以下命令。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114110|npm+install+--save+bootstrap|code-block|syntax|javascript|114111|然后打开.angular-cli.json文件，查找|114112|"styles":+[+++++++++"styles.css"+++++++],|offset|length|style|CODE|114113|将其更改为|114114|+"styles":+[
++++"../node_modules/bootstrap/dist/css/bootstrap.min.css",
++++"styles.css"
++],|114115|全都做完了。|114116|entityMap^0|0|0|0|0|15|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|Z|8|@$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|12|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

Open Terminal/command prompt in the respective project directory and type following command.

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

Then open .angular-cli.json file, Look for 

<code>"styles": [
 "styles.css"
 ],</code>

change that to 

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

All done.

blocks|key|116484|text|因为还没有人提到官方(angular-cli团队)关于如何包含Bootstrap的故事：https://github.com/angular/angular-cli/wiki/stories-include-bootstrap|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|116485|包含Bootstrap|116486|Bootstrap是一个流行的CSS框架，可以在Angular项目中使用。本指南将指导您将bootstrap添加到您的Angular+CLI项目中，并将其配置为使用bootstrap。|116487|使用CSS|116488|快速入门|116489|创建一个新项目并导航到该项目|116490|ng+new+my-app
cd+my-app|code-block|syntax|javascript|116491|安装引导程序|116492|创建并准备好新项目后，接下来需要将bootstrap作为依赖项安装到项目中。使用--save选项，依赖项将保存在package.json中|style|CODE|116493|#+version+3.x
npm+install+bootstrap+--save

#+version+4.x
npm+install+bootstrap@next+--save|116494|配置项目|116495|现在项目已经设置好了，必须将其配置为包含引导CSS。|116496|bootstrap.min.css+|116497|从project.|unordered-list-item|116498|Under的根目录打开文件|116499|该数组中的第一项是缺省项apps是一个允许对application.|116500|Specify应用外部全局样式的属性styles指向bootstrap.min.css|116501|的路径|116502|116503|完成后，它看起来应该如下所示：|116504|"styles":+[
++++++++"../node_modules/bootstrap/dist/css/bootstrap.min.css",
++++++++"styles.css"
++++++],|116505|注意：当您对.angular-cli.json进行更改时，您将需要重新启动ng+serve以获取配置更改。|BOLD|116506|测试项目|116507|打开app.component.html并添加以下标记：|116508|<button+class="btn+btn-primary">Test+Button</button>|116509|配置好应用程序后，运行ng+serve以在开发模式下运行应用程序。在浏览器中，导航到应用程序localhost:4200。验证是否出现bootstrap+styled按钮。|116510|使用SASS|116511|116512|116513|ng+new+my-app+--style=scss
cd+my-app|116514|116515|#+version+3.x
npm+install+bootstrap-sass+--save

#+version+4.x
npm+install+bootstrap@next+--save|116516|116517|在src/中创建一个空文件_variables.scss。|116518|如果您使用的是bootstrap-sass，请在_variables.scss中添加以下内容|116519|$icon-font-path:+'../node_modules/bootstrap-sass/assets/fonts/bootstrap/';|116520|在styles.scss中添加以下内容：|116521|//+version+3
@import+'variables';
@import+'../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

//+version+4
@import+'variables';
@import+'../node_modules/bootstrap/scss/bootstrap';|116522|116523|116524|<button+class="btn+btn-primary">Test+Button</button>|116525|配置好应用程序后，运行ng+serve以在开发模式下运行应用程序。在浏览器中，导航到应用程序localhost:4200。验证是否出现bootstrap+styled按钮。要确保使用您的变量，请打开_variables.scss并添加以下内容：|116526|$brand-primary:+red;|116527|返回浏览器以查看字体颜色更改。|116528|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli/wiki/stories-include-bootstrap|1|http://getbootstrap.com/|2^0|18|1X|0|0|2|9|1|0|0|9|2|0|0|0|0|0|0|14|6|0|0|0|0|0|H|0|0|1|C|4|1|I|6|Q|H|1|0|0|0|0|0|3|6|H|11|8|0|0|2|I|0|0|B|8|1A|E|0|0|0|0|0|0|0|0|1|4|D|F|0|7|E|O|F|0|0|1|B|0|0|0|2|I|0|0|B|8|1A|E|2R|F|0|0|0^^$0|@$1|2|3|4|5|6|7|32|8|@]|9|@$A|33|B|34|1|35]]|C|$]]|$1|D|3|E|5|6|7|36|8|@]|9|@$A|37|B|38|1|39]]|C|$]]|$1|F|3|G|5|6|7|3A|8|@]|9|@$A|3B|B|3C|1|3D]]|C|$]]|$1|H|3|I|5|6|7|3E|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|3F|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|3G|8|@]|9|@]|C|$]]|$1|N|3|O|5|P|7|3H|8|@]|9|@]|C|$Q|R]]|$1|S|3|T|5|6|7|3I|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|3J|8|@$A|3K|B|3L|W|X]]|9|@]|C|$]]|$1|Y|3|Z|5|P|7|3M|8|@]|9|@]|C|$Q|R]]|$1|10|3|11|5|6|7|3N|8|@]|9|@]|C|$]]|$1|12|3|13|5|6|7|3O|8|@]|9|@]|C|$]]|$1|14|3|15|5|6|7|3P|8|@$A|3Q|B|3R|W|X]]|9|@]|C|$]]|$1|16|3|17|5|18|7|3S|8|@]|9|@]|C|$]]|$1|19|3|1A|5|18|7|3T|8|@]|9|@]|C|$]]|$1|1B|3|1C|5|18|7|3U|8|@$A|3V|B|3W|W|X]]|9|@]|C|$]]|$1|1D|3|1E|5|18|7|3X|8|@$A|3Y|B|3Z|W|X]|$A|40|B|41|W|X]]|9|@]|C|$]]|$1|1F|3|1G|5|6|7|42|8|@]|9|@]|C|$]]|$1|1H|3|-4|5|6|7|43|8|@]|9|@]|C|$]]|$1|1I|3|1J|5|6|7|44|8|@]|9|@]|C|$]]|$1|1K|3|1L|5|P|7|45|8|@]|9|@]|C|$Q|R]]|$1|1M|3|1N|5|6|7|46|8|@$A|47|B|48|W|1O]|$A|49|B|4A|W|X]|$A|4B|B|4C|W|X]]|9|@]|C|$]]|$1|1P|3|1Q|5|6|7|4D|8|@]|9|@]|C|$]]|$1|1R|3|1S|5|6|7|4E|8|@$A|4F|B|4G|W|X]]|9|@]|C|$]]|$1|1T|3|1U|5|P|7|4H|8|@]|9|@]|C|$Q|R]]|$1|1V|3|1W|5|6|7|4I|8|@$A|4J|B|4K|W|X]|$A|4L|B|4M|W|X]]|9|@]|C|$]]|$1|1X|3|1Y|5|6|7|4N|8|@]|9|@]|C|$]]|$1|1Z|3|K|5|6|7|4O|8|@]|9|@]|C|$]]|$1|20|3|M|5|6|7|4P|8|@]|9|@]|C|$]]|$1|21|3|22|5|P|7|4Q|8|@]|9|@]|C|$Q|R]]|$1|23|3|T|5|6|7|4R|8|@]|9|@]|C|$]]|$1|24|3|25|5|P|7|4S|8|@]|9|@]|C|$Q|R]]|$1|26|3|11|5|6|7|4T|8|@]|9|@]|C|$]]|$1|27|3|28|5|6|7|4U|8|@$A|4V|B|4W|W|X]|$A|4X|B|4Y|W|X]]|9|@]|C|$]]|$1|29|3|2A|5|6|7|4Z|8|@$A|50|B|51|W|X]|$A|52|B|53|W|X]]|9|@]|C|$]]|$1|2B|3|2C|5|P|7|54|8|@]|9|@]|C|$Q|R]]|$1|2D|3|2E|5|6|7|55|8|@$A|56|B|57|W|X]]|9|@]|C|$]]|$1|2F|3|2G|5|P|7|58|8|@]|9|@]|C|$Q|R]]|$1|2H|3|1Q|5|6|7|59|8|@]|9|@]|C|$]]|$1|2I|3|1S|5|6|7|5A|8|@$A|5B|B|5C|W|X]]|9|@]|C|$]]|$1|2J|3|2K|5|P|7|5D|8|@]|9|@]|C|$Q|R]]|$1|2L|3|2M|5|6|7|5E|8|@$A|5F|B|5G|W|X]|$A|5H|B|5I|W|X]|$A|5J|B|5K|W|X]]|9|@]|C|$]]|$1|2N|3|2O|5|P|7|5L|8|@]|9|@]|C|$Q|R]]|$1|2P|3|2Q|5|6|7|5M|8|@]|9|@]|C|$]]|$1|2R|3|-4|5|6|7|5N|8|@]|9|@]|C|$]]]|2S|$2T|$5|2U|2V|2W|C|$2X|2Y]]|2Z|$5|2U|2V|2W|C|$2X|30]]|31|$5|2U|2V|2W|C|$2X|30]]]]

Since nobody referred to the official (angular-cli team) story on how to include Bootstrap yet: <a href="https://github.com/angular/angular-cli/wiki/stories-include-bootstrap" rel="noreferrer">https://github.com/angular/angular-cli/wiki/stories-include-bootstrap</a>

<h1>Include <a href="http://getbootstrap.com/" rel="noreferrer">Bootstrap</a></h1>

<a href="http://getbootstrap.com/" rel="noreferrer">Bootstrap</a> is a popular CSS framework which can be used within an Angular project.
This guide will walk you through adding bootstrap to your Angular CLI project and configuring it to use bootstrap.

<h2>Using CSS</h2>

<h3>Getting Started</h3>

Create a new project and navigate into the project

<pre><code>ng new my-app
cd my-app
</code></pre>

<h3>Installing Bootstrap</h3>

With the new project created and ready you will next need to install bootstrap to your project as a dependency.
Using the <code>--save</code> option the dependency will be saved in package.json

<pre><code># version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save
</code></pre>

<h3>Configuring Project</h3>

Now that the project is set up it must be configured to include the bootstrap CSS.

<ul>
<li>Open the file <code>.angular-cli.json</code> from the root of your project.</li>
<li>Under the property <code>apps</code> the first item in that array is the default application.</li>
<li>There is a property <code>styles</code> which allows external global styles to be applied to your application.</li>
<li>Specify the path to <code>bootstrap.min.css</code></li>
</ul>

It should look like the following when you are done:

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

Note: When you make changes to <code>.angular-cli.json</code> you will need to re-start <code>ng serve</code> to pick up configuration changes.

<h3>Testing Project</h3>

Open <code>app.component.html</code> and add the following markup:

<pre><code>&lt;button class="btn btn-primary"&gt;Test Button&lt;/button&gt;
</code></pre>

With the application configured, run <code>ng serve</code> to run your application in develop mode.
In your browser navigate to the application <code>localhost:4200</code>.
Verify the bootstrap styled button appears.

<h2>Using SASS</h2>

<h3>Getting Started</h3>

Create a new project and navigate into the project

<pre><code>ng new my-app --style=scss
cd my-app
</code></pre>

<h3>Installing Bootstrap</h3>

<pre><code># version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save
</code></pre>

<h3>Configuring Project</h3>

Create an empty file <code>_variables.scss</code> in <code>src/</code>.

If you are using <code>bootstrap-sass</code>, add the following to <code>_variables.scss</code>:

<pre><code>$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';
</code></pre>

In <code>styles.scss</code> add the following:

<pre><code>// version 3
@import 'variables';
@import '../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap';

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';
</code></pre>

<h3>Testing Project</h3>

Open <code>app.component.html</code> and add the following markup:

<pre><code>&lt;button class="btn btn-primary"&gt;Test Button&lt;/button&gt;
</code></pre>

With the application configured, run <code>ng serve</code> to run your application in develop mode.
In your browser navigate to the application <code>localhost:4200</code>.
Verify the bootstrap styled button appears.
To ensure your variables are used open <code>_variables.scss</code> and add the following:

<pre><code>$brand-primary: red;
</code></pre>

Return the browser to see the font color changed.

blocks|key|113847|text|由于这变得如此令人困惑，并且这里的答案完全是混合的，我只建议使用官方ui-team+for+BS4+repo+(是的，有太多这样的repos用于NG-Bootstrap。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|113848|只需按照此处的说明https://github.com/ng-bootstrap/ng-bootstrap即可获取BS4。|113849|引用lib：|113850|113851|这个库是由ui-bootstrap团队从头开始构建的。我们使用TypeScript，目标是Bootstrap4CSS框架。|blockquote|113852|113853|和Bootstrap+4一样，这个库还在开发中。请查看我们的问题列表，看看我们正在实施的所有事情。请随时在那里发表评论。|113854|113855|只需复制粘贴已有内容即可：|113856|npm+install+--save+@ng-bootstrap/ng-bootstrap|code-block|syntax|javascript|113857|安装完成后，您需要导入我们的主模块：|113858|import+{NgbModule}+from+'@ng-bootstrap/ng-bootstrap';|113859|唯一剩下的部分是在应用程序模块中列出导入的模块。对于根(顶层)模块，确切的方法将略有不同，您应该以类似于(请注意NgbModule.forRoot())的代码结束：|113860|import+{NgbModule}+from+'@ng-bootstrap/ng-bootstrap';

@NgModule({
++declarations:+[AppComponent,+...],
++imports:+[NgbModule.forRoot(),+...],++
++bootstrap:+[AppComponent]
})
export+class+AppModule+{
}|113861|应用程序中的其他模块可以简单地导入NgbModule：|113862|import+{NgbModule}+from+'@ng-bootstrap/ng-bootstrap';

@NgModule({
++declarations:+[OtherComponent,+...],
++imports:+[NgbModule,+...],+
})
export+class+OtherModule+{
}|113863|这似乎是迄今为止最一致的行为。|113864|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/ng-bootstrap/ng-bootstrap^0|W|H|0|9|18|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|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|H|3|I|5|6|7|1R|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1T|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1V|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|1X|8|@]|D|@]|E|$]]|$1|T|3|U|5|V|7|1Y|8|@]|D|@]|E|$W|X]]|$1|Y|3|Z|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|10|3|11|5|V|7|20|8|@]|D|@]|E|$W|X]]|$1|12|3|13|5|6|7|21|8|@]|D|@]|E|$]]|$1|14|3|15|5|V|7|22|8|@]|D|@]|E|$W|X]]|$1|16|3|17|5|6|7|23|8|@]|D|@]|E|$]]|$1|18|3|19|5|V|7|24|8|@]|D|@]|E|$W|X]]|$1|1A|3|1B|5|6|7|25|8|@]|D|@]|E|$]]|$1|1C|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|1D|$1E|$5|1F|1G|1H|E|$1I|1J]]]]

Since this became so confusing and the answers here are totally mixed I will just suggest going with the official ui-team for BS4 repo (yes there are so many of those repos for NG-Bootstrap. 

Just follow the instructions here <a href="https://github.com/ng-bootstrap/ng-bootstrap" rel="noreferrer">https://github.com/ng-bootstrap/ng-bootstrap</a> to get BS4. 

Quoting from the lib: 

<blockquote>
 This library is being built from scratch by the ui-bootstrap team. We
 are using TypeScript and targeting the Bootstrap 4 CSS framework.
 
 As with Bootstrap 4, this library is a work in progress. Please check
 out our list of issues to see all the things we are implementing. Feel
 free to make comments there.
</blockquote>

Just copy pasting what is there for the sake of it: 

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

Once installed you need to import our main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightly different for the root (top-level) module for which you should end up with the code similar to (notice NgbModule.forRoot()):

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

@NgModule({
 declarations: [AppComponent, ...],
 imports: [NgbModule.forRoot(), ...], 
 bootstrap: [AppComponent]
})
export class AppModule {
}
</code></pre>

Other modules in your application can simply import NgbModule:

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

@NgModule({
 declarations: [OtherComponent, ...],
 imports: [NgbModule, ...], 
})
export class OtherModule {
}
</code></pre>

This seems to be the most consistent behavior by far

blocks|key|2663620|text|angular-cli现在有一个专用的wiki+page，你可以在那里找到你需要的一切。TLDR，通过npm安装bootstrap，并将样式链接添加到.angular-cli.json文件中的“样式”部分|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2663621|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/angular/angular-cli/wiki/stories-include-bootstrap^0|0|B|1F|3|1K|9|23|H|J|9|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@$9|O|A|P|B|C]|$9|Q|A|R|B|C]|$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]]]

<code>angular-cli</code> now has a dedicated <a href="https://github.com/angular/angular-cli/wiki/stories-include-bootstrap" rel="nofollow noreferrer">wiki page</a> where you can find everything you need. TLDR, install <code>bootstrap</code> via <code>npm</code> and add the styles link to "styles" section in your <code>.angular-cli.json</code> file

blocks|key|113879|text|使用angular-cli和css时的工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113880|1.安装引导程序|113881|npm+install+bootstrap+tether+jquery+--save|113882|2.添加到.angular-cli.json|113883|++"styles":+[
++++"../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"
++],|code-block|syntax|javascript|113884|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Working example in case of using angular-cli and css :

1.install bootstrap

npm install bootstrap tether jquery --save

2.add to .angular-cli.json

<pre><code> "styles": [
 "../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"
 ],
</code></pre>

blocks|key|2663647|text|执行以下步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2663648|在.angular-cli.json中的|2663649|npm+install+--save+bootstrap|ordered-list-item|offset|length|style|CODE|2663650|And中，添加到样式部分：|2663651|2663652|"styles":+[+"../node_modules/bootstrap/dist/css/bootstrap.min.css",+"styles.css"]|2663653|在此之后，您必须重新启动ng服务。|2663654|尽情享受|2663655|entityMap^0|0|0|0|S|0|0|0|0|29|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|X|8|@$G|Y|H|Z|I|J]]|9|@]|A|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|12|8|@$G|13|H|14|I|J]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|15|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|16|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|U|$]]

Do the following steps:

<ol>
<li><code>npm install --save bootstrap</code></li>
<li>And in your .angular-cli.json, add to styles section: </li>
</ol>

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

After that, you must restart your ng serve

Enjoy

blocks|key|2663709|text|现在有了新的ng-bootstrap1.0.0-beta.5css版本，版本支持大多数基于Bootstrap的标记和CSS的本地Angular指令。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2663710|使用它唯一需要的依赖项是bootstrap。不需要使用jquery和popper.js依赖项。|CODE|2663711|ng-bootstrap是完全取代JavaScript实现的组件。因此，您不需要在.angular-cli.json的脚本部分中包含bootstrap.min.js。|2663712|当您将bootstrap与使用angular-cli最新版本生成的项目集成时，请遵循以下步骤。|2663713|2663714|在您的.angular-cli.json，bootstrap.min.css部分中插入样式。|unordered-list-item|2663715|2663716|“"../node_modules/bootstrap/dist/css/bootstrap.min.css”“：”ng-bootstrap“，styles.scss，|2663717|安装样式依赖。|2663718|2663719|npm+install+--将此@ng-bootstrap/ng-bootstrap|2663720|Add保存到您的主模块类。|2663721|2663722|从'@ng-bootstrap/ng-bootstrap';|2663723|Include导入{NgbModule}主模块导入部分中的以下内容。|2663724|2663725|@NgModule({+imports:+NgbModule.forRoot()，...，})|2663726|如果您要在这些模块类中使用ng-bootstrap组件，还可以在子模块中执行以下操作。|2663727|2663728|从'@+ng-bootstrap+/ng-bootstrap'；@NgModule({+imports:+NgbModule，...，})|2663729|导入{NgbModule}现在您的项目就可以使用可用的ng-bootstrap组件了。|2663730|2663731|entityMap^0|6|U|0|C|9|R|6|Y|9|0|1U|G|0|0|0|L|H|0|0|1M|C|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1L|8|@$9|1M|A|1N|B|H]|$9|1O|A|1P|B|C]|$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|I|3|J|5|6|7|1S|8|@$9|1T|A|1U|B|H]]|D|@]|E|$]]|$1|K|3|L|5|6|7|1V|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|N|3|O|5|P|7|1X|8|@$9|1Y|A|1Z|B|H]]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|20|8|@]|D|@]|E|$]]|$1|R|3|S|5|6|7|21|8|@$9|22|A|23|B|C]]|D|@]|E|$]]|$1|T|3|U|5|P|7|24|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|25|8|@]|D|@]|E|$]]|$1|W|3|X|5|6|7|26|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|P|7|27|8|@]|D|@]|E|$]]|$1|10|3|-4|5|6|7|28|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|29|8|@]|D|@]|E|$]]|$1|13|3|14|5|P|7|2A|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|2B|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|2C|8|@]|D|@]|E|$]]|$1|18|3|19|5|P|7|2D|8|@]|D|@]|E|$]]|$1|1A|3|-4|5|6|7|2E|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|2F|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|P|7|2G|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|2H|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|2I|8|@]|D|@]|E|$]]]|1H|$]]

Now with new ng-bootstrap 1.0.0-beta.5 version supports most of the native Angular directives based on Bootstrap's markup and CSS. 

The only dependency required to work with this is <code>bootstrap</code>. No Need to use jquery and popper.js dependencies.

ng-bootstrap is to completely replaced JavaScript implementation for components. So you don't need to include <code>bootstrap.min.js</code> in the scripts section in your .angular-cli.json.

follow these steps when you are integrating bootstrap with generated project with angular-cli latest version.

<ul>
<li>Inculde <code>bootstrap.min.css</code> in your .angular-cli.json, styles section.

<pre><code>"styles": [
 "styles.scss",
 "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
</code></pre></li>
<li>Install ng-bootstrap dependency.

<pre><code>npm install --save @ng-bootstrap/ng-bootstrap
</code></pre></li>
<li>Add this to your main module class.

<pre><code>import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
</code></pre></li>
<li>Include the following in your main module imports section.

<pre><code>@NgModule({
 imports: [NgbModule.forRoot(), ...],
})
</code></pre></li>
<li>Do the following also in your sub module(s) if you are going to use ng-bootstrap components inside those module classes.

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

@NgModule({
 imports: [NgbModule, ...],
})
</code></pre></li>
<li>Now your project is ready to use available ng-bootstrap components.</li>
</ul>

blocks|key|116610|text|使用npm安装引导程序|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116611|npm+install+boostrap@next+--save|code-block|syntax|javascript|116612|然后检查您的node_modules文件夹中的boostrap.css文件(在dist中)，路径通常是|116613|"../node_modules/bootstrap/dist/css/bootstrap.css",|116614|添加此路径%7C在style.css或style.scss中导入引导|116615|@import+"../node_modules/bootstrap/dist/css/bootstrap.css";++//bootstrap
@import+"~@angular/material/prebuilt-themes/indigo-pink.css+//+angular+material+theme|116616|就这样。|116617|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

install boostrap using npm 

<pre><code>npm install boostrap@next --save
</code></pre>

then check your node_modules folder for boostrap.css file(within dist) normally the path is 

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

add this path | import boostrap within style.css or style.scss

<pre><code>@import "../node_modules/bootstrap/dist/css/bootstrap.css"; //bootstrap
@import "~@angular/material/prebuilt-themes/indigo-pink.css // angular material theme
</code></pre>

that's it.

blocks|key|113930|text|用于Angular+5中Bootstrap+4的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113931|+步骤|blockquote|offset|length|style|BOLD|113932|113933|113934|113935|创建Angular+5项目|ordered-list-item|113936|113937|将新AngularBootstrapTest|113938|Move+ng添加到项目目录中|unordered-list-item|113939|113940|cd+AngularBootstrapTest|113941|Download引导程序|113942|113943|将bootstrap|113944|Add引导安装到npm项目中|113945|113946|4.1打开.angular-cli.json|113947|4.2在json中找到“style”部分。|113948|4.3添加引导css路径，如下所示|113949|。|113950|"styles"："../node_modules/bootstrap/dist/css/bootstrap.min.css"，"styles.css“，|113951|113952|现在您已经成功地在angular+5项目中添加了引导css|113953|113954|113955|测试引导程序|113956|打开src/app/app.component.html|CODE|113957|add引导程序按钮组件|113958|113959|113960|113961|113962|<button+type="button"+class="btn+btn-primary">Primary</button>|code-block|syntax|javascript|113963|你可以在这里引用按钮样式(+https://getbootstrap.com/docs/4.0/components/buttons/+)|113964|113965|保存文件|113966|运行项目|113967|113968|ng+serve+--open|113969|现在您将在页面中看到bootstrap+style按钮|113970|注意:如果您在ng+serve之后添加了引导路径，则必须停止并重新运行ng服务器以反映更改|113971|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/4.0/components/buttons/^0|0|1|2|0|0|0|0|0|D|0|0|0|M|0|5|A|0|0|0|N|0|0|C|0|0|0|A|0|8|6|0|0|0|M|0|0|L|0|0|H|0|0|1|0|0|25|0|0|0|T|0|0|0|0|6|0|0|S|2|Q|0|0|B|0|0|0|0|0|1|0|0|0|1X|E|1H|0|0|0|0|4|0|0|4|0|0|0|F|0|0|R|0|0|19|0^^$0|@$1|2|3|4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2N|8|@$E|2O|F|2P|G|H]]|9|@]|A|$]]|$1|I|3|-4|5|6|7|2Q|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|2R|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|2S|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|2T|8|@$E|2U|F|2V|G|H]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|2W|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|2X|8|@$E|2Y|F|2Z|G|H]]|9|@]|A|$]]|$1|R|3|S|5|T|7|30|8|@$E|31|F|32|G|H]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|33|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|34|8|@$E|35|F|36|G|H]]|9|@]|A|$]]|$1|X|3|Y|5|T|7|37|8|@$E|38|F|39|G|H]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|3A|8|@]|9|@]|A|$]]|$1|10|3|11|5|6|7|3B|8|@$E|3C|F|3D|G|H]]|9|@]|A|$]]|$1|12|3|13|5|T|7|3E|8|@$E|3F|F|3G|G|H]]|9|@]|A|$]]|$1|14|3|-4|5|6|7|3H|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|3I|8|@$E|3J|F|3K|G|H]]|9|@]|A|$]]|$1|17|3|18|5|6|7|3L|8|@$E|3M|F|3N|G|H]]|9|@]|A|$]]|$1|19|3|1A|5|6|7|3O|8|@$E|3P|F|3Q|G|H]]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|3R|8|@$E|3S|F|3T|G|H]]|9|@]|A|$]]|$1|1D|3|1E|5|6|7|3U|8|@$E|3V|F|3W|G|H]]|9|@]|A|$]]|$1|1F|3|-4|5|6|7|3X|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|D|7|3Y|8|@$E|3Z|F|40|G|H]]|9|@]|A|$]]|$1|1I|3|-4|5|6|7|41|8|@]|9|@]|A|$]]|$1|1J|3|-4|5|6|7|42|8|@]|9|@]|A|$]]|$1|1K|3|1L|5|6|7|43|8|@$E|44|F|45|G|H]]|9|@]|A|$]]|$1|1M|3|1N|5|6|7|46|8|@$E|47|F|48|G|H]|$E|49|F|4A|G|1O]]|9|@]|A|$]]|$1|1P|3|1Q|5|T|7|4B|8|@$E|4C|F|4D|G|H]]|9|@]|A|$]]|$1|1R|3|-4|5|N|7|4E|8|@]|9|@]|A|$]]|$1|1S|3|-4|5|6|7|4F|8|@]|9|@]|A|$]]|$1|1T|3|-4|5|6|7|4G|8|@]|9|@]|A|$]]|$1|1U|3|1C|5|6|7|4H|8|@$E|4I|F|4J|G|H]]|9|@]|A|$]]|$1|1V|3|1W|5|1X|7|4K|8|@]|9|@]|A|$1Y|1Z]]|$1|20|3|21|5|6|7|4L|8|@$E|4M|F|4N|G|H]]|9|@$E|4O|F|4P|1|4Q]]|A|$]]|$1|22|3|-4|5|6|7|4R|8|@]|9|@]|A|$]]|$1|23|3|24|5|N|7|4S|8|@$E|4T|F|4U|G|H]]|9|@]|A|$]]|$1|25|3|26|5|N|7|4V|8|@$E|4W|F|4X|G|H]]|9|@]|A|$]]|$1|27|3|-4|5|6|7|4Y|8|@]|9|@]|A|$]]|$1|28|3|29|5|6|7|4Z|8|@$E|50|F|51|G|H]]|9|@]|A|$]]|$1|2A|3|2B|5|6|7|52|8|@$E|53|F|54|G|H]]|9|@]|A|$]]|$1|2C|3|2D|5|6|7|55|8|@$E|56|F|57|G|H]]|9|@]|A|$]]|$1|2E|3|-4|5|6|7|58|8|@]|9|@]|A|$]]]|2F|$2G|$5|2H|2I|2J|A|$2K|2L]]]]

<blockquote>
 Steps for Bootstrap 4 in Angular 5
</blockquote>

<ol>
<li>Create Angular 5 Project 

ng new AngularBootstrapTest</li>
<li>Move to project directory 

cd AngularBootstrapTest</li>
<li>Download bootstrap

npm install bootstrap</li>
<li>Add Bootstrap to Project

4.1 open .angular-cli.json

4.2 find the "styles" section in the json

4.3 add the bootstrap css path as below

.

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

<blockquote>
 Now you have succesfully added the bootstrap css in angular 5 project
</blockquote>

Test bootstrap

<ol start="5">
<li>open <code>src/app/app.component.html</code></li>
<li>add bootstrap button component</li>
</ol>

.

<pre><code>&lt;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
</code></pre>

you can refer the button styles here( <a href="https://getbootstrap.com/docs/4.0/components/buttons/" rel="noreferrer">https://getbootstrap.com/docs/4.0/components/buttons/</a> )

<ol start="7">
<li>save the file</li>
<li>run the project

ng serve --open</li>
</ol>

Now You will see the bootstrap style button in the page

Note : 
 if you added bootstrap path after ng serve , you must stop and rerun the ng serve to reflect the changes

blocks|key|113976|text|使用angular-cli时的工作示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|113977|npm+i+bootstrap-schematics
ng+generate+bootstrap-shell+-c+bootstrap-schematics+-v+4
npm+install|code-block|syntax|javascript|113978|适用于css和scss。Bootstrap+v3和v4可用。|113979|有关bootstrap-schematics的更多信息，请访问here。|offset|length|113980|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/slupekdev/bootstrap-schematics/blob/master/src/shell/README.md^0|0|0|0|V|4|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

A working example in case of using angular-cli:

<pre><code>npm i bootstrap-schematics
ng generate bootstrap-shell -c bootstrap-schematics -v 4
npm install
</code></pre>

Works for css and scss. Bootstrap v3 and v4 are available.

More information about bootstrap-schematics please find <a href="https://github.com/slupekdev/bootstrap-schematics/blob/master/src/shell/README.md" rel="nofollow noreferrer">here</a>.

blocks|key|116455|text|使用npm安装|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116456|引导程序|ordered-list-item|116457|116458|npm安装bootstrap|116459|2.安装Popper.js|116460|npm+install+--save+popper.js|code-block|syntax|javascript|116461|3.转到Angular+6项目中的angular.json+/+Angular+5中的.angular-cli.json，并添加以下列表：|offset|length|style|BOLD|116462|+"styles":+[
++++++++++"node_modules/bootstrap/dist/css/bootstrap.css",
++++++++++"src/styles.css"
++++++++],

++++++++"scripts":+[
++++++++++"node_modules/popper.js/dist/umd/popper.min.js",
++++++++++"node_modules/bootstrap/dist/js/bootstrap.min.js"
++++++++]|116463|entityMap^0|0|0|0|0|0|0|H|C|17|H|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Z|8|@]|9|@]|A|$]]|$1|E|3|-4|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|13|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|14|8|@$Q|15|R|16|S|T]|$Q|17|R|18|S|T]]|9|@]|A|$]]|$1|U|3|V|5|L|7|19|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|X|$]]

<ol>
<li>Install Bootstrap using npm

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

2.Install Popper.js

<pre><code>npm install --save popper.js
</code></pre>

3.Goto angular.json in Angular 6 project / .angular-cli.json in Angular 5 and add the listed:

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

 "scripts": [
 "node_modules/popper.js/dist/umd/popper.min.js",
 "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]
</code></pre>

blocks|key|116671|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116672|安装引导程序，popper.js+|ordered-list-item|116673|116674|npm+install+--save+bootstrap+npm+install+--save+popper.js|offset|length|style|CODE|116675|src/styles.css，导入bootstrap中的|BOLD|116676|风格|116677|116678|@import+'~bootstrap/dist/css/bootstrap.min.css';|116679|entityMap^0|0|0|0|0|S|T|S|0|0|E|0|0|0|0|1C|0^^$0|@$1|2|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|V|7|@]|8|@]|9|$]]|$1|D|3|-4|4|5|6|W|7|@]|8|@]|9|$]]|$1|E|3|F|4|5|6|X|7|@$G|Y|H|Z|I|J]|$G|10|H|11|I|J]]|8|@]|9|$]]|$1|K|3|L|4|5|6|12|7|@$G|13|H|14|I|M]]|8|@]|9|$]]|$1|N|3|O|4|C|6|15|7|@]|8|@]|9|$]]|$1|P|3|-4|4|5|6|16|7|@]|8|@]|9|$]]|$1|Q|3|R|4|5|6|17|7|@$G|18|H|19|I|J]]|8|@]|9|$]]|$1|S|3|-4|4|5|6|1A|7|@]|8|@]|9|$]]]|T|$]]

<ol>
<li>Install bootstrap, popper.js </li>
</ol>

<code>npm install --save bootstrap</code>
<code>npm install --save popper.js</code>

<ol start="3">
<li>In src/styles.css, import bootstrap's style</li>
</ol>

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

blocks|key|114325|text|使用npm+i+--save+bootstrap@version.Now安装bootstrap，转到nodemodules文件夹并从bootstrap文件夹中复制“bootstrap.min.css.js”的路径并将完整路径(如nodemodules/bootstrap/css/bootstrap.min.css.js)粘贴到angular.json下的脚本标记文件中，然后重新运行服务器以检查安装是否成功。要检查安装是否成功，请在您喜欢的任何浏览器中运行该程序并按F12，您将发现窗口的一部分已打开，现在转到元素选项卡打开头标记，如果您在style标记中看到bootstrap，则安装成功。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114326|entityMap^0|2|U|36|1A|4K|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

Install bootstrap using <code>npm i --save bootstrap@version</code>.Now,go to nodemodules folder and from bootstrap folder copy the path of 'bootstrap.min.css.js' and paste the full path(like <code>nodemodules/bootstrap/css/bootstrap.min.css.js</code>) in <code>angular.json</code> under script tag file and re-run the server and to check whether the installation is successful run the program in any browser you like and press F12 you'll find a part of the window gets opened,now go to elements tab open head tag and if you see bootstrap in style tag,then your installation is successful.

blocks|key|2874863|text|在项目中运行以下命令|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2874864|npm+install+--save+@bootsrap@4|code-block|syntax|javascript|2874865|如果你得到这样的确认|2874866|%2B+bootstrap@4.1.3
updated+1+package+in+8.245s|2874867|这意味着boostrap+4安装成功。但是，为了使用它，您需要更新angular.json文件下的"styles“数组。|2874868|按照以下方式更新它，以便bootstrap能够覆盖现有样式|2874869|"styles":+[
++++++++++"node_modules/bootstrap/dist/css/bootstrap.min.css",
+++++++++++"src/styles.css"
++++++++++],|2874870|要确保所有设置都正确，请运行ng+serve+>+open+browser+at+http://localhost:4200/+or+a+port+you+run+the+angular+app+>+right+click+>+inspect+>+under+the+head+check+the+styles+if+you+have+bootsrap+like+shown+below，然后就可以使用boostrap了。|offset|length|style|CODE|2874871|📷|atomic|2874872|​|2874873|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/74c2489176b219335a461b4565bd16d1.png|imageAlt^0|0|0|0|0|0|0|0|E|4Z|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|1B|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|1C|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|1E|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1F|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1H|8|@$S|1I|T|1J|U|V]]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1K|8|@]|9|@$S|1L|T|1M|1|1N]]|A|$]]|$1|Z|3|10|5|6|7|1O|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18|19|-4]]]]

Run this following command inside the project 

<pre><code>npm install --save @bootsrap@4
</code></pre>

and if you get a confirmation like this 

<pre><code>+ bootstrap@4.1.3
updated 1 package in 8.245s
</code></pre>

It means boostrap 4 is successfully installed. However, in order to use it, you need to update the "styles" array under the angular.json file. 

Update it the following way so that bootstrap will be able to override the existing styles

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

To make sure everything is set up correctly, run <code>ng serve &gt; open browser at http://localhost:4200/ or a port you run the angular app &gt; right click &gt; inspect &gt; under the head check the styles if you have bootsrap like shown below</code>, then you are good to use boostrap.
<a href="https://i.stack.imgur.com/V2GGK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V2GGK.png" alt="enter image description here"></a>

blocks|key|2664010|text|无论您使用的是哪个JS框架，都可以通过以下两个步骤将bootstrap导入到您的项目中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2664011|使用npm+i+-S+bootstrap或yarn+add+bootstrap安装引导程序。|offset|length|style|CODE|2664012|在styles.css或styles.scss中，将引导导入为@import+'~bootstrap/dist/css/bootstrap.min.css'。|2664013|entityMap^0|0|2|I|L|I|0|1|A|C|B|V|1B|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]|$D|P|E|Q|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@$D|S|E|T|F|G]|$D|U|E|V|F|G]|$D|W|E|X|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$]]

It doesn't matter which JS framework you are using, importing bootstrap to your project is easy by following 2 steps below: 

Install bootstrap using <code>npm i -S bootstrap</code> or <code>yarn add bootstrap</code>.

In <code>styles.css</code> or <code>styles.scss</code>, import bootstrap as <code>@import '~bootstrap/dist/css/bootstrap.min.css'</code>.

blocks|key|2664019|text|只需在index.html的Head标记中添加以下三行|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2664020|<link+rel="stylesheet"+href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script+src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script+src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>|code-block|syntax|javascript|2664021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just add these three lines in Head tag in index.html 

<pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

blocks|key|114085|text|Step1：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114086|npm+install+bootstrap@latest+--save-dev这将安装最新版本的引导，但是，可以通过添加版本号来安装指定的版本|offset|length|style|CODE|114087|Step2:打开styles.css并添加以下@import+"~bootstrap/dist/css/bootstrap.css"|114088|entityMap^0|0|0|13|0|N|17|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@$D|Q|E|R|F|G]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|K|$]]

Step1: 
 <code>npm install bootstrap@latest --save-dev</code>
This will install the latest version of the bootstrap, 
However, the specified version can be installed by adding the version number

Step2: Open styles.css and add the following
 <code>@import "~bootstrap/dist/css/bootstrap.css"</code>

blocks|key|116802|text|我在这里没有看到这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116803|@import+'bootstrap/scss/bootstrap.scss';|code-block|syntax|javascript|116804|我只是在style.scss中添加了这一行，在我的例子中，我还想覆盖引导变量。|116805|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Didn't see this one here: 

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

I just added this line in style.scss
In my case i also wanted to override bootstrap variables.

blocks|key|2874963|text|用于添加Bootstrap和Jquery的都是|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2874964|npm+install+bootstrap@3+jquery+--save|code-block|syntax|javascript|2874965|运行此命令后，请继续检查您的node_modules文件夹，您应该能够看到bootstrap和jquery添加到其中。|2874966|entityMap^0|L|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

For Adding Bootstrap and Jquery both 

<pre><code>npm install bootstrap@3 jquery --save
</code></pre>

after running this command, please go ahead and check your node_modules folder you should be able to see bootstrap and jquery added into it.

blocks|key|2664115|text|如果您刚刚开始使用angular和bootstrap，那么简单的答案如下:+1.添加bootstrap的node包作为dev依赖|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2664116|npm+install+--save+bootstrap|code-block|syntax|javascript|2664117|2664118|在angular.json文件中导入引导样式表。|ordered-list-item|2664119|2664120|"styles":+[+++++++++++++++"projects/my-app/src/styles.scss",+++++++++++++++"./node_modules/bootstrap/dist/css/bootstrap.min.css"+++++++++++++],|offset|length|style|CODE|2664121|and你已经准备好使用bootstrap来设置样式，设置网格等。|unordered-list-item|2664122|2664123|<div+class="container">My+first+bootstrap+div</div>|2664124|我发现其中最好的部分是，我们使用bootstrap进行引导，而不依赖于任何第三方模块。我们可以随时更新bootstrap，只需更新命令npm+install+--save+bootstrap@4.4等。|2664125|entityMap^0|0|0|0|0|0|0|3Z|0|0|0|0|1F|0|1V|W|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|15|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|16|8|@$N|17|O|18|P|Q]]|9|@]|A|$]]|$1|R|3|S|5|T|7|19|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1B|8|@$N|1C|O|1D|P|Q]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1E|8|@$N|1F|O|1G|P|Q]]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|10|$]]

If you have just started with angular and bootstrap then simple answer would be below steps:
1. Add node package of bootstrap as dev dependency

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

<ol start="2">
<li>import bootstrap stylessheet in angular.json file.

<code>"styles": [
 "projects/my-app/src/styles.scss",
 "./node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],</code></li>
<li>and you are ready to use bootstrap for styling, grid etc.

<code>&lt;div class="container"&gt;My first bootstrap div&lt;/div&gt;</code></li>
</ol>

The best part of this which I found was that we are directing using bootstrap without any third-party module dependency. We can upgrade bootstrap anytime by just updating the command <code>npm install --save bootstrap@4.4</code> etc.

blocks|key|114479|text|你有很多方法去add+Bootstrap+4+in+your+Angular+project|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|114480|114481|将引导CSS和JavaScript文件包括在带有和标记的Angular项目的index.html文件的一节中，|unordered-list-item|114482|使用@import+keyword.|114483|Adding将引导CSS文件导入到Angular项目的全局styles.css文件中将引导CSS和JavaScript文件包含在项目|114484|的angular.json文件的样式和脚本数组中|114485|entityMap|0|LINK|mutability|MUTABLE|url|https://www.techiediaries.com/angular-bootstrap/^0|7|13|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@$A|W|B|X|1|Y]]|C|$]]|$1|D|3|-4|5|6|7|Z|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|10|8|@]|9|@]|C|$]]|$1|H|3|I|5|G|7|11|8|@]|9|@]|C|$]]|$1|J|3|K|5|G|7|12|8|@]|9|@]|C|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@]|C|$]]|$1|N|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|O|$P|$5|Q|R|S|C|$T|U]]]]

You have many ways to <a href="https://www.techiediaries.com/angular-bootstrap/" rel="nofollow noreferrer">add Bootstrap 4 in your Angular project</a>:

<ul>
<li>Including the Bootstrap CSS and JavaScript files in the section of the index.html file of your Angular project with a and tags,</li>
<li>Importing the Bootstrap CSS file in the global styles.css file of your Angular project with an @import keyword.</li>
<li>Adding the Bootstrap CSS and JavaScript files in the styles and scripts arrays of the angular.json file of your project</li>
</ul>

blocks|key|114126|text|运行此命令|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|114127|npm+install+bootstrap@3|code-block|syntax|javascript|114128|your+Angular.json|114129|"styles":+[
++"node_modules/bootstrap/dist/css/bootstrap.min.css",
++"src/styles.css"
],|114130|entityMap^0|0|5|0|0|0|H|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Run This Command

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

your Angular.json

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

blocks|key|114491|text|您可以使用npm+install+bootstrap命令在angular中安装引导程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114492|然后在angular.json文件和style.css文件中设置引导程序路径。|114493|您可以阅读有关如何在angular，+click+here+to+read+full+blog+about+this中安装和设置引导程序的完整博客|114494|entityMap|0|LINK|mutability|MUTABLE|url|https://whiteweb7.blogspot.com/2020/05/how-to-use-bootstrap-in-angular-first.html^0|5|L|0|3|C|I|9|0|I|14|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|J|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

you can install bootstrap in angular using <code>npm install bootstrap</code> command.

and next setup bootstrap path in <code>angular.json</code> file and <code>style.css</code> file.

you can read a full blog about how to install &amp; setup bootstrap in angular, <a href="https://whiteweb7.blogspot.com/2020/05/how-to-use-bootstrap-in-angular-first.html" rel="nofollow noreferrer"> click here to read full blog about this</a>

blocks|key|2875046|text|我发现很多解决方案不再适用于新版本的Angular-CLI。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2875047|您可以尝试在app.component.html的顶部添加以下链接标记，并在底部添加脚本标记。|2875048|<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"+integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc%2BNcPb1dKGj7Sk"+crossorigin="anonymous">


<script+src="https://code.jquery.com/jquery-3.5.1.slim.min.js"+integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C%2BOGpamoFVy38MVBnE%2BIbbVYUew%2BOrCXaRkfj"+crossorigin="anonymous"></script>
<script+src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"+integrity="sha384-Q6E9RHvbIyZFJoft%2B2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"+crossorigin="anonymous"></script>
<script+src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"+integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704%2Bh835Lr%2B6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"+crossorigin="anonymous"></script>|code-block|syntax|javascript|2875049|但是，如果您想使用ngx-bootstrap，那么在您的项目目录中运行以下命令|2875050|ng+add+ngx-bootstrap|2875051|使用以下内容作为app.component.html的内容对其进行测试|2875052|<button+type="button"+class="btn+btn-outline-primary">Primary</button>
<button+type="button"+class="btn+btn-outline-secondary">Secondary</button>
<button+type="button"+class="btn+btn-outline-success">Success</button>
<button+type="button"+class="btn+btn-outline-danger">Danger</button>
<button+type="button"+class="btn+btn-outline-warning">Warning</button>
<button+type="button"+class="btn+btn-outline-info">Info</button>
<button+type="button"+class="btn+btn-outline-light">Light</button>
<button+type="button"+class="btn+btn-outline-dark">Dark</button>|2875053|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

I see lot of the solutions don't work anymore with the new versions of Angular-CLI.
You can try to add the following link tag at top and script tags at the bottom in your app.component.html.
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css&quot; integrity=&quot;sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk&quot; crossorigin=&quot;anonymous&quot;&gt;


&lt;script src=&quot;https://code.jquery.com/jquery-3.5.1.slim.min.js&quot; integrity=&quot;sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js&quot; integrity=&quot;sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js&quot; integrity=&quot;sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;
</code></pre>
But if you want to use ngx-bootstrap then run the following command in your project directory
<pre><code>ng add ngx-bootstrap
</code></pre>
Test it out with following as the content of your app.component.html
<pre><code>&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Light&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;Dark&lt;/button&gt;
</code></pre>

blocks|key|2664212|text|2简单步骤|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2664213|2664214|2664215|安装引导程序(正在安装最新版本)|ordered-list-item|2664216|2664217|2664218|npm+install+bootstrap@next|code-block|syntax|javascript|2664219|将|2664220|导入到项目中，在styles.scss|2664221|中添加以下行|2664222|2664223|@import+'~bootstrap';|2664224|2664225|请注意，您导入的顺序可能很重要，如果您有其他使用bootstrap的库，请将此import语句放在最前面|2664226|结束了。:)|2664227|2664228|注意:以下是我的版本|2664229|2664230|角度:9|2664231|节点:+v10.16.0|2664232|npm+:+6.9.1|2664233|2664234|entityMap^0|0|5|0|0|0|0|0|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|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|1L|8|@]|D|@]|E|$]]|$1|G|3|-4|5|6|7|1M|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1N|8|@]|D|@]|E|$]]|$1|K|3|-4|5|6|7|1O|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1Q|8|@]|D|@]|E|$P|Q]]|$1|R|3|S|5|6|7|1R|8|@]|D|@]|E|$]]|$1|T|3|U|5|J|7|1S|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1T|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|O|7|1V|8|@]|D|@]|E|$P|Q]]|$1|10|3|-4|5|6|7|1W|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|1X|8|@]|D|@]|E|$]]|$1|13|3|14|5|6|7|1Y|8|@]|D|@]|E|$]]|$1|15|3|-4|5|6|7|1Z|8|@]|D|@]|E|$]]|$1|16|3|17|5|6|7|20|8|@]|D|@]|E|$]]|$1|18|3|-4|5|6|7|21|8|@]|D|@]|E|$]]|$1|19|3|1A|5|6|7|22|8|@]|D|@]|E|$]]|$1|1B|3|1C|5|6|7|23|8|@]|D|@]|E|$]]|$1|1D|3|1E|5|6|7|24|8|@]|D|@]|E|$]]|$1|1F|3|-4|5|6|7|25|8|@]|D|@]|E|$]]|$1|1G|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|1H|$]]

2 simple steps
<hr />
<ol>
<li>Install Bootstrap ( am installing latest version)</li>
</ol>
<hr />
<pre><code>npm install bootstrap@next
</code></pre>
<ol start="2">
<li>Import into your project, add below line in your styles.scss</li>
</ol>
<hr />
<pre><code>@import '~bootstrap';
</code></pre>
<hr />
Please Note your order of imports might matter, if you have other libraries which uses bootstrap, please keep this import statement on top
The End. :)
<hr />
NOTE: below are my versions
<hr />
angular : 9
node : v10.16.0
npm : 6.9.1
<hr />

blocks|key|116924|text|将此代码添加到styles.css文件中|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116925|@import+"~bootstrap/dist/css/bootstrap.css";|code-block|syntax|javascript|116926|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Add this in your styles.css file
<pre><code>@import &quot;~bootstrap/dist/css/bootstrap.css&quot;;
</code></pre>

blocks|key|116936|text|更新至2020年8月:+Angular+10|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116937|116938|“如果您有一个Angular≥9CLI项目，您可以简单地使用我们的原理图将ng-bootstrap库添加到其中。”只需在项目文件夹中运行以下命令即可。所有配置都将自动添加。|blockquote|116939|116940|116941|ng+add+@ng-bootstrap/ng-bootstrap|offset|length|style|CODE|116942|ng+s|116943|示例代码片段：|116944|import+{Component}+from+'@angular/core';

@Component({selector:+'ngbd-alert-basic',+templateUrl:+'./alert-basic.html'})
export+class+NgbdAlertBasic+{
}|code-block|syntax|javascript|116945|​|116946|
++<ngb-alert+[dismissible]="false">
++++Warning!+Better+check+yourself,+you're+not+looking+too+good.
++</ngb-alert>
|116947|116948|entityMap^0|0|0|0|0|0|0|X|0|0|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|15|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|16|8|@]|9|@]|A|$]]|$1|G|3|-4|5|6|7|17|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|18|8|@$J|19|K|1A|L|M]]|9|@]|A|$]]|$1|N|3|O|5|6|7|1B|8|@$J|1C|K|1D|L|M]]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1F|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1G|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1H|8|@]|9|@]|A|$U|V]]|$1|10|3|X|5|6|7|1I|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|12|$]]

Updated Aug-2020: Angular 10
<blockquote>
&quot;If you have an Angular ≥ 9 CLI project, you could simply use our schematics to add ng-bootstrap library to it.&quot; Just run the following command inside your project folder. All the configurations will be automatically added.
</blockquote>
<code>ng add @ng-bootstrap/ng-bootstrap</code>
<code>ng s</code>
Sample Snippets:
<pre class="lang-js prettyprint-override"><code>import {Component} from '@angular/core';

@Component({selector: 'ngbd-alert-basic', templateUrl: './alert-basic.html'})
export class NgbdAlertBasic {
}
</code></pre>

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;
 &lt;ngb-alert [dismissible]="false"&gt;
 &lt;strong&gt;Warning!&lt;/strong&gt; Better check yourself, you're not looking too good.
 &lt;/ngb-alert&gt;
&lt;/p&gt;</code></pre>
</div>
</div>

blocks|key|114538|text|对于bootstrap+4.5，angular+10|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114539|npm+install+bootstrap+--save|code-block|syntax|javascript|114540|使用bootstrap+import语句像这样更新styles.scss。|114541|+$theme-colors:+(
++++"primary":++++#b867c6,
++++"secondary":++#f3e5f5,
++++"success":++++#388e3c,
++++"info":+++++++#00acc1,
++++"light":++++++#f3e5f5,
++++"dark":+++++++#863895
);

@import+"~bootstrap";

@import+url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

body+{
++++color:+gray('800');
++++background-color:+theme-color('light');
++++font-family:+'Raleway',+sans-serif;
}|114542|导入bootstrap应该在变量覆盖之后。这个例子还展示了如何放置你自己的主题颜色。|114543|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

for bootstrap 4.5, angular 10
<pre><code>npm install bootstrap --save
</code></pre>
update your styles.scss like this with bootstrap import statement.
<pre><code> $theme-colors: (
 &quot;primary&quot;: #b867c6,
 &quot;secondary&quot;: #f3e5f5,
 &quot;success&quot;: #388e3c,
 &quot;info&quot;: #00acc1,
 &quot;light&quot;: #f3e5f5,
 &quot;dark&quot;: #863895
);

@import &quot;~bootstrap&quot;;

@import url('https://fonts.googleapis.com/css2?family=Raleway&amp;display=swap');

body {
 color: gray('800');
 background-color: theme-color('light');
 font-family: 'Raleway', sans-serif;
}
</code></pre>
importing bootstrap should be after your variable overwrites. [this example also shows how you can put your own theme colors.]

blocks|key|114232|text|好消息！基本上，Bootstrap5现在可以很容易地实现了，你甚至不需要jQuery。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|114233|在终端上，只需运行|114234|npm+install+bootstrap@next+--save|code-block|syntax|javascript|114235|因此，Angular使用了webpack，因此，在您的app.module.ts中，只需添加：|114236|import+"bootstrap";|114237|或者，如果您想要单独导入它们，请执行以下操作：|114238|import+{+ModuleToBeImported+}+from+'bootstrap';|114239|然后在您的styles.scss中添加：|114240|@import+'~bootstrap/scss/bootstrap';|114241|基本上就是这样，但要注意有些组件需要popper.js。在那里，你也会看到依赖于popper.js的组件，在写这篇文章的时候，它是用于显示和定位的下拉列表，以及用于显示和定位的工具提示和弹出窗口。|114242|因此，要安装popper.js，只需运行：|114243|npm+install+@popperjs/core|114244|Reference|offset|length|114245|entityMap|0|LINK|mutability|MUTABLE|url|https://getbootstrap.com/docs/5.0/getting-started/webpack/^0|0|0|0|0|0|0|0|0|0|0|0|0|0|9|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|1F|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1H|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1J|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1L|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|F|7|1N|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|6|7|1O|8|@]|9|@$12|1P|13|1Q|1|1R]]|A|$]]|$1|14|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]]|15|$16|$5|17|18|19|A|$1A|1B]]]]

Good News! Basically, Bootstrap 5 can be implemented easily now, and you don't even need jQuery.
 
From your terminal, just run
<pre><code>npm install bootstrap@next --save
</code></pre>
So, Angular uses webpack, therefore, in your app.module.ts, just add:
<pre><code>import &quot;bootstrap&quot;;
</code></pre>
Or if you want to import them separately, do it like:
<pre><code>import { ModuleToBeImported } from 'bootstrap';
</code></pre>
Then to your styles.scss, add:
<pre><code>@import '~bootstrap/scss/bootstrap';
</code></pre>
Basically that's it, BUT beware that some components require popper.js.
<a href="https://getbootstrap.com/docs/5.0/getting-started/introduction/#components" rel="nofollow noreferrer">Components requiring bootstrap's js</a>
There you'll see the components dependent on popper.js too, which at the time of writing this are Dropdowns for displaying and positioning, and Tooltips and popovers for displaying and positioning.
Therefore, to install popper.js, just run:
<pre><code>npm install @popperjs/core
</code></pre>
<a href="https://getbootstrap.com/docs/5.0/getting-started/webpack/" rel="nofollow noreferrer" title="Bootstrap webpack site">Reference</a>

blocks|key|2875243|text|安装引导程序|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2875244|npm+install+--save+bootstrap|offset|length|style|CODE|2875245|然后我们需要将Bootstrap+Sass导入到我们的应用程序中。在styles.scss中添加以下行：|2875246|@import+"../node_modules/bootstrap/scss/bootstrap.scss";|2875247|For+more+info...|2875248|entityMap|0|LINK|mutability|MUTABLE|url|https://blog.shikisoft.com/how-to-import-bootstrap-4-sass-into-angular-4/^0|0|0|S|0|0|0|1K|0|0|G|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|10|8|@$D|11|E|12|F|G]]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]]|A|$]]|$1|N|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

Install boostrap
<code>npm install --save bootstrap</code>
Then we need to import Bootstrap Sass into our application. In styles.scss add this line:
<code>@import &quot;../node_modules/bootstrap/scss/bootstrap.scss&quot;;</code>
<a href="https://blog.shikisoft.com/how-to-import-bootstrap-4-sass-into-angular-4/" rel="nofollow noreferrer">For more info...</a>

We want to use bootstrap 4 (4.0.0-alpha.2) in our app generated with angular-cli 1.0.0-beta.5 (w/ node v6.1.0).

After getting bootstrap and its dependencies with npm, our first approach consisted in adding them in <code>angular-cli-build.js</code>:

<pre><code>'bootstrap/dist/**/*.min.+(js|css)', 
'jquery/dist/jquery.min.+(js|map)', 
'tether/dist/**/*.min.+(js|css)',
</code></pre>

and import them in our <code>index.html</code>

<pre><code>&lt;script src="vendor/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="vendor/tether/dist/js/tether.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="vendor/bootstrap/dist/css/bootstrap.min.css"&gt;
&lt;script src="vendor/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
</code></pre>

This worked fine with <code>ng serve</code> but as soon as we produced a build with <code>-prod</code> flag all these dependencies disappeared from <code>dist/vendor</code> (surprise !).

How we are intended to handle such scenario (i.e. loading bootstrap scripts) in a project generated with angular-cli ?

We had the following thoughts but we don't really know which way to go...

<ul>
<li>use a CDN ? but we would rather serve these files to guarantee that they will be available</li>
<li>copy dependencies to <code>dist/vendor</code> after our <code>ng build -prod</code> ? But that seems like something angular-cli should provide since it 'takes care' of the build part ?</li>
<li>adding jquery, bootstrap and tether in <code>src/system-config.ts</code> and somehow pull them into our bundle in <code>main.ts</code> ? But that seemed wrong considering that we are not going to explicitly use them in our application's code (unlike moment.js or something like lodash, for example).</li>
</ul>

How to add bootstrap to an angular-cli project

TypeScript

服务器

jQuery

我们希望在使用angular-cli 1.0.0-beta.5 (w/ node v6.1.0)生成的应用中使用bootstrap 4 (4.0.0-alpha.2)。在使用npm获得bootstrap及其依赖项之后，我们的第一个方法是将它们添加到angular-cli-build.js中'bootstrap/dist...

问如何将引导程序添加到angular-cli项目
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将引导程序添加到angular-cli项目EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将引导程序添加到angular-cli项目
EN