英文原文 | https://blog.bitsrc.io/9-bootstrap-ui-component-libraries-for-2018-cfe86270f0db

译文翻译 | web前端开发（web_qdkf）

Bootstrap是世界上最受欢迎的前端框架，旨在能让各种工具保持一致。它包含排版，表单，按钮，以及基于HTML和CSS的网站模板与其他UI组件。

随着React，Vue和Angular之类的框架和库的兴起，我们构建的许多项目都将Bootstrap列入一组可重用的UI组件。

为了帮助你快速入门，我们收集了一些最佳的UI组件，这些组件使用现代框架实施Bootstrap。而使用这些组件常常被开发者社区中的很多人认为是明智的选择。

使用Bit（GitHub），你可以发现并重用这些库或你自己的组件中的特定组件。并与NPM / Yarn一起安装使用。

1、React Bootstrap

React-bootstrap可能是React中最流行的Bootstrap 3 + Bootstrap 4组件实现（1.4万 stars ，每周下载30万次）。每个组件都是作为React组件从头开始构建的，完全依赖于Bootstrap样式表来与现有的Bootstrap主题一起使用。

2、Reactstrap

Reactstrap是一个“无状态React Bootstrap 4组件”库，具有超过6K stars ，不依赖于Bootstrap Javascript。但是，依赖于通过react-popper的Poppers.js来对内容进行高级定位，例如工具提示，弹出窗口和自动翻转下拉菜单。内容由props.children组成，而不是使用命名的props传递到Components中。

3、 Material Design React Bootstrap

这个库是一组带有Material Design的React Bootstrap组件。组件提供了跨浏览器的兼容性，可与Chrome，Firefox，Safari，Opera和Microsoft Edge完美配合。包括对Flexbox布局系统的全面支持，以帮助解决对齐问题，并且文档丰富且有用。你可以观看此简短的快速入门视频（视频地址：https://www.youtube.com/watch?v=ozXDtSi5ByM）以帮助你快速使用。

4、BootstrapVue

BootstrapVue是适用于Vue.js的Bootstrap 4组件，网格系统的全面实现，颇受开发者的欢迎，（有6.5k stars ），它带有大量且自动的WAI-ARIA可访问性标记。它是为了使用Vue.js和Bootstrap 4 进行响应式开发，移动项目优先而构建的。它还提供了两个有用的vue-cli模板webpack-simple和webpack。

5、UIV

在Vue 2中实现的一组Bootstrap 3 UI组件。它轻巧，所有组件压缩了20KB，仅依赖于Vue和Bootstrap CSS。你可以单独导入组件，这些组件所有现代浏览器（IE 9+）均支持，还支持SSR。

6、Material Design React Bootstrap

该库具有400多个UI元素，600个图标和70个CSS动画，是基于Bootstrap和Vue功能的，有丰富的UI组件。其主要优势是响应速度快，兼容大部分浏览器并且可进行高度定制。

7、NG Bootstrap

Angular 6和Bootstrap 4是使用Angular组件构建的响应式布局的组合组件。NG-Bootstrap用TypeScript编写，具有100％的测试覆盖率，它唯一的依赖项是Angular和Bootstrap 4 CSS，并且此组件库在进行积极维护。

8、AngularJS Bootstrap

目前有15k stars，该库是一组用于Bootstrap的Native AngularJS指令，这些指令占用空间小（压缩20kb），并且没有JS依赖项（jQuery，bootstrap JS）。你可以在这里（地址：http://angular-ui.github.io/bootstrap/#!#getting_started）下载v2.5，并在这里（地址：http://angular-ui.github.io/bootstrap/#!#getting_started）查看指令。

9、NGX Bootstrap

ngx-bootstrap 有4.5K stars 。使用Angular实现Bootstrap 3和4小部件。它包含所有Bootstrap 标记和Bootstrap CSS核心组件，因此你无需使用原始JS组件。你就可以实现自己的模板和样式，并且所有组件的设计都具有可扩展性和适应性，并具有针对移动设备和台式机的标准化性能。你可以在这里（地址：https://valor-software.com/ngx-bootstrap/#/）尝试组件。