上一篇我们谈了谈如何配置react的webpack环境

react入门之搭配环境（一）

可能很多人已经打开过官方文档学习了react的基础知识

不管有没有，在介绍react之前，我想先介绍一下react-bootstrap

先懂得使用别人造的轮子，就能更快成为老司机。

好的，源代码奉上：

git clone https://github.com/lingjiawen/react_bootstrap_demo.git
cd react_bootstrap_demo
npm install
npm run dev

打开浏览器输入：localhost:8080

 react-bootstrap官方网址

现在就让我们来看看它能干什么吧！

一、Button

使用Button声明一个按钮，bsSize有如下四个属性，可以分别有大、中、小、超小四种大小的按钮，再用ButtonToolbar包裹起来

        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="large">Large button</Button>
          <Button bsSize="large">Large button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary">Default button</Button>
          <Button>Default button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="small">Small button</Button>
          <Button bsSize="small">Small button</Button>
        </ButtonToolbar>
        <ButtonToolbar>
          <Button bsStyle="primary" bsSize="xsmall">Extra small button</Button>
          <Button bsSize="xsmall">Extra small button</Button>
        </ButtonToolbar>

使用效果如下：

使用well将按钮包裹起来，可以实现如下效果：（well在后面介绍）

<div className="well" style={wellStyles}>
   <Button bsStyle="primary" bsSize="large" block>Block level button</Button>
   <Button bsSize="large" block>Block level button</Button>
</div>

使用 bsStyle属性可以调整按钮的状态颜色：

<Button>Default</Button>
<Button s>Primary</Button>
<Button bsStyle="success">Success</Button>

下图bsStyle属性分别为：info、warning、danger、link

使用按钮实现点击loading，等待结果的功能：

点击之后会变为loading...，可以自己点击一下

class LoadingButton extends React.Component{
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = { isLoading: false }
  }

  handleClick() {
    this.setState({isLoading: true});

    // This probably where you would have an `ajax` call
    setTimeout(() => {
      // Completed of async action, set loading state back
      this.setState({isLoading: false});
    }, 2000);
  }

  render() {
    let isLoading = this.state.isLoading;
    return (
      <Button
        bsStyle="primary"
        disabled={isLoading}
        onClick={!isLoading ? this.handleClick : null}>
        {isLoading ? 'Loading...' : 'Loading state'}
      </Button>
    );
  }
}

 实现按钮的下拉和上拉：

在title中使用Dropdown属性，用DropdownButton包裹下拉,使用Dropup为上拉

//下拉
<ButtonGroup>
  <Button>1</Button>
  <Button>2</Button>
  <DropdownButton title="Dropdown" id="bg-nested-dropdown">
     <MenuItem eventKey="1">Dropdown link</MenuItem>
     <MenuItem eventKey="2">Dropdown link</MenuItem>
  </DropdownButton>
</ButtonGroup>

//上拉
<ButtonToolbar>
  <SplitButton title="Dropup" dropup id="split-button-dropup">
    <MenuItem eventKey="1">Action</MenuItem>
    <MenuItem eventKey="2">Another action</MenuItem>
    <MenuItem eventKey="3">Something else here</MenuItem>
    <MenuItem divider />
    <MenuItem eventKey="4">Separated link</MenuItem>
  </SplitButton>
</ButtonToolbar>

二、List

简单列表：

        <ListGroup>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" active>Link 1</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >Link 2</ListGroupItem>
          <ListGroupItem href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" disabled>Link 3</ListGroupItem>
        </ListGroup>

使用ListGroup包裹， ListGroupItem就是它的子元素

• active：已选中
• disable：可以取消它的点击事件

表格： 

    　　　　　　<Table striped bordered condensed hover>
          <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <td>3</td>
            <td colSpan="2">Larry the Bird</td>
            <td>@twitter</td>
          </tr>
          </tbody>
        </Table>  

可以点击隐藏的面板： 

class CollapsiblePanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: true
    };
  }

  render() {
    return (
      <div>
        <Button onClick={ ()=> this.setState({ open: !this.state.open })}>
          点我隐藏/显示
        </Button>
        <Panel collapsible expanded={this.state.open}>
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
          Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
        </Panel>
      </div>
    );
  }
} 

三、Overlays

点击弹出的窗口：

class StaticMarkup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {dpName:false};
    this.onDisplayOverlays = this.onDisplayOverlays.bind(this);
    this.onCloseOverlays = this.onCloseOverlays.bind(this);
  }


  onDisplayOverlays() {
    this.setState({
      dpName:true
    });
  }

  onCloseOverlays() {
    this.setState({
      dpName:false
    });
  }

  render() {
    if(this.state.dpName)
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
            弹出框
          </Button>
          <div className="static-modal" id="static_modal">
            <Modal.Dialog>
              <Modal.Header>
                <Modal.Title>Modal title</Modal.Title>
              </Modal.Header>

              <Modal.Body>
                One fine body...
              </Modal.Body>

              <Modal.Footer>
                <Button onClick={this.onCloseOverlays}>Close</Button>
                <Button bsStyle="primary">Save changes</Button>
              </Modal.Footer>

            </Modal.Dialog>
          </div>
        </div>
      );
    else
      return (
        <div>
          <Button
            bsStyle="primary"
            onClick={this.onDisplayOverlays}>
            弹出框
          </Button>
        </div>
      );
  }
}

以及点击显示、隐藏的overload

class CustomOverlays extends React.Component{
  constructor(props) {
    super(props);
    this.state = {show: true};
    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.setState({ show: !this.state.show });
  }

