介绍
众所周知,Bootstrap是非常受欢迎的前端库,因为其美观的UI以及使用方式的简单而深受广大的前端爱好者的喜爱,但近年来各类前端框架大行其道,要想将Bootstrap尤其是其组件部分很优雅的使用到这些框架不一定很方便,在之前的文章中已经介绍过Vue的实现版本,本文就介绍以下React的版本——Reactstrap
![4916d753e2c95615182c33c49548c836.png](https://i-blog.csdnimg.cn/blog_migrate/cc952264ff244d07ef7bcf5a846e10f4.jpeg)
Github
https://reactstrap.github.io/
https://github.com/reactstrap/reactstrap
![8b25664b9c1406fce1468b74b3509bec.png](https://i-blog.csdnimg.cn/blog_migrate/2598ae570088e886e25d7108ed720a67.jpeg)
快速开始
1、安装使用
通过NPM安装reactstrap和对等依赖项
npm install --save reactstrap react react-dom
2、然后导入你需要的组件
import React from 'react';import { Button } from 'reactstrap';export default (props) => { return ( Danger! );};
3、结合creat-react-app使用
npx create-react-app my-appcd my-appnpm start
npm install --save bootstrapnpm install --save reactstrap react react-dom
然后在index.js中导入:
import 'bootstrap/dist/css/bootstrap.min.css';
在src/App.js文件或您的自定义组件文件中导入所需的reactstrap组件:
import { Button } from 'reactstrap';
现在可以在render方法中定义的组件层次结构中使用导入的reactstrap组件
部分组件介绍
- 消息弹框
This is a primary alert — check it out!
替换color属性:primary、secondary、success、danger、warning、info、light、dark可实现不同效果
![51096066f255bf00947bb6f34fa05f31.png](https://i-blog.csdnimg.cn/blog_migrate/5befac54249046c8d6d146b44497df32.jpeg)
- 面包屑
HomeLibraryDataBootstrap
面包屑无需使用列表标记
![803e26b34d5da5da5bb84e85cde9856c.png](https://i-blog.csdnimg.cn/blog_migrate/5e4b3b25f6098c5f6ddbde2310f8e07e.jpeg)
- 按钮和按钮下拉框
![124c0ee8117c2ebc50e840f14b0b7758.png](https://i-blog.csdnimg.cn/blog_migrate/7b6b041c2a8f2c66d3c5ad6be5ada349.jpeg)
![8d294e20a9692e66ab7ee76cfd008f95.png](https://i-blog.csdnimg.cn/blog_migrate/5e339f12ccf665dead0e2c4cd6871201.jpeg)
- 轮播图
{slides}
![174b1e06d12ad3a13da0b7daf562a4e8.png](https://i-blog.csdnimg.cn/blog_migrate/8af2f1e98c3f7aee8f4a9bc5c6c216bc.jpeg)
- 表单组件
![efc12ea5c480f1d540208d32465f8173.png](https://i-blog.csdnimg.cn/blog_migrate/538f834606b0f95ccb5010b81980771d.jpeg)
- 布局
.col .col .col .col .col .col-6 .col-sm-4 .col-6 .col-sm-4 .col-sm-4 .col-sm-6 .order-sm-2 .offset-sm-1 .col-sm-12 .col-md-6 .offset-md-3 .col-sm-auto .offset-sm-1 .col-sm-auto .offset-sm-1
![9a259eeab0a68e1629d959549a5c76ef.png](https://i-blog.csdnimg.cn/blog_migrate/a8eaf3766f5d63a163dd38689a376ad5.jpeg)
- 模态对话框
Modal title 内容 Do Something{' '} Cancel
![1feafc3fb0e751d2ea9c6f4cfe3dda59.png](https://i-blog.csdnimg.cn/blog_migrate/5d38b10b7a64f859c5352c03e186a86b.jpeg)
- 进度条
![4e8e22935e4e8fb812787a525202c669.png](https://i-blog.csdnimg.cn/blog_migrate/d1e8370fcdd0c1bd1f18ee924d34ebdb.jpeg)
- Tab选项卡
Tab 1 Contents
Special Title TreatmentWith supporting text below as a natural lead-in to additional content.Go somewhere Special Title TreatmentWith supporting text below as a natural lead-in to additional content.Go somewhere
![09a9022269a25153e349acdeb8e42fe1.png](https://i-blog.csdnimg.cn/blog_migrate/ba4308ec8383883b2685c5439c7a4112.jpeg)
- Toasts
Reactstrap This is a toast on a secondary background — check it out!
![f1b177b87d547c3c4a8b53051bc08a08.png](https://i-blog.csdnimg.cn/blog_migrate/4241b270437394633cd48b0018ad472f.jpeg)
总结
reactstrap的出现让喜欢bootstrap的小伙伴不用自己去实现一套组件了,可以直接使用reactstrap,节省了事件,提高了生产效率,enjoy it!