介绍
ng2-bootstrap-base-modified 是一个基于 Bootstrap v4 和 Angular 4 的组件库。相比于原版的 ng2-bootstrap，它主要有以下改动：
- 移除了对 jQuery 的依赖，使其更适合在 Angular 环境下使用；
- 针对业务场景做了一些调整和封装，提高了使用体验。
安装
你可以通过 npm 安装 ng2-bootstrap-base-modified：
npm install ng2-bootstrap-base-modified --save
使用
安装之后，你需要在你的 app.module.ts 中引入并注册 ng2-bootstrap-base-modified：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------------ ------ - -------- - ---- ---------------- ------ - ----------- - ---- ----------------- ------ - ---------------------- - ---- ------------------------------ ----------- -------- - ------------- ------------ -------------------------------- -- ------------- - -- ---- ------------- -- ---------- - -- ---- ----------- -- ---------- - -- ---- --- ------------ - -- ------ ----- --------- - -展开代码
组件
ng2-bootstrap-base-modified 提供了以下组件：
1. Alert
Alert（警告框）组件用于向用户提供警告或提示信息。
<bs-alert type="info">This is an info alert!</bs-alert>
Alert 组件有以下 5 种类型：
primarysuccessinfowarningdanger
属性：
type：设置 Alert 的类型，默认为info；dismissible：设置 Alert 是否可关闭，默认为true。
2. Modal
Modal（弹窗）组件用于展现一段需要用户交互的信息。
<bs-modal title="Sample modal" [(show)]="showModal"> <div class="modal-body"> This is a sample modal. </div> <div class="modal-footer"> <button type="button" class="btn btn-default" (click)="showModal = false">Close</button> </div> </bs-modal>
属性：
show：模态框是否显示的 boolean 值，双向绑定；title：模态框的标题；size：模态框的大小，共 3 种设置：sm,lg,xl；backdrop：是否显示背景遮罩，默认为 true；keyboard：是否允许按 Esc 键关闭模态框，默认为 true；animation：是否显示动画效果，默认为 true。
事件：
onDismiss：模态框关闭时触发的事件，可以用来清空表单等。
3. Buttons
Buttons（按钮）组件提供了多种样式和状态的按钮。
<bs-button type="primary">Primary</bs-button> <bs-button type="success">Success</bs-button> <bs-button type="info">Info</bs-button> <bs-button type="warning">Warning</bs-button> <bs-button type="danger">Danger</bs-button>
属性：
type：按钮的类型，共 5 种：primary,success,info,warning,danger；size：按钮的大小，共 3 种设置：sm,md,lg；disabled：按钮是否禁用；outline：按钮是否为轮廓样式；icon：按钮的图标，可以使用 Font Awesome 的图标；iconPos：按钮内图标的位置，可选值有left和right。
事件：
onClick：按钮被点击时触发的事件。
4. Dropdown
Dropdown（下拉菜单）组件提供了多种样式和功能丰富的下拉菜单。
<bs-dropdown label="Dropdown"> <bs-dropdown-item (selected)="onSelected(1)">Item 1</bs-dropdown-item> <bs-dropdown-item (selected)="onSelected(2)">Item 2</bs-dropdown-item> <bs-dropdown-item (selected)="onSelected(3)">Item 3</bs-dropdown-item> <bs-dropdown-item divider></bs-dropdown-item> <bs-dropdown-item (selected)="onSelected(4)">Item 4</bs-dropdown-item> </bs-dropdown>
属性：
label：下拉菜单的主标签；icon：下拉菜单的图标，可以使用 Font Awesome 的图标；position：下拉菜单的位置，可以设置为left、center和right。
事件：
onSelected：下拉菜单中任何一个项被选中时触发的事件。
总结
ng2-bootstrap-base-modified 提供了比较实用的 Bootstrap 插件，让我们更加轻松地进行前端的开发。在开发过程中，可以通过这些组件来减少自己的重复工作，提高开发效率。在 Angular 4 的环境下，使用 ng2-bootstrap-base-modified 可以更加方便地快速开发出我们所需要的功能。
示例代码详见 ng2-bootstrap-base-modified 仓库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571881e8991b448d404e
