介紹

眾所周知，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 ( <Button color="danger">Danger!</Button> );};

3、結合creat-react-app使用

npx create-react-app my-appcd my-appnpm startnpm 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元件

部分元件介紹訊息彈框 <Alert color="primary"> This is a primary alert — check it out!</Alert>

替換color屬性：primary、secondary、success、danger、warning、info、light、dark可實現不同效果

按鈕和按鈕下拉框

輪播圖

<Carousel activeIndex={activeIndex} next={next} previous={previous} > <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={goToIndex} /> {slides} <CarouselControl direction="prev" directionText="Previous" onClickHandler={previous} /> <CarouselControl direction="next" directionText="Next" onClickHandler={next} /> </Carousel>

表單元件佈局<Container> <Row> <Col>.col</Col> </Row> <Row> <Col>.col</Col> <Col>.col</Col> <Col>.col</Col> <Col>.col</Col> </Row> <Row> <Col xs="6" sm="4">.col-6 .col-sm-4</Col> <Col xs="6" sm="4">.col-6 .col-sm-4</Col> <Col sm="4">.col-sm-4</Col> </Row> <Row> <Col sm={{ size: 6, order: 2, offset: 1 }}>.col-sm-6 .order-sm-2 .offset-sm-1</Col> </Row> <Row> <Col sm="12" md={{ size: 6, offset: 3 }}>.col-sm-12 .col-md-6 .offset-md-3</Col> </Row> <Row> <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col> <Col sm={{ size: 'auto', offset: 1 }}>.col-sm-auto .offset-sm-1</Col> </Row> </Container>模態對話方塊<Modal isOpen={modal} toggle={toggle} className={className} backdrop={backdrop}> <ModalHeader toggle={toggle}>Modal title</ModalHeader> <ModalBody> 內容 </ModalBody> <ModalFooter> <Button color="primary" onClick={toggle}>Do Something</Button>{' '} <Button color="secondary" onClick={toggle}>Cancel</Button> </ModalFooter> </Modal>進度條Tab選項卡<TabContent activeTab={activeTab}> <TabPane tabId="1"> <Row> <Col sm="12"> <h4>Tab 1 Contents</h4> </Col> </Row> </TabPane> <TabPane tabId="2"> <Row> <Col sm="6"> <Card body> <CardTitle>Special Title Treatment</CardTitle> <CardText>With supporting text below as a natural lead-in to additional content.</CardText> <Button>Go somewhere</Button> </Card> </Col> <Col sm="6"> <Card body> <CardTitle>Special Title Treatment</CardTitle> <CardText>With supporting text below as a natural lead-in to additional content.</CardText> <Button>Go somewhere</Button> </Card> </Col> </Row> </TabPane> </TabContent>Toasts <Toast> <ToastHeader> Reactstrap </ToastHeader> <ToastBody> This is a toast on a secondary background — check it out! </ToastBody></Toast>總結

reactstrap的出現讓喜歡bootstrap的小夥伴不用自己去實現一套元件了，可以直接使用reactstrap，節省了事件，提高了生產效率，enjoy it！