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表示重新安裝，多試幾次一般是可以的。