用于Angular，React和Vue.js的Bootstrap UI库

This article lists a number of resources that provide Bootstrap components for your Angular, React, and Vue.js apps.

本文列出了为Angular，React和Vue.js应用程序提供Bootstrap组件的大量资源。

These days, the web is populated with single page applications (SPAs) which feel fast and responsive to user interaction. Often, they’re powered by JavaScript frameworks like Angular, React, and Vue.js.

如今，Web充满了单页面应用程序(SPA)，这些应用程序感觉很快并且对用户交互具有响应能力。 通常，它们由Angular ， React和Vue.js之类JavaScript框架提供支持。

These libraries are great tools that help keep the JavaScript code needed to build SPAs more organized and maintainable, while using clever techniques to update the DOM without slowing down the web page.

这些库是很棒的工具，可以帮助保持构建SPA所需JavaScript代码更加有条理和可维护，同时使用巧妙的技术来更新DOM而不会降低网页的速度。

When it comes to styling the components you can create with these libraries, you’re spoilt for choice: you can write your own global CSS document as you normally would on regular websites, you can write inline styles, or you can use UI frameworks — which is what I’ll focus on here.

在样式化可以使用这些库创建的组件的样式时，您会选择很多：您可以像通常在常规网站上一样编写自己的全局CSS文档，可以编写内联样式，或者可以使用UI框架-这就是我在这里重点介绍的。

Angular开发人员的Bootstrap接口元素 (Bootstrap Interface Elements for Angular Developers)

Angular is the oldest of the frameworks I deal with in this article. Its maturity and long life in the brutal life cycle of JavaScript frameworks is a sign of its robust and reliable foundation for web projects.

Angular是我在本文中讨论的最古老的框架。 它在JavaScript框架的残酷生命周期中的成熟度和长寿命表明了其健壮可靠的Web项目基础。

What tools are out there if you want to use Bootstrap to style your Angular app?

如果要使用Bootstrap设置Angular应用的样式，可以使用哪些工具？

ng-bootstrap (ng-bootstrap)

ng-bootstrap offers a set of Bootstrap-styled components that makes building Bootstrap apps with Angular a breeze.

ng-bootstrap提供了一组Bootstrap样式的组件，使使用Angular构建Bootstrap应用程序变得轻而易举。

More specifically, this resource contains a set of Angular directives based on Bootstrap’s markup and styles. To use it, it’s important that you don’t include any Bootstrap JavaScript files. You only need Angular and Bootstrap CSS files.

更具体地说，此资源包含一组基于Bootstrap的标记和样式的Angular指令 。 要使用它，请不要包含任何Bootstrap JavaScript文件，这一点很重要。 您只需要Angular和Bootstrap CSS文件。

ng-bootstrap is a free and open-source project. Feel free to contribute to it or ask for new features on GitHub.

ng-bootstrap是一个免费的开源项目 。 随时为它贡献力量或在GitHub上寻求新功能。

ngx-bootstrap (ngx-bootstrap)

This is another great, open-source modular library of Bootstrap components powered by Angular. You don’t need to use jQuery or any Bootstrap JS code, although the markup and CSS are provided by Bootstrap.

这是由Angular提供支持的另一个出色的Bootstrap组件的开源模块化库。 尽管标记和CSS由Bootstrap提供，但是您无需使用jQuery或任何Bootstrap JS代码。

To install the library using npm, type this line into the command line:

要使用npm安装库，请在命令行中输入以下行：

npm install ngx-bootstrap --save

Then include the link to Bootstrap’s stylesheet in index.html document:

然后在index.html文档中包含Bootstrap样式表的链接：

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

You can refer to the awesome docs pages on the ngx-bootstrap website for detailed explanations and tutorials.

您可以参考ngx-bootstrap网站上的真棒文档页面，以获取详细说明和教程。

用于React开发人员的Bootstrap接口元素 (Bootstrap Interface Elements for React Developers)

React was created by the Facebook devs and is one of the trendiest JavaScript libraries for building modern user interfaces.

React由Facebook开发人员创建，是用于构建现代用户界面的最流行JavaScript库之一。

If you’re looking to give your React app a Bootstrap makeover, here are some of the options available to you out there.

如果您希望为您的React应用提供Bootstrap改造，这里有一些可用的选项。

React带 (reactstrap)

reactstrap is a fast and convenient library that lets you add a Bootstrap 4 look and feel to your React app.

reactstrap是一个快速便捷的库，可让您向React应用添加Bootstrap 4外观。

The styling is provided by Bootstrap, while the JavaScript functionality is built into reactstrap components. This means that you don’t need to include any jQuery or Bootstrap JS code. However, you need to include react-popper, since some dynamic Bootstrap components like dropdowns depend on Popper.js to work properly.

样式由Bootstrap提供，而JavaScript功能内置于reactstrap组件中。 这意味着您不需要包括任何jQuery或Bootstrap JS代码。 但是，您需要包括react-popper ，因为某些动态的Bootstrap组件(例如下拉菜单)依赖于Popper.js才能正常工作。

You can install reactstrap via a CDN:

您可以通过CDN安装reactstrap：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/4.8.0/reactstrap.min.js">

In this case, you need to include the React library and ReactTransitionGroup before reactstrap.

在这种情况下，您需要在reactstrap之前包括React库和ReactTransitionGroup。

You can also install the library and all dependencies with NPM:

您还可以使用NPM安装该库和所有依赖项：

npm install --save reactstrap@next react react-dom

If you’re curious, hop over to the docs and learn more about each component and how to integrate reactstrap with the Create React App setup.

如果您好奇，请跳至文档，了解有关每个组件以及如何将reactstrap与Create React App设置集成的更多信息。

