让我们开发一个 Angular 应用程序 – Bootstrap 安装和使用

作者 : 慕源网 本文共1926个字,预计阅读时间需要5分钟 发布时间: 2022-01-9 共267人阅读

介绍

这是我的“让我们开发一个 Angular 应用程序”系列文章的第 6 篇文章。到目前为止,我们已经创建了一个 Angular 应用程序和一些组件,为我们的 Bike 实体创建了一个模型类,并创建了一组硬编码的 Bike 细节。然后,我们使用 ngFor 在硬编码数组中显示自行车详细信息。

请阅读之前的文章,以全面了解我们正在努力实现的目标。

要阅读我之前的文章,请单击此处 >>   #5 – Angular 组件通信

在本文中,我们将了解如何在 Angular 应用程序中使用bootstrap 样式。

目前,我们的应用程序 UI 如下图所示。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

我们可以使用bootstrap 库向我们的应用程序添加一些样式属性。

为此,首先,我们需要将bootstrap 库安装到我们的应用程序中。

这是一个非常简单的两步过程:

步骤1

使用以下命令安装引导程序:

npm install bootstrap – save

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

在这里,我正在为我们的应用程序安装bootstrap 程序版本 3。

第2步

在 Angular.json 文件中添加引导 CSS 文件路径

bootstrap 文件夹将出现在 node_modules 文件夹下

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

复制 bootstrap.min.css 文件的文件路径并将其粘贴到 Angular.json 文件的样式属性数组中。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

注意

如果我们的应用程序已经在运行,请停止它并使用 ng serve 命令重新运行,以使bootstrap 样式适用于您的应用程序。

我们可以通过使用bootstrap 类添加测试按钮样式来测试在我们的应用程序中工作的bootstrap 库。

让我们在bike-deatils.component.html 文件中添加一个按钮。

<button type=”button” class=”btn btn-success”>预订试驾</button>

请参考下面的截图:

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

在这里,我们为按钮使用 btn-success 类。还有一些其他的按钮bootstrap 类,例如 btn-primary、btn-danger 等。

更多信息,请访问这里>> https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

保存应用程序并检查浏览器的结果。我们将得到以下屏幕。

将为每个项目添加一个按钮。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

所以,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。

旧的和新的实现显示在下面的屏幕截图中。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

保存文件并检查浏览器以查看结果。

您可能会看到如下屏幕截图所示的屏幕:

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

惊人的!现在,每辆自行车的详细信息都显示在一个box 内。没关系,但我们需要进行一些修改以使其看起来不错。对?让我们这样做。

我们需要在 app.component.html 文件中进行一些更改。别担心。我们只是添加了一些 div 元素和类,例如 row 、 col-md-7 和 col-md-5

旧实现和新实现显示在下面的屏幕截图中:

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

保存文件并在浏览器中检查结果。

我们将看到如下图所示的屏幕:

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

这比以前好。但有些不对劲!– 每个图块的大小不符合预期。

只需评论来自 bike-list-box.component.html 文件的行 div 和列 div(因为我们已经在应用程序组件 HTML 中应用了它)。请参阅下面的屏幕截图。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

保存屏幕并在浏览器中检查结果。

我们将获得如下屏幕截图所示的屏幕。

我们已将bike-details 组件的位置移动到bike-list 组件的右侧。

让我们开发一个 Angular 应用程序 - Bootstrap 安装和使用

成功!

我们为我们的应用程序组件应用了一些bootstrap 样式类来改进 UI。

结论

在本文中,我解释了在 Angular 应用程序中安装和应用bootstrap 样式的步骤,并在我们的自行车门户应用程序中使用了一些bootstrap 样式类来将自行车详细信息显示为瓷砖。

要阅读我的下一篇文章,请单击此处 >>  #7 – 为我们的自行车租赁门户创建导航栏


慕源网 » 让我们开发一个 Angular 应用程序 – Bootstrap 安装和使用

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录