介绍

众所周知，Bootstrap是非常受欢迎的前端库，因为其美观的UI以及使用方式的简单而深受广大的前端爱好者的喜爱，但近年来各类前端框架大行其道，要想将Bootstrap尤其是其组件部分很优雅的使用到这些框架不一定很方便，在之前的文章中已经介绍过Vue的实现版本，本文就介绍以下React的版本——Reactstrap

Github

https://reactstrap.github.io/

https://github.com/reactstrap/reactstrap

快速开始

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-app
cd my-app
npm start

npm install --save bootstrap
npm 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可实现不同效果

• 面包屑

 

 
 Home
 Library
 Data
 Bootstrap
 
 

面包屑无需使用列表标记

• 按钮和按钮下拉框

• 轮播图

 
 {slides}
 
 
 

• 表单组件

• 布局

 
 .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
 
 

• 模态对话框

 Modal title
 
 内容
 
 
 Do Something{' '}
 Cancel
 
 

• 进度条

• Tab选项卡

 
 
 
 
Tab 1 Contents
 
 
 
 
 
 
 
 Special Title Treatment
 With supporting text below as a natural lead-in to additional content.
 Go somewhere
 
 
 
 
 Special Title Treatment
 With supporting text below as a natural lead-in to additional content.
 Go somewhere
 
 
 
 
 

• Toasts

 
 
 Reactstrap
 
 
 This is a toast on a secondary background — check it out!
 

总结

reactstrap的出现让喜欢bootstrap的小伙伴不用自己去实现一套组件了，可以直接使用reactstrap，节省了事件，提高了生产效率，enjoy it！