如何在ReactJS中使用Bootstrap 3的组件

本文概述

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

毫无疑问, Bootstrap是(并且将持续很多时间)最令人敬畏的HTML, CSS和JavaScript框架之一, 你可以将其用作创建网站或Web应用程序的基础。除其他功能外, 它还包括用于排版, 图标, 表单, 按钮, 表格, 布局网格和导航的基本CSS和HTML, 以及定制的jquery-plugins和对响应布局的支持。
【如何在ReactJS中使用Bootstrap 3的组件】随着ReactJS的引入, 许多开发人员在日常开发过程中将其用作默认工具。这就意味着jQuery至少在开发非常动态的Web应用程序方面是有利的。但是, 用Bootstrap做什么jQuery？好吧, jQuery是使Bootstrap组件正常工作所必需的, 这是另一个问题, 原始的Bootstrap库使用浏览器的本机DOM, React实现了虚拟DOM。因此, 为了解决所有这些不便之处, 并保持使用Bootstrap作为UI基础的简单传统, 编写了React的bootstrap库。
这个库可以帮助你以React的方式工作, 同时使用强大且易于使用的Bootstrap功能。
1.安装React Bootstrap React Bootstrap模块将所有Bootstrap 3组件实现为React组件, 因此它们可以轻松地嵌入到你的应用程序中。它不依赖jQuery, 因此你的代码将尽可能保持简洁。
要安装它, 请使用终端切换到项目目录, 并执行以下命令进行安装：

npm install react-bootstrap

安装后, 你将能够需要原始Bootstrap库必须提供的任何组件。有关此库的更多信息, 请访问Github上的官方存储库。
2.定义你的Bootstrap主题如你所知, 每个人都可以创建自己的boostrap主题, 或者仅使用默认主题。按照这个简单的指导方针, React-Bootstrap不依赖于任何版本的Bootstrap CSS, 也不实现自己的版本。显然, 你需要添加一些CSS以使Component看起来不错, 但这完全取决于你。最简单的方法是使用免费CDN(默认的且众所周知的基本Bootstrap主题)中的任何版本的Bootstrap CSS：

< !-- The default CSS of Bootstrap --> < link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

或者, 你可以使用Bootswatch很棒的免费Bootstrap主题集合中的主题, 例如” United” , 它看起来比Bootstrap的默认主题好很多：

文章图片
该过程非常简单, 只需在文档的head标记中包含一个CSS文件, 就可以开始了：

< !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 CSS Theme --> < link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/united/bootstrap.min.css" rel="stylesheet" integrity="sha384-pVJelSCJ58Og1XDc2E95RVYHZDPb9AVyXsI8NoVpB2xmtxoZKJePbMfE4mlXw7BJ" crossorigin="anonymous"> < /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>

这样, 现在你在React中的组件将看起来应有的样子。或者, 你可以配置webpack以包括和转换bootstrap的SASS源文件, 以便你可以根据需要配置和修改Bootstrap的样式。
3.在React中使用Bootstrap组件作为React中的一种典型方法, 每个Bootstrap组件都可以从库中导入：
布局
Bootstrap最令人敬畏的功能之一是其革命性的布局网格系统。网格系统用于通过一系列容纳你的内容的行和列来创建页面布局。通常, 引导程序的每一行都包裹在普通容器或流体容器中。在React版本中, 这些组件被命名为Grid, 可以通过以下方式使用：

import Grid from 'react-bootstrap/lib/Grid'; const Container = ({/* Normal BS would be: < div class="container"> < /div> */}< Grid> < /Grid> ); const ContainerFluid = ({/* Normal BS would be: < div class="container-fluid"> < /div> */}< Grid fluid={true}> < /Grid> );

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

import Row from 'react-bootstrap/lib/Row'; const MyRow = ({/* Normal BS would be: < div class="row"> < /div> */}< Row> < /Row> );

最后是广为人知的引导程序响应列

import Grid from 'react-bootstrap/lib/Grid'; import Row from 'react-bootstrap/lib/Row'; import Col from 'react-bootstrap/lib/Col'; const MyAwesomeLayout = (< Grid> < Row> < Col xs={12} md={8}> {/* Some content */}< /Col> < Col xs={6} md={4}> {/* Some content */}< /Col> < /Row> < Row> < Col xs={6} md={4}> {/* Some content */}< /Col> < Col xs={6} md={4}> {/* Some content */}< /Col> < Col xsHidden md={4}> {/* Some content */}< /Col> < /Row> < Row> < Col xs={6} xsOffset={6}> {/* Some content */}< /Col> < /Row> < Row> < Col md={6} mdPush={6}> {/* Some content */}< /Col> < Col md={6} mdPull={6}> {/* Some content */}< /Col> < /Row> < /Grid> );

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

import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar'; import Button from 'react-bootstrap/lib/Button'; const buttonsInstance = (< ButtonToolbar> {/* Standard button */}< Button> Default< /Button> {/* Provides extra visual weight and identifies the primary action in a set of buttons */}< Button bsStyle="primary"> Primary< /Button> {/* Indicates a successful or positive action */}< Button bsStyle="success"> Success< /Button> {/* Contextual button for informational alert messages */}< Button bsStyle="info"> Info< /Button> {/* Indicates caution should be taken with this action */}< Button bsStyle="warning"> Warning< /Button> {/* Indicates a dangerous or potentially negative action */}< Button bsStyle="danger"> Danger< /Button> {/* Deemphasize a button by making it look like a link while maintaining button behavior */}< Button bsStyle="link"> Link< /Button> < /ButtonToolbar> );

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

import React from 'react'; import Modal from 'react-bootstrap/lib/Modal'; import Button from 'react-bootstrap/lib/Button'; export default class App extends React.Component {constructor(props, context) {super(props, context); // Handle statethis.state = {show: false}; }render() {// Close the dialoglet close = () => {this.setState({ show: false}); }; return (< div className="modal-container" style={{ height: 200 }}> < ButtonbsStyle="primary"bsSize="large"onClick={() => this.setState({ show: true })}> Launch contained modal< /Button> < Modalshow={this.state.show}onHide={close}container={this}aria-labelledby="contained-modal-title"> < Modal.Header closeButton> < Modal.Title id="contained-modal-title"> Contained Modal< /Modal.Title> < /Modal.Header> < Modal.Body> Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.< /Modal.Body> < Modal.Footer> < Button onClick={close}> Close< /Button> < /Modal.Footer> < /Modal> < /div> ); }}

由于我们不想列出引导程序的所有组件, 而是最常用的组件, 因此你可以在官方的React Bootstrap网站上的文档中找到所有组件。
编码愉快！