网站首页 > 知识剖析 正文
介绍
众所周知,Bootstrap是非常受欢迎的前端库,因为其美观的UI以及使用方式的简单而深受广大的前端爱好者的喜爱,但近年来各类前端框架大行其道,要想将Bootstrap尤其是其组件部分很优雅的使用到这些框架不一定很方便,在之前的文章中已经介绍过Vue的实现版本,本文就介绍以下React的版本——Reactstrap
Github
https://reactstrap.github.io/
https://github.com/reactstrap/reactstrap
快速开始
1、安装使用
通过NPM安装reactstrap和对等依赖项
Bash
npm install --save reactstrap react react-dom
2、然后导入你需要的组件
Bash
import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
return (
<Button color="danger">Danger!</Button>
);
};
3、结合creat-react-app使用
Bash
npx create-react-app my-app
cd my-app
npm start
Bash
npm install --save bootstrap
npm install --save reactstrap react react-dom
然后在index.js中导入:
Bash
import 'bootstrap/dist/css/bootstrap.min.css';
在src/App.js文件或您的自定义组件文件中导入所需的reactstrap组件:
Bash
import { Button } from 'reactstrap';
现在可以在render方法中定义的组件层次结构中使用导入的reactstrap组件
部分组件介绍
- 消息弹框
Bash
<Alert color="primary">
This is a primary alert — check it out!
</Alert>
替换color属性:primary、secondary、success、danger、warning、info、light、dark可实现不同效果
- 面包屑
Bash
<div>
<Breadcrumb tag="nav" listTag="div">
<BreadcrumbItem tag="a" href="#">Home</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">Library</BreadcrumbItem>
<BreadcrumbItem tag="a" href="#">Data</BreadcrumbItem>
<BreadcrumbItem active tag="span">Bootstrap</BreadcrumbItem>
</Breadcrumb>
</div>
面包屑无需使用列表标记
- 按钮和按钮下拉框
- 轮播图
Bash
<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>
- 表单组件
- 布局
Bash
<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>
- 模态对话框
Bash
<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选项卡
Bash
<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
Bash
<Toast>
<ToastHeader>
Reactstrap
</ToastHeader>
<ToastBody>
This is a toast on a secondary background — check it out!
</ToastBody>
</Toast>
总结
reactstrap的出现让喜欢bootstrap的小伙伴不用自己去实现一套组件了,可以直接使用reactstrap,节省了事件,提高了生产效率,enjoy it!
猜你喜欢
- 2024-11-15 HTML中为元素绑定Class属性与Style样式
- 2024-11-15 不容忽视的 8 个 DOM API(dom based)
- 2024-11-15 WebAPI详细解说【思维导图】(webapi视频教程)
- 2024-11-15 Windows端口转发小工具(window 端口转发)
- 2024-11-15 “万能”箭头函数?你可能要失望了
- 2024-11-15 React-鼠标事件处理(react doubleclick)
- 2024-11-15 深入了解 LocalStorage:JavaScript 中的数据存储利器
- 2024-11-15 JavaScript-浏览器兼容的脚本化class操作
- 2024-11-15 Vue3.0新特性探索(vue3.0新特性的typescript)
- 2024-11-15 超简单的网站暗黑模式,它真的超简单
- 最近发表
- 标签列表
-
- xml (46)
- css animation (57)
- array_slice (60)
- htmlspecialchars (54)
- position: absolute (54)
- datediff函数 (47)
- array_pop (49)
- jsmap (52)
- toggleclass (43)
- console.time (63)
- .sql (41)
- ahref (40)
- js json.parse (59)
- html复选框 (60)
- css 透明 (44)
- css 颜色 (47)
- php replace (41)
- css nth-child (48)
- min-height (40)
- xml schema (44)
- css 最后一个元素 (46)
- location.origin (44)
- table border (49)
- html tr (40)
- video controls (49)