@aa-test/ngx-bootstrap 中文文档教程

Question

ngx-bootstrap

Server side rendered version of this documentation available here served with Angular universal and nest.js

快速集成 Bootstrap 3 或 Bootstrap 4 具有 Angular 的组件

Links

• Documentation
• Release Notes
• Slack Community

Table of contents

1. Getting Started
2. Supporting
3. Installation instructions
4. Usage & Demo
5. API
6. Compatibility
7. Troubleshooting
8. Contributing

Getting Started

ngx-bootstrap 包含由 Angular 提供支持的所有核心（而不仅仅是）Bootstrap 组件。 所以你不需要包含原始的 JS 组件，但我们使用的是 Bootstrap 提供的标记和 CSS。

Supporting NGX-Bootstrap

ngx-bootstrap 是一个开源（MIT 许可）项目，它是一个独立的项目，由于我们出色的支持者的支持，它的持续开发成为可能。 如果您还想表示支持或只是回馈开源社区，请考虑成为 OpenCollective 上的 ngx-bootstrap。

所有捐赠的资金都在 OpenCollective 上透明管理，并将仅用于补偿贡献者的工作和费用。 Valor Software 员工和承包商没有资格使用这些资金。

你有什么事？ 在我们的页面上正确识别和展示您的名称/徽标/网站。 我们的主要赞助商将在本节介绍！ 成为第一个！

Installation instructions

Method 1

从 npm 安装 ngx-bootstrap：

npm install ngx-bootstrap --save

将所需的包添加到 NgModule 导入：

import { TooltipModule } from 'ngx-bootstrap/tooltip';

@NgModule({
  ...
  imports: [TooltipModule.forRoot(),...]
  ...
})

将组件添加到您的页面：

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

您将需要引导样式：

• Bootstrap 3

<!-- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

• Bootstrap 4

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Method 2

使用 Angular CLI ng add 命令更新您的角度项目。

ng add ngx-bootstrap

或者使用 ng add 添加所需的组件（例如工具提示）。

ng add ngx-bootstrap --component tooltip

将组件添加到您的页面：

<button type="button" class="btn btn-primary"
        tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Simple demo
</button>

Setting up the bootstrap version manually

有时，您的项目可能包含一些可能会干扰引导程序框架的库，或者您可能有自定义版本的引导程序。 结果是确定引导程序版本的过程可能会失败，这可能会破坏 UI。 在这种情况下，我们仍然可以在引导组件（即 AppComponent）中手动设置引导版本：

import { setTheme } from 'ngx-bootstrap/utils';

@Component({...})
export class AppComponent {
  constructor() {
    setTheme('bs3'); // or 'bs4'
    ...
  }
}

Usage & Demo

此处提供 API 文档和使用场景的主要来源： https://valor-software.com/ngx-bootstrap/。

此外，您还可以找到使用 angular@latest 和 angular@next.

此文档的服务器端呈现版本可在此处使用 Angular universal 和 nest.js。

API

查看 API 的演示页面参考。

How to use it with:

• Bootstrap and angular-cli please refer to using-with-bootstrap-and-angular-cli
• angular-seed please refer to getting-started-with-angular-seed
• system.js (and angular2 quickstart) please checkout sample repository
• plnkr sample available here
• AoT using ngc and rollup please refer to ngx-bootstrap-with-aot
• ASP.NET Core 2.0 please refer to using-with-asp.net-core-2

How to build lib for development

第一次：

• clone repository
• npm install
• npm run build

更新你的 fork 并为本地使用做准备：

• git pull upstream development
• rm -rf node_modules
• npm install
• npm run build

运行演示：

• npm run demo.serve // to serve local demo. This is for testing only, without watchers.

对于本地开发运行：

• npm run build.watch // in first terminal
• ng serve // in second

如果你想使用 Angular Universal 运行演示：

• npm run demo.serve-universal

Compatibility

唯一的两个依赖项是 Angular 和 Bootstrap CSS。 这是版本兼容性列表：

ngx-bootstrap	Angular	Bootstrap CSS
5.x.x	7.x.x - 8.x.x	3.x.x or 4.x.x
4.x.x	6.x.x - 7.x.x	3.x.x or 4.x.x
3.x.x	6.x.x - 7.x.x	3.x.x or 4.x.x
2.x.x	2.x.x - 4.x.x	3.x.x or 4.x.x
1.x.x	2.x.x	3.x.x or 4.x.x

Troubleshooting

因此，如果您遇到麻烦，可以在这里寻求帮助。

提问的最佳地点是 StackOverflow（在 ngx-bootstrap 标签下） 您还可以加入 SackY 问题链接。 但尽量避免直接在 Slack 上询问一般性的帮助问题，因为它们很容易在聊天中迷失方向。 您还可以搜索现有的 GitHub 问题。

如果，且仅当，以上都没有帮助，请打开一个新问题。

Contribution

非常欢迎所有贡献！ 请记住，贡献不仅是 PR 和代码，还非常感谢任何对文档的帮助或帮助其他开发人员解决问题！ 提前致谢！

请阅读我们的贡献指南。

If you need more modules, check here

请阅读中央 ngx 模块 readme 了解详细信息、计划和方法。

Credits

由 Saucelabs 赞助的跨浏览器测试

Cypress 赞助的端到端测试

License

麻省理工学院< /a>