如何在 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 的任何最终提示？

作为任何框架的常见做法，只有在阅读文档的同时将其摆弄一段时间才能获得清晰的画面。确保阅读官方文档以获得最佳实施。