ngx-bootstrap使用01 安裝ngx-bootstrap和bootstrap及其使用、外部樣式引入

 

1 版本說明

　　

 

2 新建一個angular項目

ng new 項目名 --stayle=scss

　　代碼解釋：創建一個樣式文件格式為SCSS的angular項目

　　技巧01：由於我angular-cli的版本是1.4.9，所以創建的angular項目使用的是angular4，由創建好的angular項目所下載的依賴包可以看出

　　　　

　　2.1 運行項目

ng serve

　　技巧01：進入到項目的根目錄執行上面的命令就可以啟動angular項目　

 　　2.2 在瀏覽器中訪問 http://127.0.0.1:4200/

　　　　

 

3 ngx-bootstrap相關配置

　　官網：點擊前往

　　3.1 下載bootstrap依賴

　　　　由於ngx-bootstrap依賴於bootstrap，所以我們必須先將bootstrap的依賴下載下來

npm install bootstrap --save

　　　　技巧01：由於使用bootstrap4時需要進行額外的配飾，所以建議下載bootstrap3

　　　　技巧02：進入到項目根目錄下執行完上面的命令后去angular的package.json配置文件中查看下載的bootstrap的版本

　　　　　　

　　3.2 將bootstrap的樣式引入到angular應用的全局樣式中

　　　　方法01：只需要在 .angular-cli.json 的styles中引入bootstrap的樣式即可

　　　　

　　　　　　技巧01：關於外部樣式的引用可以參見這篇博客 -> 點擊前往

　　　　方法02：在angular的全局樣式文件styles.scss中通過@import引入，例如

// @import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
@import "~bootstrap/dist/css/bootstrap.min.css";
@import 'theme.scss';

 

　　3.3 bootstrap樣式的使用

　　　　技巧01：把bootstrap樣式引入全局樣式后只需要根據bootstrap官方的樣式進行書寫即可

　　　　bootstrap官網：點擊前往

　　　　

<div class="panel panel-primary">
  <div class="panel-heading">面板頁眉</div>
  <div class="panel-body">面板內容</div>
  <div class="panel-footer">面板頁腳</div>
</div>

<div class="panel panel-primary">
  <div class="panel panel-heading">測試bootstrap是否生效</div>
  <div class="panel panel-body">
    <a class="btn btn-default" href="#" role="button">bootstrap樣式的按鈕</a>
  </div>
  <div class="panel panel-footer">2018年1月6日21:27:14</div>
</div>

<div class="panel panel-primary">
  <div class="panel panel-heading">測試ngx-bootstrap是否生效</div>
  <div class="panel panel-body">
    <accordion>
      <accordion-group heading="渝">
        Welcom to the beautiful city named ChongQing.
      </accordion-group>
    </accordion>
  </div>
  <div class="panel panel-footer"></div>
</div>

　　　　使用了bootstrap后頁面的渲染效果如下

　　　　　　

　　3.4 下載ngx-bootstrap依賴

　　　　ngx-bootstrap使用教程：點擊前往

　　　　技巧01：由於已經配置好bootstrap了，所以直接下載ngx-bootstrap依賴包就可以啦

npm install --save ngx-bootstrap

　　3.5 ngx-bootstrap組件的使用

　　　　ngx-bootstrap組件使用教程：點擊前往

　　　　3.5.1 在需要使用ngx-bootstrap的模塊級別導入相關模塊

　　　　　　技巧01：導入模塊時必須在后面添加 .forRoot()   -> 原因不詳，待更新......  2018年1月6日22:10:16

　　　　　　

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { TestComponent } from './test/test.component';

import { AccordionModule } from 'ngx-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    TestComponent
  ],
  imports: [
    BrowserModule,
    AccordionModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

　　　　3.5.2 在組件直接使用ngx-bootstrap相應模塊提供的標簽即可

　　　　　　

<div class="panel panel-primary">
  <div class="panel-heading">面板頁眉</div>
  <div class="panel-body">面板內容</div>
  <div class="panel-footer">面板頁腳</div>
</div>

<div class="panel panel-primary">
  <div class="panel panel-heading">測試bootstrap是否生效</div>
  <div class="panel panel-body">
    <a class="btn btn-default" href="#" role="button">bootstrap樣式的按鈕</a>
  </div>
  <div class="panel panel-footer">2018年1月6日21:27:14</div>
</div>

<div class="panel panel-primary">
  <div class="panel panel-heading">測試ngx-bootstrap是否生效</div>
  <div class="panel panel-body">
    <accordion>
      <accordion-group heading="渝">
        Welcom to the beautiful city named ChongQing.
      </accordion-group>
    </accordion>
  </div>
  <div class="panel panel-footer"></div>
</div>

　　　　3.5.3 使用ngx-bootstrap后頁面的渲染效果如下