介绍
@perfectlynormal/ngx-bootstrap 是一个 Angular 的 UI 库，它是 ng-bootstrap 和 Bootstrap 的进一步封装。它基于 Twitter Bootstrap 的样式和组件，提供了 Angular 版本的实现。使用 ngx-bootstrap 可以大大简化前端开发人员的工作，提高开发效率。
特色
- ngx-bootstrap 中的所有组件均为原生 Angular 组件
- 组件有可选的依赖项，比如 HammerJS
- 支持 AOT 编译
- 支持 SSR
- 可以自定义主题
安装
使用 npm 安装，输入以下命令：
npm install --save @perfectlynormal/ngx-bootstrap
使用
引入 ngx-bootstrap 模块
在 Angular 应用程序的 AppModule 中引入 ngx-bootstrap 模块：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
------ - ------------- - ---- -----------------------------------------
-----------
-------- -
--------------
------------
-----------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -使用组件
<button type="button" [tooltip]="content" tooltipTitle="Hello world"> Tooltip on hover </button>
<button> 标签显示了一个 tooltip。当你将鼠标悬停在 <button> 上时，会弹出一个 tooltip 气泡，并显示内容 "Hello world"。
示例代码
这里为了演示，我们使用最常用的 tooltip 来展示如何使用 ngx-bootstrap。首先我们在 HTML 文件中写入以下代码：
<button type="button" class="btn btn-info" tooltip="这是一个Tooltip">Hover me!</button>
之后我们需要在 TS 文件中引入和声明 tooltip 模块：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------------------------------
-----------
------------- -
------------
--
-------- -
--------------
-----------------------
--
---------- ---
---------- --------------
--最后我们需要在 CSS 中引入 Bootstrap 的样式：
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
现在我们就可以用 ng serve 命令启动这个应用程序，并看到 Tooltip 组件在鼠标悬浮时提示出现了。
总结
@perfectlynormal/ngx-bootstrap 可以大大简化前端开发人员的工作，提高开发效率。本文介绍了 ngx-bootstrap 的安装和使用方法，并提供了一个简单的示例。不管是 Angular 新手还是老手，都可以很容易上手使用 ngx-bootstrap。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664781e8991b448e25c3