让我们开发一个 Angular 应用程序 – Bootstrap 安装和使用
介绍
这是我的“让我们开发一个 Angular 应用程序”系列文章的第 6 篇文章。到目前为止，我们已经创建了一个 Angular 应用程序和一些组件，为我们的 Bike 实体创建了一个模型类，并创建了一组硬编码的 Bike 细节。然后，我们使用 ngFor 在硬编码数组中显示自行车详细信息。
请阅读之前的文章，以全面了解我们正在努力实现的目标。
要阅读我之前的文章，请单击此处 >> #5 – Angular 组件通信
在本文中，我们将了解如何在 Angular 应用程序中使用bootstrap 样式。
目前，我们的应用程序 UI 如下图所示。
我们可以使用bootstrap 库向我们的应用程序添加一些样式属性。
为此，首先，我们需要将bootstrap 库安装到我们的应用程序中。
这是一个非常简单的两步过程：
步骤1
使用以下命令安装引导程序：
npm install bootstrap – save
在这里，我正在为我们的应用程序安装bootstrap 程序版本 3。
第2步
在 Angular.json 文件中添加引导 CSS 文件路径
bootstrap 文件夹将出现在 node_modules 文件夹下
复制 bootstrap.min.css 文件的文件路径并将其粘贴到 Angular.json 文件的样式属性数组中。
注意
如果我们的应用程序已经在运行，请停止它并使用 ng serve 命令重新运行，以使bootstrap 样式适用于您的应用程序。
我们可以通过使用bootstrap 类添加测试按钮样式来测试在我们的应用程序中工作的bootstrap 库。
让我们在bike-deatils.component.html 文件中添加一个按钮。
<button type=”button” class=”btn btn-success”>预订试驾</button>
请参考下面的截图：
在这里，我们为按钮使用 btn-success 类。还有一些其他的按钮bootstrap 类，例如 btn-primary、btn-danger 等。
更多信息，请访问这里>> https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
保存应用程序并检查浏览器的结果。我们将得到以下屏幕。
将为每个项目添加一个按钮。
所以，bootstrap classes正在工作。
让我们使用简单的bootstrap classes来提高应用程序的美感。
首先，我们可以将每个自行车元素呈现在一个方块图块中
为此，我们将使用 3 个bootstrap classes来创建方块图块。
- 列表组项
- 列表组项目标题
- 列表组项目描述
除此之外，我们将使用另外 3 个bootstrap classes将内容放置在正确的位置。
此类可用于制作表结构——行和列
- row
- col-md-5
- col-md-7
我们修改了 bike-list-box.component.html 文件，如下所示。
实际上我们已经创建了 2 个 div 元素并为一个添加了类“row”，为其他添加了类“col-md-5”（对于子 div）
然后，我们将 HTML 文件的旧内容移动到子 div 中，并添加引导类 list-group-item、list-group-item-header、list-group-item-description。
旧的和新的实现显示在下面的屏幕截图中。
保存文件并检查浏览器以查看结果。
您可能会看到如下屏幕截图所示的屏幕：
惊人的！现在，每辆自行车的详细信息都显示在一个box 内。没关系，但我们需要进行一些修改以使其看起来不错。对？让我们这样做。
我们需要在 app.component.html 文件中进行一些更改。别担心。我们只是添加了一些 div 元素和类，例如 row 、 col-md-7 和 col-md-5
旧实现和新实现显示在下面的屏幕截图中：
保存文件并在浏览器中检查结果。
我们将看到如下图所示的屏幕：
这比以前好。但有些不对劲！– 每个图块的大小不符合预期。
只需评论来自 bike-list-box.component.html 文件的行 div 和列 div（因为我们已经在应用程序组件 HTML 中应用了它）。请参阅下面的屏幕截图。
保存屏幕并在浏览器中检查结果。
我们将获得如下屏幕截图所示的屏幕。
我们已将bike-details 组件的位置移动到bike-list 组件的右侧。
成功！
我们为我们的应用程序组件应用了一些bootstrap 样式类来改进 UI。
结论
在本文中，我解释了在 Angular 应用程序中安装和应用bootstrap 样式的步骤，并在我们的自行车门户应用程序中使用了一些bootstrap 样式类来将自行车详细信息显示为瓷砖。
要阅读我的下一篇文章，请单击此处 >> #7 – 为我们的自行车租赁门户创建导航栏
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