  render() {
    const sharedProps = {
      show: this.state.show,
      container: this,
      target: () => ReactDOM.findDOMNode(this.refs.target)
    };

    return (
      <div style={{ height: 100, paddingLeft: 150, position: 'relative' }}>
        <Button ref="target" onClick={this.toggle}>
          Click me!
        </Button>

        <Overlay {...sharedProps} placement="left">
          <Tooltip id="overload-left">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="top">
          <Tooltip id="overload-top">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="right">
          <Tooltip id="overload-right">Tooltip overload!</Tooltip>
        </Overlay>
        <Overlay {...sharedProps} placement="bottom">
          <Tooltip id="overload-bottom">Tooltip overload!</Tooltip>
        </Overlay>
      </div>
    );
  }
}

四、轮播

class CarouselInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Carousel>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>First slide label</h3>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Second slide label</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          </Carousel.Caption>
        </Carousel.Item>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="http://123.207.238.196/bridge.jpg"/>
          <Carousel.Caption>
            <h3>Third slide label</h3>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
          </Carousel.Caption>
        </Carousel.Item>
      </Carousel>
    );
  }
}

五、一些有用的图标

class MiscellaneousInstance extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <div>
          <ButtonToolbar>
            <ButtonGroup>
              <Button><Glyphicon glyph="align-left" /></Button>
              <Button><Glyphicon glyph="align-center" /></Button>
              <Button><Glyphicon glyph="align-right" /></Button>
              <Button><Glyphicon glyph="align-justify" /></Button>
            </ButtonGroup>
          </ButtonToolbar>
          <ButtonToolbar>
            <ButtonGroup>
              <Button bsSize="large"><Glyphicon glyph="star" /> Star</Button>
              <Button><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="small"><Glyphicon glyph="star" /> Star</Button>
              <Button bsSize="xsmall"><Glyphicon glyph="star" /> Star</Button>
            </ButtonGroup>
          </ButtonToolbar>
        </div>
        <div>
          <h1>Label <Label>New</Label></h1>
          <h2>Label <Label>New</Label></h2>
          <h3>Label <Label>New</Label></h3>
          <h4>Label <Label>New</Label></h4>
          <h5>Label <Label>New</Label></h5>
          <p>Label <Label>New</Label></p>
        </div>
      </div>
    );
  }
}

六、表单

表单基础的类函数为：

function FieldGroup({ id, label, help, props }) {
  return (
    <FormGroup controlId={id}>
      <ControlLabel>{label}</ControlLabel>
      <FormControl {...props} />
      {help && <HelpBlock>{help}</HelpBlock>}
    </FormGroup>
  );
}

然后使用FieldGroup包裹：

　　　　　　　　　　<FieldGroup
          id="formControlsText"
          type="text"
          label="Text"
          placeholder="Enter text"
        />

便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。

我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事

更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究

有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# react  # bootstrap使用  # bootstrap  # reactjs  # React应用中使用Bootstrap的方法  # 表单  # 弹出  # 源代码  # 我也  # 我想  # 文档  # 就能  # 很多人  # 但我  # 抛砖引玉  # 便可  # 我给  # 你对  # 来看看  # 希望大家  # 更快  # 分别为  # 用过  # 可以实现  # 在后面 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： PHP怎么接收前端传的文件路径_处理文件路径参数接收方法【汇总】  Java类加载基本过程详细介绍  网站视频制作书签怎么做,ie浏览器怎么将网站固定在书签工具栏？  5种Android数据存储方式汇总  LinuxCD持续部署教程_自动发布与回滚机制  EditPlus中的正则表达式实战(5)  谷歌浏览器下载文件时中断怎么办 Google Chrome下载管理修复  如何快速搭建高效可靠的建站解决方案？  Laravel如何实现API速率限制？（Rate Limiting教程）  成都品牌网站制作公司,成都营业执照年报网上怎么办理？  Swift开发中switch语句值绑定模式  Laravel Session怎么存储_Laravel Session驱动配置详解  如何生成腾讯云建站专用兑换码？  如何在七牛云存储上搭建网站并设置自定义域名？  打开php文件提示内存不足_怎么调整php内存限制【解决方案】  哪家制作企业网站好,开办像阿里巴巴那样的网络公司和网站要怎么做？  Bootstrap CSS布局之列表  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  如何确保FTP站点访问权限与数据传输安全？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  iOS中将个别页面强制横屏其他页面竖屏  如何用搬瓦工VPS快速搭建个人网站？  Laravel怎么进行数据库事务处理_Laravel DB Facade事务操作确保数据一致性  教你用AI润色文章，让你的文字表达更专业  EditPlus 正则表达式 实战(3)  如何在建站之星网店版论坛获取技术支持？  网站页面设计需要考虑到这些问题  成都网站制作公司哪家好,四川省职工服务网是做什么用？  如何快速搭建支持数据库操作的智能建站平台？  HTML5空格和margin有啥区别_空格与外边距的使用场景【说明】  如何在阿里云虚拟主机上快速搭建个人网站？  js实现获取鼠标当前的位置  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Bootstrap整体框架之CSS12栅格系统  如何在万网开始建站？分步指南解析  Windows10如何更改计算机工作组_Win10系统属性修改Workgroup  简单实现jsp分页  中国移动官方网站首页入口 中国移动官网网页登录  如何正确选择百度移动适配建站域名？  独立制作一个网站多少钱,建立网站需要花多少钱？  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  微信小程序 scroll-view组件实现列表页实例代码  黑客如何通过漏洞一步步攻陷网站服务器？  Python进程池调度策略_任务分发说明【指导】  在线教育网站制作平台,山西立德教育官网？  JavaScript如何操作视频_媒体API怎么控制播放  轻松掌握MySQL函数中的last_insert_id()  Laravel怎么实现前端Toast弹窗提示_Laravel Session闪存数据Flash传递给前端【方法】  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】