React引导 (React-Bootstrap)

React-Bootstrap is an open-source project which is still under active development to reach the 1.0.0 release.

React-Bootstrap是一个开源项目，仍在积极开发中，以实现1.0.0版本。

Since this library doesn’t support any specific Bootstrap version, you’re free to include any Bootstrap stylesheet you think best suits your project. Generally speaking, including the latest Bootstrap release will ensure that you enjoy the benefits of improvements and bug fixes, so this should be your preferred option.

由于该库不支持任何特定的Bootstrap版本，因此您可以自由地添加任何您认为最适合您的项目的Bootstrap样式表。 一般来说，包括最新的Bootstrap版本将确保您享受改进和​​错误修复的好处，因此这应该是您的首选。

The most straightforward way of including Bootstrap in your React app is via a CDN:

在您的React应用程序中包含Bootstrap的最直接方法是通过CDN：

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

On the JavaScript front, you just need React; no jQuery or Bootstrap JS is required for Rect-Bootstrap to work. You can install this Bootstrap UI library using NPM:

在JavaScript方面，您只需要React； Rect-Bootstrap不需要jQuery或Bootstrap JS。 您可以使用NPM安装此Bootstrap UI库：

npm install --save react react-dom
npm install --save react-bootstrap

Installing the library this way will allow you to import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the individual components you need rather than the entire package, which is great for keeping the file size under control.

这样安装库将允许您从react-bootstrap/lib而不是整个库中导入单个组件。 这样做只会提取您需要的单个组件，而不是整个程序包，这对于控制文件大小非常有用。

Alternatively, you can include React-Bootstrap and the React library as a bundle using CDNJS and reference the files in your <script> tags:

另外，您可以使用CDNJS将React-Bootstrap和React库作为一个包包含在内，并在<script>标签中引用文件：

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/<react-version>/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/<version>/react-bootstrap.min.js"></script>

Bootstrap React版本的材料设计 (Material Design for Bootstrap React Version)

Material Design for Bootstrap (also available for Angular and Vue) is a UI library for React that combines the look and feel of Bootstrap and Google’s Material Design.

Bootstrap的Material Design (也适用于Angular和Vue )是React的UI库，它结合了Bootstrap和Google的Material Design的外观。

Among its advantages are:

其优势包括：

• being up to date with the latest release of Bootstrap
  与最新版本的Bootstrap保持同步
• its awesome documentation and tutorials
  它很棒的文档和教程
• being compatible with the latest release of React
  与最新版本的React兼容
• its use of JSX
  它对JSX的使用
• its easy installation
  它易于安装
• being free for personal and commercial projects.
  对个人和商业项目免费。

To get started with Material Design for Bootstrap, just download it straight from the project’s website, or use NPM:

要开始使用Material Design for Bootstrap，只需直接从项目的网站上下载它，或使用NPM：

npm install mdbreact

or use yarn:

或使用纱线：

yarn add mdbreact

Once you’ve got the files, everything is linked appropriately and ready to go. Run npm install then npm start and get coding.

获得文件后，所有内容都将正确链接并准备就绪。 运行npm install然后npm start并获取编码。

Vue开发人员的Bootstrap接口元素 (Bootstrap Interface Elements for Vue Developers)

Vue.js hasn’t been around long, but it’s steadily been gaining ground in popularity due to a number of benefits that come with it:

Vue.js已经存在了很短的时间，但是由于它带来的许多好处，使其稳步流行起来：

• it’s easy to get started: you can quickly include it in an HTML project via a CDN and incorporate it in your regular HTML document using its directives
  很容易上手：您可以通过CDN将其快速包含在HTML项目中，并使用其指令将其合并到常规HTML文档中
• you can decide to incorporate Vue incrementally by starting with a few features and eventually embrace it as a full-blown framework
  您可以决定从一些功能入手，逐步将Vue纳入，最终将其作为一个成熟的框架来使用
• it has a small file size and it’s very performant out of the box.
  它的文件很小，开箱即用。

To integrate Bootstrap into your Vue-based app, Bootstrap-Vue is a nice option.

要将Bootstrap集成到基于Vue的应用程序中，Bootstrap-Vue是一个不错的选择。

Bootstrap-Vue (Bootstrap-Vue)

Bootstrap-Vue introduces itself on its website as the UI library that:

Bootstrap-Vue在其网站上作为UI库进行自我介绍，该UI库包括：

provides one of the most comprehensive implementations of Bootstrap V4 components and grid system available for Vue.js 2.4+, complete with extensive and automated WAI-ARIA accessibility markup.

提供了适用于Vue.js 2.4+的Bootstrap V4组件和网格系统的最全面的实现之一，并带有大量且自动的WAI-ARIA可访问性标记。

The documentation is great and you can also try out the library before including it in your project on the Bootstrap-Vue playground.

该文档非常有用，您还可以尝试将该库包含在Bootstrap-Vue操场上的项目中之前。

结论 (Conclusion)

This article has listed a number of UI libraries to help you give your SPA’s components a Bootstrap look and feel. These are fully functional Bootstrap components that work with Angular, React, and Vue out of the box, without extra work required from you.

本文列出了许多UI库，以帮助您为SPA的组件提供Bootstrap外观。 这些是功能齐全的Bootstrap组件，可以直接使用Angular，React和Vue，而无需您进行额外的工作。

What’s your favorite way of integrating Bootstrap with your JavaScript framework of choice?

将Bootstrap与所选JavaScript框架集成的最喜欢的方式是什么？

翻译自: https://www.sitepoint.com/bootstrap-ui-libraries-angular-react-vue/