9个适用于React,Vue,Angular的Bootstrap UI组件库

9个适用于React,Vue,Angular的Bootstrap UI组件库

英文原文 | 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一起安装使用。

9个适用于React,Vue,Angular的Bootstrap UI组件库

1、React Bootstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

2、Reactstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

3、 Material Design React Bootstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

4、BootstrapVue

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

5、UIV

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

6、Material Design React Bootstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

7、NG Bootstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

8、AngularJS Bootstrap

9个适用于React,Vue,Angular的Bootstrap UI组件库

目前有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

9个适用于React,Vue,Angular的Bootstrap UI组件库

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

9个适用于React,Vue,Angular的Bootstrap UI组件库

9个适用于React,Vue,Angular的Bootstrap UI组件库