bootstrap 下拉列表_Bootstrap在React中的实现，易于使用的React组件——Reactstrap

介绍

众所周知，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-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可实现不同效果

---

---

---

• 面包屑

HomeLibraryDataBootstrap

---

面包屑无需使用列表标记

---

---

• 按钮和按钮下拉框

---

• 轮播图

 {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 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

---

• Toasts

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

---

总结

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