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 type="text" label="Text" placeholder="Enter text" />
便可以轻松实现表单！如果你对react有了解，便知道原生的表单是不能直接用的。这个组件简化了许多，但我没用实际用过，所以不知道效果如何。
我写的这些只是抛砖引玉，只是希望大家稍微了解到react-bootstrap大概能做的事
更详细的方法和属性请进入官方网址浏览文档，打开源代码自行研究
有些官方demo没有给完全，可以运行前面的我给的demo，再查看源代码理解（不过我也没有写全，而且结构比较乱）