如何在 Angular 中安裝 Bootstrap？ 5個簡單的方法

已發表: 2023-05-24

網頁在交互時效果最好。然而，似乎不可能在一夜之間開發出一個新的網頁。

這時您可能會覺得需要訪問一個可能很常見但可以通過自定義代碼輕鬆修改的網頁。這就是 Bootstrap 發揮作用的地方。

讓我們首先了解如何在 Angular 中安裝 Bootstrap ，以便在 Angular 上創建響應迅速且生動的 Web 應用程序！

了解 Bootstrap：初步指南
Bootstrap：歷史一瞥
你應該使用引導程序嗎？
- 組件方面
- 定制方面
- 節省時間
在 Angular 中安裝 Bootstrap 的先決條件
方法一：通過CDN安裝Bootstrap
方法二：通過 npm 包管理器安裝 Bootstrap
探索我們的熱門軟件工程課程
方法 3：通過 Angular CLI 安裝 Bootstrap
方法四：通過 Bower 包管理器安裝 Bootstrap
探索我們的軟件開發免費課程
方法 5：通過自定義構建安裝 Bootstrap
安裝 Bootstrap 時應遵循的最佳實踐
結論
還需要使用 Bootstrap 進行哪些其他安裝？
什麼是延遲引導程序？
關於輕鬆處理 Bootstrap 的任何最終提示？

了解 Bootstrap：初步指南

Bootstrap 是一個前端框架，它提供了 CSS、HTML 和 JavaScript 的工具和組件的組合來創建動態網頁。 Bootstrap 是開源且免費的。雖然 Angular 本身是一個功能強大的框架，可用於構建功能強大的單頁網站，但將其與 Bootstrap 相結合可進一步增強其創建響應式動態網頁的能力。

Bootstrap 獲得了巨大的人氣，約25.8%的基於 JavaScript 的網站使用 Bootstrap，進一步說明其在市場中的重要性。

Bootstrap：歷史一瞥

Bootstrap 最初是為流行的社交網站 Twitter 創建的內部工具，工程師 Jacob Thornton 和 Mark Otto 於 2011 年 8 月決定在開源存儲庫 GitHub 上發布 Bootstrap 供公眾使用。

隨著它的便利性和在公眾中的流行，創建者繼續致力於生成更新版本的 Bootstrap，為其配備改進的 UI 組件和更好的支持。

創作者 Mark 和 Jacob在 2023 年發布了最新版本的 Bootstrap—— Bootstrap 5.3.0 。

查看我們的免費技術課程，在競爭中脫穎而出。

你應該使用引導程序嗎？

您可以通過了解該項目提供的一系列好處來找到問題的答案。首先，它提供了超級響應式 CSS。這使得它適用於桌面、選項卡和手機。它還具有跨大多數主要瀏覽器的可計算性。

再加上設置要求最少的優勢，您甚至可以在一小時內完成佈局設計。 Bootstrap 易於使用，因為它不需要用戶精通 CASS 甚至 HTML，除非您需要啟動基於 UI 的更改。

使 Bootstrap 成為嵌入 Angular 或添加Angular Bootstrap 安裝的流行選擇的最友好的特性是 -

組件方面

從導航欄到表單，當您決定如何在 Angular 中添加 Bootstrap時，Bootstrap 會為應用程序提供組件日誌。 在這些組件的幫助下，創造性地設計網站或應用程序變得非常容易。 Angular 中 Bootstrap 的這項功能在開發人員中非常受歡迎。

查看 upGrad 的軟件開發課程來提高自己的技能。

定制方面

當您在 Angular 中執行Bootstrap 安裝時，您甚至可以為列設計自定義斷點，也可以根據需要按大小插入斷點。 它進一步簡化了基於框架響應式網格的定制。

節省時間

Bootstrap 框架嵌入到 Angular 中後，可以在時間軸上節省大量時間。得益於 Bootstrap 中現成的塊，當您在 angular 中安裝 Bootstrap 5時，無需從頭開始。 簡單地重新排列內置元素並使它們可用於您的輸入就可以達到目的，甚至可以為您的最終產品增加獨特性。

在 Angular 中安裝 Bootstrap 的先決條件

這是將 Bootstrap 添加到 Angular 的先決條件清單。確保在安裝用於創建 Angular 應用程序的相同工具後配置列出的工具。

Git ：這是一個分佈式版本控制單元設置，用於同步存儲庫。
IDE——使用具有圖形界面的集成開發環境對於開發包括 Angular 在內的應用程序至關重要。
Node.js 和 npm ：前者是運行時的 JavaScript 代碼軟件。而後者 npm 作為用於 Node.js 的包管理器出現。所有 Angular 應用程序都基於這兩者運行，同時這些也有助於庫安裝。
Angular CLI：此實用工具基於命令行，用於 Angular 的基礎結構建立。

從 upGrad 專家教授提供的各種軟件工程課程中汲取靈感，例如計算機科學理學碩士，並以指數方式提高您的開發技能。

方法一：通過CDN安裝Bootstrap

按照相關步驟通過 CDN 在 Angular 上安裝 Bootstrap。

找到“src”文件夾並打開“ index.html ”Angular 項目文件。
在“ <head> ”部分嵌入以下鏈接。

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>

<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Bootstrap 的 JavaScript 和 CSS 文件包含在來自指定 CDN URL 的這些代碼行中。
將最後的更改保存到您的“ index.html ”文件中。

包含這些 CDN 鏈接後，您的 Angular 項目將利用 CDN 提供的 Bootstrap 樣式和 JavaScript 功能。您現在可以在 Angular 項目中使用 Bootstrap 組件了！

方法二：通過 npm 包管理器安裝 Bootstrap

