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>

View Code

　　　　使用了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 { }

View Code

　　　　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>

View Code

　　　　3.5.3 使用ngx-bootstrap後頁面的渲染效果以下