bootstrap当轮子造车

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"> <MenuItem eventKey="1">Dropdown link</MenuItem> <MenuItem eventKey="2">Dropdown link</MenuItem> </DropdownButton> </ButtonGroup> //上拉 <ButtonToolbar> <SplitButton title="Dropup" 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="#" active>Link 1</ListGroupItem> <ListGroupItem href="#" >Link 2</ListGroupItem> <ListGroupItem href="#" 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>

可以点击隐藏的面板：