在Angular 8中集成Bootstrap 4和FontAwesome的方法

2 年 ago

韵, 科

2 minutes

在Angular 8中集成Bootstrap 4和FontAwesome的方法。

由大津修一所说

undefined

https://github.com/Ohtsu/ng8-bootstrap4-fontawesome的完整源代码

以下是视频解说的中国中文翻译链接：

视频解说（英文）

关于项目的创建方法

在这里，我们将介绍如何在Angular8中整合Bootstrap4和FontAwesome。

另外，关于从项目创建阶段开始设置Bootstrap4的方法，我们已经在Angular8的Bootstrap4环境设置方法https://youtu.be/gFxuSi4IZjM中进行了公开，请您参阅。

本次，我们将从GitHub下载预设的项目，并进一步将FontAwesome集成到其中。

请查看该项目的完整源代码以了解其内容。

从GitHub下载包含Bootstrap 4的项目源代码。

首先，从GitHub下载包含Bootstrap4的项目的完整源代码。

请以中国语言为母语来解释以下内容，只需要给出一个选项：
该URL。

以下是 Ohtsu/ng8-bootstrap4-initial 的 Github 链接。

是的。

undefined

当页面显示后，点击右侧绿色的“克隆或下载”按钮。

然后将会显示出可用于下载的地址，需要点击右边的复制图标并将该地址复制保存。

undefined

创建项目

打开命令提示符，并在适当的目录中进行移动后，在该目录中使用git clone命令，然后粘贴复制的地址。

将以下内容以中文本土的方式重新表述，仅提供一种选择:
使用命令git clone https://github.com/Ohtsu/ng8-bootstrap4-initial.git将项目从GitHub上克隆到本地。

在中文输入中键入。

然后下载将开始。

undefined

启动Visual Studio Code

然后，进入生成的项目目录。

切换到 ng8-bootstrap4-initial 目录下

启动Visual Studio Code。

代码.

输入。

undefined

当VSCode启动后，

按下ctrl+@键，打开终端窗口。

undefined

然后，

安装npm

输入这段代码，并安装项目所需的库。

undefined

确认项目启动

接下来，我们将确认项目是否能够启动。

你好吗？
Nǐ ma?

输入以下内容。

undefined

当你的浏览器自动打开时，会显示下拉菜单和弹出菜单。

undefined

可以。

更改项目名称

接下来，我们将对项目的内容进行修改。

首先，我们将更改项目名称。

打开package.json文件，你会发现项目名称是ng8-bootstrap4-initial。现在将其改为ng8-bootstrap4-fontawesome。

点击左侧的搜索图标，对整个项目的源代码进行替换操作。

undefined

下一步，假设 PascalCase，也就是用大写字母分隔的方式存在，那么我将 Ng8Bootstrap4Initial 修改为 Ng8Bootstrap4Fontawesome。

undefined

以下是一个可能的中文翻译选项：
然后

安装 npm

输入”と”，然后再次安装库。

undefined

另外，还会检查项目是否可以启动。

我是一个学生。

输入。
rù)

undefined

浏览器会自动打开，并显示下拉菜单和弹出窗口。

undefined

可以的。

安装FontAwesome

接下来，您可以通过使用”ctrl+c”命令暂停本地服务器，然后安装FontAwesome字体库。

在终端窗口中输入 npm i @fortawesome/fontawesome-free。

undefined

请注意，下一个字符串是 “fortawesome” 而不是 “fontawesome”。

接下来，请打开package.json文件并确认已安装。同时，也请复制@fortawesome/fontawesome-free这个字符串。

接下来，打开angular.json文件，在项目- 架构师- 构建 – 样式的部分添加已安装的FontAwesome。

我只需要一个选项，将以下内容用中文进行本地化改写：
具体来说，

./node_modules/@fortawesome/fontawesome-free/css/all.min.css 可以被中文原生地改写为：
“./node_modules/@fortawesome/fontawesome-free/css/all.min.css”

增加一行代码。

undefined

添加Bootstrap4按钮

接下来打开ng-bootstrap的网站，查看按钮的示例程序。

URL是

请将下面的内容翻译为中文，只需一种选项：
https://ng-bootstrap.gitgub.io/#/home

https://ng-bootstrap.gitgub.io/#/home 可以转译为： “https://ng-bootstrap.gitgub.io/#/home”

是的。

undefined

在这里，点击“Demo”按钮，然后从左侧菜单中选择“Buttons”。

undefined

由于显示了复选框按钮的示例，所以首先将此按钮导入Angular8项目，并在该按钮中显示FontAwesome图标。

首先，点击右上角的Code按钮，显示源代码。

首先复制HTML文本。

undefined

回到VSCode，打开src/app文件夹中的app.component.html文件。

将与下拉菜单和上拉菜单相关的部分进行注释。

将复制的HTML粘贴到这里。

undefined

返回浏览器并打开TypeScript文件。

由于只有模型部分需要追加，因此我们将复制这部分。

undefined

返回VSCode，打开src/app文件夹中的app.component.ts文件。

我将复制的model部分粘贴在这里。

undefined

接下来，打开app.module.ts文件并导入FormsModule。

undefined

复选框和按钮的显示

在这里，再次启动本地服务器，并确认复选框和按钮是否显示出来。

我沒有原因

输入『と』。

undefined

undefined

可以的。

添加FontAwesome的图标

然后，我们将在每个按钮中添加FontAwesome的图标。

回到VSCode，并打开app.component.html文件。

删除下拉和上拉相关的部分。

首先，尝试将Google的图标放在左边的按钮上。

这个方法很简单。

只需要在按钮的文本部分插入。

undefined

我会在浏览器上确认。

undefined

没问题。 .)

返回VSCode，然后插入Twitter和Facebook的图标。

undefined

我会在浏览器中确认。

undefined

好的。

接下来，由于”left”或”middle”之类的字符串有问题，所以将其更改为Google等。

回到VSCode，打开app.component.ts文件，并修改模型的定义。

undefined

另外，打开app.component.html文件并对相应部分进行更改。

undefined

我会在浏览器上确认。

undefined

没问题。

最后，我还会更改按钮的颜色。

回到VSCode，打开app.component.html文件，修改按钮的类名并改变颜色。

undefined

我会在浏览器上进行确认。

undefined

没问题。

参考资料

https://www.udemy.com/angular5-l/

✖

将在 10 秒后关闭

bannerAds