由於在未來的專案有機會使用到 Bootstrap，所以就藉這個機會來介紹一下如何在 Angular 環境裡使用 Bootstrap。

安裝 Bootstrap

由於我對於 Bootstrap 4 比較熟悉，為了讓我們能更快速的實作出切版，所以這邊就來簡介一下在 Angular 裡使用 npm 安裝 Bootstrap 的過程。

1. 打開 VS Code 終端機，輸入以下指令：

npm i bootstrap@4 jquery popper.js --save

因為 Bootstrap 4 還支援 jQuery，所以如果有需要用到裡面的互動元件，就需要一併安裝。

2. 如果裝錯版本的話：
   這裡提醒一下，如果你在 npm 安裝 Bootstrap 時沒有用 @4 指定版本，那麼就會直接安裝 Bootstrap 5，此時如果你想要改成安裝 Bootstrap 4，那麼可以先輸入以下指令，移除當前的 Bootstrap 5。

npm uninstall bootstrap

接著再次安裝 Bootstrap 4 即可。

npm i bootstrap@4

補充：在 npm v5.0.0 之後，--save 已經成為預設指令，所以上面的 --save 可以不用加。

既然已經安裝完了，我們就馬上從 Bootstrap 的官方網站複製一段程式碼，貼到專案資料夾的 index.html 中，來看看 Bootstrap 是否有在我們的應用程式裡順利運作。

使用 ng serve 運行 Angular 應用程式來看看畫面。

發現 Bootstrap 並沒有在畫面上正常運行。

3. 將 Bootstrap 引入到 Angular 中：
   我們還差一個步驟，就是把 Bootstrap 引入到 Angular 之中，首先我們先找到 angular.json 這個檔案，並且找到 build 底下的 styles 這個區塊。
   

   不是 test 底下的 styles 哦！不然會沒作用！因為我就貼錯過…
   

接著貼上這段路徑：

"./node_modules/bootstrap/dist/css/bootstrap.min.css"

接著存檔，你會發現畫面沒變，Bootstrap 的樣式仍然沒出現。

4. 重啟 Angular 伺服器
   因為我們引入了 Bootstrap，所以此時需要重啟伺服器才行。所以，先在終端機輸入指令 ctrl + c 中斷運行，再重新輸入一次 ng serve，重新啟動伺服器。

這樣一來，我們就可以在 Angular 應用程式上使用 Bootstrap 了！

參考來源：

• [NodeJs] npm --save 到底是什麼? --save-dev 不一樣嗎?：dependencies v.s devDependencies
• 在 Angular 中使用 Bootstrap CSS framework 及對話框