安装引导 NPM安装bootstrap@next 在.angular-cli.json中添加代码: “风格”:( “styles”css, “. . / node_modules /引导/ dist / css / bootstrap.css” ), “脚本”:( “. . / node_modules / jquery / dist / jquery.js”, “. . / node_modules /范围/ dist / js / tether.js”, “. . / node_modules /引导/ dist / js / bootstrap.js” ), 最后将bootstrap.css添加到代码style.scss中 @ import " . . / node_modules /引导/ dist / css / bootstrap.min.css”; 重新启动本地服务器

现在有了新的ng-bootstrap 1.0.0-beta。5版本支持大多数基于Bootstrap的标记和CSS的原生Angular指令。

使用它所需的唯一依赖项是引导。不需要使用jquery和popper.js依赖。

ng-bootstrap是完全取代JavaScript实现的组件。所以你不需要在.angular-cli.json的scripts部分中包含bootstrap.min.js。

当你在angular-cli的最新版本中集成bootstrap和生成的项目时，请遵循以下步骤。

Inculde bootstrap.min.css in your .angular-cli.json, styles section. "styles": [ "styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], Install ng-bootstrap dependency. npm install --save @ng-bootstrap/ng-bootstrap Add this to your main module class. import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; Include the following in your main module imports section. @NgModule({ imports: [NgbModule.forRoot(), ...], }) Do the following also in your sub module(s) if you are going to use ng-bootstrap components inside those module classes. import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; @NgModule({ imports: [NgbModule, ...], }) Now your project is ready to use available ng-bootstrap components.

做以下几点:

npm i bootstrap@next --save

这将为您的项目添加引导4。

接下来进入src/style。SCSS或src/style.css文件(选择你正在使用的任何一个)并导入bootstrap:

对于style.css

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

对于style.scss

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

对于脚本，你仍然需要在angular-cli中添加文件。在Angular版本6中，这个编辑需要在Angular .json文件中完成:

"scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
],

因为还没有人参考官方(angular-cli团队)关于如何包含Bootstrap的故事:https://github.com/angular/angular-cli/wiki/stories-include-bootstrap

包括引导

Bootstrap是一个流行的CSS框架，可以在Angular项目中使用。 本指南将带你向Angular CLI项目中添加bootstrap，并将其配置为使用bootstrap。

使用CSS

开始

创建一个新项目并导航到该项目

ng new my-app
cd my-app

安装引导

创建好新项目后，接下来需要将bootstrap作为依赖项安装到项目中。 使用——save选项，依赖将被保存在package.json中

# version 3.x
npm install bootstrap --save

# version 4.x
npm install bootstrap@next --save

配置项目

现在项目已经设置好了，必须将其配置为包含引导CSS。

打开.angular-cli文件。Json从你的项目根。 在属性apps下，数组中的第一项是默认应用程序。 有一个属性styles允许外部全局样式应用到你的应用程序。 指定bootstrap.min.css的路径

当你完成时，它看起来应该如下所示:

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

注意:当你对.angular-cli进行更改时。Json，你将需要重新启动ng serve来获取配置更改。

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。

使用萨斯

开始

创建一个新项目并导航到该项目

ng new my-app --style=scss
cd my-app

安装引导

# version 3.x
npm install bootstrap-sass --save

# version 4.x
npm install bootstrap@next --save

配置项目

创建一个空文件_variables。src/中的SCSS。

如果你正在使用bootstrap-sass，在_variables.scss中添加以下内容:

$icon-font-path: '../node_modules/bootstrap-sass/assets/fonts/bootstrap/';

在风格。SCSS添加以下内容:

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

// version 4
@import 'variables';
@import '../node_modules/bootstrap/scss/bootstrap';

测试项目

打开app.component.html并添加以下标记:

<button class="btn btn-primary">Test Button</button>

配置好应用程序后，运行ng serve以开发模式运行应用程序。 在浏览器中导航到应用程序localhost:4200。 验证是否出现引导样式的按钮。 为了确保你的变量被使用，打开_variables。并添加以下内容:

$brand-primary: red;

返回浏览器查看字体颜色的更改。

第一次安装引导

npm i bootstrap

导入到angular中。json风格

"styles": [
   "styles.scss",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
],

安装助推器

NPM install -save bootstrap

然后我们需要导入Bootstrap Sass到我们的应用程序中。在风格。SCSS添加这一行:

@ import“. . / node_modules /引导/ scss / bootstrap.scss”;

欲了解更多信息…