极乐门资源网

详解react使用react-bootstrap当轮子造车
网络编程 2025/1/12 佚名
2 0
极乐门资源网 Design By www.ioogu.com

上一篇我们谈了谈如何配置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>

使用效果如下：

详解react使用react-bootstrap当轮子造车

使用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属性可以调整按钮的状态颜色：

详解react使用react-bootstrap当轮子造车

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

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

详解react使用react-bootstrap当轮子造车

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

详解react使用react-bootstrap当轮子造车

点击之后会变为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 "htmlcode">



//下拉
<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>







详解react使用react-bootstrap当轮子造车


二、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：可以取消它的点击事件
    • 



详解react使用react-bootstrap当轮子造车


表格： 





    　　　　　　<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>  






详解react使用react-bootstrap当轮子造车


可以点击隐藏的面板： 





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>
    );
  }
} 







详解react使用react-bootstrap当轮子造车


三、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>
      );
  }
}







详解react使用react-bootstrap当轮子造车


以及点击显示、隐藏的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>
    );
  }
}







详解react使用react-bootstrap当轮子造车 


四、轮播





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

  render() {
    return (
      <Carousel>
        <Carousel.Item>
          <img width={900} height={500} alt="900x500" src="/UploadFiles/2021-04-02/bridge.jpg">


详解react使用react-bootstrap当轮子造车


五、一些有用的图标





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>
    );
  }
}







详解react使用react-bootstrap当轮子造车


六、表单


表单基础的类函数为：





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使用react-bootstrap当轮子造车


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


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


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


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
react,bootstrap使用,react,bootstrap,reactjs,bootstrap
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“详解react使用react-bootstrap当轮子造车”

暂无详解react使用react-bootstrap当轮子造车的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com