可以按照給定的簡單步驟使用 npm 管理器安裝 Bootstrap。

打開命令提示符或終端。
導航 Angular 項目的根目錄。
通過運行“ npm install bootstrap”命令安裝 Bootstrap 及其相關依賴項。相關命令會將 Bootstrap 及其相關依賴項下載到標記為“node_modules”的目錄中。
安裝後，您需要通過從根目錄打開“angular.json”文件並在“styles”數組中添加以下條目來合併 Bootstrap 樣式和 Javascript 。

“node_modules/bootstrap/dist/css/bootstrap.min.css”

此外，在“腳本”數組中添加以下命令。

“node_modules/bootstrap/dist/js/bootstrap.min.js”

保存對“ angular.json”文件所做的所有更改。

您現在可以在 Angular 組件和模板中使用來自 Bootstrap 的 JavaScript 和 CSS 類。

探索我們的熱門軟件工程課程

LJMU & IIITB 計算機科學碩士	加州理工學院 CTME 網絡安全證書課程
全棧開發訓練營	區塊鏈PG項目
全棧開發中的執行 PG 計劃
在下面查看我們所有的課程
軟件工程課程

方法 3：通過 Angular CLI 安裝 Bootstrap

這是一個易於遵循的指南，可幫助您通過 Angular CLI 安裝 Bootstrap。

打開命令提示符。
運行命令“ng new my-app”以使用 Angular CLI 並創建一個新的 Angular 項目。您可以用您選擇的名稱替換“我的應用程序” 。
切換到項目目錄。

cd 我的應用程序

如上所述，使用 npm 重複 Bootstrap 安裝過程。

您現在已經使用 CLI 創建了一個新的 Angular 項目，並為您的項目安裝了 Bootstrap！

方法四：通過 Bower 包管理器安裝 Bootstrap

確保全局安裝 npm 和 bower。
在命令提示符下運行給定的命令——npm install -g bower
安裝 Bower 後，轉到您的項目文件夾並鍵入

涼亭安裝引導程序

涼亭安裝jquery

上述步驟將在新創建的“bower_components”文件夾中安裝相關的 Bootstrap 安裝文件。

最後一步是在項目文件中包含 Bootstrap 和 jquery 的文件。

雖然這些是在 Angular 中安裝 Bootstrap 的所有步驟，但請記住，不再建議將 bower 用於 Bootstrap 安裝。

探索我們的軟件開發免費課程

雲計算基礎	從零開始的 JavaScript 基礎	數據結構和算法
區塊鏈技術	初學者反應	核心 Java 基礎知識
爪哇	初學者的 Node.js	高級JavaScript

方法 5：通過自定義構建安裝 Bootstrap

以下是通過自定義構建安裝 Bootstrap 的簡單步驟

從官方網站下載您選擇的 Bootstrap 版本及其 Javascript 和 CSS 文件。
解壓縮 zip 文件並從中復制“bootstrap.min.css ” 。
在您的 Angular 項目中，導航到“ src ”目錄並創建一個名為“ assets”的新目錄。 確保在名為“css ”的“ assets”中創建另一個目錄。
將“bootstrap.min.css ”粘貼到“ css”目錄中。
同樣，在“assets ”目錄中，創建一個名為“ js”的新目錄，並將從 zip 文件夾中提取的“bootstrap.min.js”粘貼到這個新目錄中。
在根目錄中打開“angular.json ”，然後按照架構師 > 構建 > 選項部分導航“樣式”數組。
使用以下命令添加 Bootstrap CSS 文件 –

“src/assets/css/bootstrap.min.css”

在其中找到“腳本”數組並粘貼以下命令-

“src/assets/js/bootstrap.min.js”

將更改保存到“ angular.json ”文件。

安裝 Bootstrap 時應遵循的最佳實踐

雖然有多種方法可以在 Angular 中安裝 Bootstrap，但了解最佳實踐可以進一步簡化該過程。

確保在 Angular 項目的正確文件和文件夾中導入正確的 Bootstrap CSS 文件。
雖然 Bootstrap 提供了廣泛的 CSS 類和組件目錄，但請僅選擇與您的項目相關的那些。
避免不必要的組件以優化性能。
隨時了解最新的 Bootstrap 版本。
雖然 Javascript 組件可用，但請謹慎使用它們。嘗試利用特定於 Angular 的庫。

另一方面，如果您可以管理時間並希望成為更好的開發人員，那麼沒有什麼比由 IIIT-B 提供支持的upGrad 的軟件開發執行研究生課程-全棧更好的了。

結論

這裡總結了我們在 Angular 中安裝 Bootstrap 以增強網頁開發的一些最佳方法列表。從優化的響應式設計到整合新鮮的動態功能，知道如何通過一致的實踐利用正確的 Bootstrap 組件將幫助您在行業中佔據優勢！

加入 upGrad 的Full Stack Software Development Bootcamp是另一種通過需求技能和專家指導來提升您的開發職業生涯的方式。

立即報名，拓展您的視野！

還需要使用 Bootstrap 進行哪些其他安裝？

您需要使用 Bootstrap 進行的其他安裝是 jQuery 和 popper.js。你可以使用 npm 來做同樣的事情。

什麼是延遲引導程序？

Angular 的前身 AngularJS 引入了延遲引導的思想。它指的是推遲 AngularJS 應用程序的自動引導過程的選項。由於 AngularJS 在加載 HTML 頁面時自動引導應用程序，因此延遲引導可以在需要時手動推遲該過程。

關於輕鬆處理 Bootstrap 的任何最終提示？

作為任何框架的常見做法，只有在閱讀文檔的同時將其擺弄一段時間才能獲得清晰的畫面。確保閱讀官方文檔以獲得最佳實施。