Day 14：怎麽在 Angular 使用 Bootstrap？

由於在未来的专案有机会使用到 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 及对话框