如何使用React-Starter-kit安装Reactstrap [英] How to install Reactstrap with React-Starter-kit

问题描述

react-starter-kit https://github.com/kriasoft/react-starter-kit

react-starter-kit https://github.com/kriasoft/react-starter-kit

反应带 http://reactstrap.github.io/

将reactstrap安装到react-starter-kit中有哪些步骤?为了使用网格布局?

What are the steps to install the reactstrap into the react-starter-kit? in order to use the grid layout?

http://reactstrap.github.io/components/layout/

推荐答案

步骤:

1. 下载存储库

1. Download the repo

类型

纱线添加reactstrap

yarn add reactstrap

添加纱线react-transition-group

yarn add react-transition-group

纱线添加引导程序

1. 在组件文件中，键入以下代码

导入'bootstrap/dist/css/bootstrap.css';

import 'bootstrap/dist/css/bootstrap.css';

从"reactstrap"导入{Container，Row，Col};

import { Container, Row, Col } from 'reactstrap';

4.然后您可以在渲染功能中测试reactstrap的Layout功能，如下所示:

4.Then you can test reactstrap's Layout feature in your render function like below:

<Container>
        <Row>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
          <Col>.col</Col>
        </Row>
        <Row>
          <Col xs="3">.col-3</Col>
          <Col xs="auto">.col-auto - variable width content</Col>
          <Col xs="3">.col-3</Col>
        </Row>
      </Container>

这篇关于如何使用React-Starter-kit安装Reactstrap的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！