在现代 web 开发中，前端框架和库扮演了非常重要的角色。Angular 是一个知名且广泛使用的框架之一，它提供了许多可复用的组件和工具。ng-bootstrap-ng4git 是一个基于 Bootstrap 的组件库，适用于 Angular 4+，可以帮助 Angular 开发者快速搭建 Web 页面并增强用户体验。
在本文中，我们将介绍如何使用 ng-bootstrap-ng4git。
安装和配置
在开始使用 ng-bootstrap-ng4git 之前，我们需要在本地项目中安装相应的 npm 包以及所需的依赖项。在命令行中执行以下命令：
npm install ng-bootstrap bootstrap jquery popper.js --save
上述命令将通过 npm 安装 ng-bootstrap、Bootstrap、jQuery 以及 popper.js 包，并将它们添加到 package.json 中的依赖项列表中。
接着，我们需要在项目的 angular-cli.json 文件中添加所需的 CSS 和 JavaScript 资源。打开 angular-cli.json 文件，找到 styles 和 scripts 数组，将以下内容添加到它们的末尾：
-- -------------------- ---- -------
--------- -
-------------------------------------------------------
----------------------------------------------------
------------
--
---------- -
--------------------------------------------
---------------------------------------------------
----------------------------------------------------
-这些资源将在项目构建期间自动引入。
现在，我们已经完成了 ng-bootstrap-ng4git 的安装和配置过程。接下来，我们将看一看如何使用它来构建一个响应式导航栏。
响应式导航栏
在创建响应式导航栏之前，我们需要在 app.module.ts 文件中导入 BrowserModule 和 NgbModule：
-- -------------------- ---- -------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - --------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -接着，我们需要在 app.component.html 文件中添加以下代码：
-- -------------------- ---- -------
---- ------------- ---------------- ----------- ---------
---- ------------------
-- -------------------- ------------------
------- ---------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- ---------------
--- -------------------
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- ---------------------
-----
--- -----------------
-- ---------------- --------------------
-----
--- -----------------
-- --------------- --------- ---------------------
-----
-----
------
------
------在上述代码中，我们创建了一个名为 navbar 的 Bootstrap 导航栏，并添加了品牌名称以及向下拉出菜单里的导航链接。接下来，我们需要在 app.component.ts 文件中添加以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ----------------------- ---------- ----------------------- -- ------ ----- ------------ - -
现在，我们已经创建了一个简单的响应式导航栏。你可以在浏览器中查看此导航栏，并可以更改它以适应你的项目需求。
总结
在本文中，我们介绍了如何安装和配置 ng-bootstrap-ng4git，并创建了一个基本的响应式导航栏。通过自学和尝试，你可以编写更丰富的 Angular Web 应用程序，并可以借助 ng-bootstrap-ng4git 增强用户体验。
完整代码：
-- -------------------- ---- -------
---- ------------------ ---
---- ------------- ---------------- ----------- ---------
---- ------------------
-- -------------------- ------------------
------- ---------------------- ------------- ---------------------- ------------------------ ------------------------- --------------------- ------------------ ------------
----- -----------------------------------
---------
---- --------------- ---------------- ---------------
--- -------------------
--- -----------------
-- ---------------- -----------------
-----
--- -----------------
-- ---------------- ---------------------
-----
--- -----------------
-- ---------------- --------------------
-----
--- -----------------
-- --------------- --------- ---------------------
-----
-----
------
------
------
-- ----------------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
-
-- -------------
------ - ------------- - ---- ----------------------------
------ - -------- - ---- ----------------
------ - --------- - ---- -----------------------------
------ - ------------ - ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
-------------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558a581e8991b448d5f66