Angular2使用boostrap和ng-bootstrap总结

Angular2使用bootstrap有几种方式，本文主要介绍两种方式进行Boostrap样式的使用：

一、直接通过静态文件的方式进行引入：

通过命令新建一个Bootstrap的工程

ng new Bootstrap
npm install

接着在src下的assets下新建一个bootstrap文件夹，将相关的boostrap文件进行引入。

在src目录下的styles.css文件里头进行样式的引入：

@import "~bootstrap/dist/css/bootstrap.min.css";

测试下功能，在app.component.html添加一下代码：

<!-- Standard button -->

<button type="button" class="btn btn-default">（默认样式）Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->

<button type="button" class="btn btn-primary">（首选项）Primary</button>

<!-- Indicates a successful or positive action -->

<button type="button" class="btn btn-success">（成功）Success</button>

<!-- Contextual button for informational alert messages -->

<button type="button" class="btn btn-info">（一般信息）Info</button>

<!-- Indicates caution should be taken with this action -->

<button type="button" class="btn btn-warning">（警告）Warning</button>

<!-- Indicates a dangerous or potentially negative action -->

<button type="button" class="btn btn-danger">（危险）Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->

<button type="button" class="btn btn-link">（链接）Link</button>

敲打ng serve 浏览器敲打http://localhost:4200

可以看到bootstrap样式效果生效了。

第二种：用angular ng-boostrap进行样式的安装使用

2.1新建工程

ng new my-app --style=scss　　带style参数原因：ng-bootstrap要求使用scss

安装相关依赖npm install

2.2 安装相关ng-boostrap依赖

npm install @ng-bootstrap/ng-bootstrap bootstrap@next --save　　安装ng-bootstrap和bootstrap

2.3添加bootstrap.min.css引用
工程根目录下，打开.angular-cli.json文件，在styles中添加bootstrap.min.css引用

　　"styles": [

　　　　"../node_modules/bootstrap/dist/css/bootstrap.min.css",　　此行为新添加

　　　　 "styles.scss"

　　 ]

2.4 在src目录下的styles.scss文件中添加如下内容

　　@import '../node_modules/bootstrap/scss/bootstrap';

2.5在src的app目录下，找得到app.module.ts类中引用NgbModule

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

在imports里头新增 NgbModule.forRoot()

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    NgbModule.forRoot(),

    BrowserModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

2.6添加模板

在src的app目录下的app.component.html中开头添加如下内容

　<p>

　　<ngb-alert type="success" [dismissible]="false">

　　　　<strong>Success!</strong> Good work.

　　</ngb-alert>

　　</p>

2.7启动验证 ng serve

浏览器输入：http://localhost:4200

如果npm失败了，找个网络好的地方，多试几次，

npm install @ng-bootstrap/ng-bootstrap bootstrap@next --save -f

在末尾加上-f/-force表示重新安装，多试几次一般是可以的。

巴特西

Angular2使用boostrap和ng-bootstrap总结

最新文章

热门文章