Angular 中引入BootStrap

因爲Bootstrap官方目前並無發佈Angular的相關類庫進行支持，當前Angular只能引用使用Bootstrap相關的樣式。沒法使用Bootstrap自帶的腳本邏輯。如下以Angular7和Bootsrap4.2爲例進行demo驗證。

環境搭建

首先執行如下兩個命令建立angular項目和組件

ng new AngularDemo //建立項目 

ng g c bootstrapdemo // 建立組件 

而後執行

npm install bootstrap // 安裝最新的bootstrap組件

執行過程當中發現警告 bootstrap以來jquery 和popper.js

npm i jquery popper.js

引入樣式

方法一：

找到index.html直接添加樣式引用

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">

方法二：

打開Angular.json文件找到 project->architect->builder->options 下的style和scripts兩個配置節。並將bootstrap的樣式引入到styles中。因爲angular只能引用bootstrap樣式，因此scripts不須要引用bootstrap相關腳本(引用了也不生效)。

驗證

copy 一段最簡單的bootstrap柵格作個驗證。

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
    <div class="row">
      <div class="col-12 col-md-8">.col-12 .col-md-8</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    
    <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
    <div class="row">
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
      <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    </div>
    
    <!-- Columns are always 50% wide, on mobile and desktop -->
    <div class="row">
      <div class="col-6">.col-6</div>
      <div class="col-6">.col-6</div>
    </div>