如何在ReactJS中使用Bootstrap 4的组件 _ReactJS

本文概述

1.安装Reactstrap
2.定义你的Bootstrap 4主题
3.在React中使用Bootstrap组件

Twitter Bootstrap CSS框架已经成为并且将在很长一段时间内成为最出色, 最著名的HTML, CSS和JavaScript框架之一, 你可以将其用作创建网站或Web应用程序的样板。框架的主要功能是用于排版, 图标, 表单, 按钮, 表格, 布局网格和导航的基本CSS和HTML, 以及定制的jquery-plugins和对响应布局的支持。如果你正在某个React项目中工作, 并且想要在使用Bootstrap设计用户界面时让生活更轻松, 那么我们对你来说是个好消息。今天, 可以将最新版本的Bootstrap用作React组件。我们正在谈论Reactstrap。这个库可以帮助你以React的方式工作, 同时使用强大, 最新且易于使用的Bootstrap 4功能。
注意如果你在ReactJS中寻找Bootstrap 3组件, 请查看其他文章。
1.安装ReactstrapReactstrap模块将所有Bootstrap 4组件实现为React组件, 因此它们可以轻松地嵌入到你的应用程序中。它不依赖jQuery, 因此你的代码将尽可能保持简洁。但是, 它依赖于Tether(Bootstrap的依赖项)来产生有效且美观的工具提示。要安装它, 请使用终端切换到项目目录, 并作为第一步安装Bootstrap 4, 执行以下命令：

npm install bootstrap@4.0.0-alpha.6 --save

然后安装Reactstrap模块, 该模块允许你使用引导程序4作为React组件：

npm install --save reactstrap react-addons-transition-group react-addons-css-transition-group react react-dom

安装后, 你将能够需要原始Bootstrap 4库必须提供的任何组件。有关此库的更多信息, 请访问Github上的官方存储库。别忘了也访问他们的官方网站。
2.定义你的Bootstrap 4主题你将需要在bootstrap 4类中包含一个样式表, 因此根据你的工作方式有2个选项。如果你使用的是webpack, 并且可以配置为包括从JavaScript导入CSS文件的CSS文件, 则只需将默认的bootstrap 4样式表导入主JS文件中, 例如：

// Import default Bootstrap 4 CSSimport 'bootstrap/dist/css/bootstrap.css';

否则, 如果你要包含Bootstrap 4的第三方主题(如Bootswatch 4), 则可以简单地将其包含在带有链接标记的HTML文档中：

< !doctype html> < html lang="en"> < head> < meta charset="utf-8"> < title> My Awesome React App< /title> < meta name="viewport" content="width=device-width, initial-scale=1"> < !-- Include some Bootstrap 4 CSS Theme e.g from the Bootswatch CDN--> < link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/thomaspark/bootswatch/gh-pages/4-alpha/cerulean/bootstrap.min.css"> < /head> < body> < div class="container"> < div id="app"> Loading...< /div> < /div> < script type="text/javascript" src="http://www.srcmini.com/bundle.js"> < /script> < /body> < /html>

3.在React中使用Bootstrap组件作为React中的一种典型方法, 每个Bootstrap 4组件都可以从库中导入：
布局
Bootstrap的广为人知的功能是其革命性的布局网格系统。使用Bootstrap的网格系统将帮助你通过容纳内容的一系列行和列来创建页面布局。通常, 引导程序的每一行都包裹在普通容器或流体容器中。在React版本中, 该组件也被命名为Container, 可以通过以下方式使用：

import {Container} from 'reactstrap'; const ContainerComponent = (< Container> {/* Content here */}< /Container> ); const ContainerFluid = (< Container fluid={true}> {/* Content here */}< /Container> );

接下来是定义水平div的Row组件, 你可以在其中放置一些列：

import { Row } from 'reactstrap'; const MyRow = (< Row> {/* My Content */}< /Row> );

最后, 你可以与” 容器” , “ 行” 组合使用的列可以创建出色的布局：

import React from 'react'; import { Container, Row, Col } from 'reactstrap'; export default class Example extends React.Component {render() {return (< 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> < Row> < Col xs="6"> .col-6< /Col> < Col xs="6"> .col-6< /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 .col-sm-4< /Col> < /Row> < Row> < Col sm={{ size: 6, push: 2, pull: 2, offset: 1 }}> .col .col-sm-6 .col-sm-push-2 .col-sm-pull-2 .col-sm-offset-2< /Col> < /Row> < Row> < Col sm="12" md={{ size: 8, offset: 2 }}> .col .col-sm-12 .col-md-6 .col-md-offset-3< /Col> < /Row> < Row> < Col sm={{ size: 'auto', offset: 1 }}> .col .col-sm .col-sm-offset-1< /Col> < Col sm={{ size: 'auto', offset: 1 }}> .col .col-sm .col-sm-offset-1< /Col> < /Row> < /Container> ); }}

纽扣
Bootstrap提供了不同样式的按钮, 这些按钮可以与React一样轻松地使用。使用普通引导程序, 你只需要提供一个类来定义按钮的样式, 现在在ReactJS中, 你可以使用color属性设置其类型：

import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import { Button } from 'reactstrap'; export default class App extends React.Component {constructor(props, context) {super(props, context); }render() {return (< div> < Button color="primary"> primary< /Button> {' '}< Button color="secondary"> secondary< /Button> {' '}< Button color="success"> success< /Button> {' '}< Button color="info"> info< /Button> {' '}< Button color="warning"> warning< /Button> {' '}< Button color="danger"> danger< /Button> {' '}< Button color="link"> link< /Button> < /div> ); }}

模态
以下组件创建一个单击时显示模式的按钮。单击关闭按钮后, 对话框将自动关闭：

import React from 'react'; import 'bootstrap/dist/css/bootstrap.css'; import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap'; export default class App extends React.Component {constructor(props, context) {super(props, context); this.state = {modal: false}; this.toggle = this.toggle.bind(this); }toggle() {this.setState({modal: !this.state.modal}); }render() {return (< div> < Button color="danger" onClick={this.toggle}> Open Modal < /Button> < Modal isOpen={this.state.modal} toggle={this.toggle}> < ModalHeader toggle={this.toggle}> Modal title< /ModalHeader> < ModalBody> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.< /ModalBody> < ModalFooter> < Button color="primary" onClick={this.toggle}> Do Something< /Button> {' '}< Button color="secondary" onClick={this.toggle}> Cancel< /Button> < /ModalFooter> < /Modal> < /div> ); }}

由于我们不想列出Bootstrap 4的所有组件, 而是最常用的组件, 因此你可以在官方Reactstrap网站上的文档中找到所有组件。
【如何在ReactJS中使用Bootstrap 4的组件】编码愉快！