react-bootstrapを使ってみる(Grid/Row/Col)

# グリッドシステムを使ってみよう
[前回](http://qiita.com/akiramei/items/d2b48963534dca07cce4)に続いてreact-bootstrapということで、bootstrapの特色であるグリッドシステムをReactで使ってみる。

本家だと以下のようにclassにrow, colを指定するけど

```html
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
```

react-bootstrapではそれぞれ独自のコンポーネントとなっている。

```js
<Grid>
  <Row>
    <Col> </Col>
    { /* 省略 */ }
  </Row>
</Grid>
```

更にGridというコンポーネントで全体を囲う必要がある。

Colの指定をまとめてみるとこんな感じ。

|bootstrap |react-bootstrap \<Col>|例     |
|:---------|:---------------|:------|
|.col-xs-*  |xs=*            |\<Col xs={1} /> |
|.col-sm-*  |sm=*            |\<Col sm={1} /> |
|.col-md-*  |md=*            |\<Col md={1} /> |
|.col-lg-*  |lg=*            |\<Col lg={1} /> |
|.col-xs-offset-*|xsOffset=* |\<Col xsOffset={1} /> |
|.col-sm-offset-*|smOffset=* |\<Col smOffset={1} /> |
|.col-md-offset-*|mdOffset=* |\<Col mdOffset={1} /> |
|.col-lg-offset-*|lgOffset=* |\<Col lgOffset={1} /> |
|.col-xs-push-*|xsPush=* |\<Col xsPush={1} /> |
|.col-sm-push-*|smPush=* |\<Col smPush={1} /> |
|.col-md-push-*|mdPush=* |\<Col mdPush={1} /> |
|.col-lg-push-*|lgPush=* |\<Col lgPush={1} /> |
|.col-xs-pull-*|xsPull=* |\<Col xsPull={1} /> |
|.col-sm-pull-*|smPull=* |\<Col smPull={1} /> |
|.col-md-pull-*|mdPull=* |\<Col mdPull={1} /> |
|.col-lg-pull-*|lgPull=* |\<Col lgPull={1} /> |

# サンプルコード
これを元に[本家のGridサンプル](http://getbootstrap.com/examples/grid/)をreact-bootstrapで書き直してみた。無駄に長いです。

```js
// GridSample.jsx
import Arda from 'arda';
import {Grid, Row, Col} from 'react-bootstrap';
// react-bootstrapのグリッドシステムのサンプル 
export default class GridSample extends Arda.Component {
    render() {
        return ( 
            <Grid>
                <div className="page-header">
                    <h1>Bootstrap grid examples</h1>
                    <p className="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
                </div>

                <h3>Three equal columns</h3>
                <p>Get three equal-width columns <strong>starting at desktops and scaling to large desktops</strong>. On mobile devices, tablets and below, the columns will automatically stack.</p>

                <Row>
                    <Col md={4}>.col-md-4</Col>
                    <Col md={4}>.col-md-4</Col>
                    <Col md={4}>.col-md-4</Col>
                </Row>

                <h3>Three unequal columns</h3>
                <p>Get three columns <strong>starting at desktops and scaling to large desktops</strong> of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.</p>

                <Row>
                    <Col md={3}>.col-md-3</Col>
                    <Col md={6}>.col-md-6</Col>
                    <Col md={3}>.col-md-3</Col>
                </Row>

                <h3>Two columns</h3>
                <p>Get two columns <strong>starting at desktops and scaling to large desktops</strong>.</p>
                    <Row>
                        <Col md={8}>.col-md-8</Col>
                        <Col md={4}>.col-md-4</Col>
                    </Row>

                <h3>Full width, single column</h3>
                <p className="text-warning">No grid classes are necessary for full-width elements.</p>

                <hr />

                <h3>Two columns with two nested columns</h3>
                <p>Per the documentation, nesting is easy?just put a row of columns within an existing column. This gives you two columns <strong>starting at desktops and scaling to large desktops</strong>, with another two (equal widths) within the larger column.</p>
                <p>At mobile device sizes, tablets and down, these columns and their nested columns will stack.</p>
                <Row>
                    <Col md={8}>
                        .col-md-8
                        <Row>
                            <Col md={6}>col-md-6</Col>
                            <Col md={6}>col-md-6</Col>
                        </Row>
                    </Col>
                    <Col md={4}>.col-md-4</Col>
                </Row>

                <hr />

                <h3>Mixed: mobile and desktop</h3>
                <p>The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.</p>
                <p>Each tier of classes scales up, meaning if you plan on setting the same widths for xs and sm, you only need to specify xs.</p>
                <Row>
                    <Col xs={12} md={8}>.col-xs-12 .col-md-8</Col>
                    <Col xs={6} md={4}>.col-xs-6 .col-md-4</Col>
                </Row>

                <Row>
                    <Col xs={6} md={4}>.col-xs-6 .col-md-4</Col>
                    <Col xs={6} md={4}>.col-xs-6 .col-md-4</Col>
                    <Col xs={6} md={4}>.col-xs-6 .col-md-4</Col>
                </Row>
                <Row>
                    <Col xs={6}>.col-xs-6</Col>
                    <Col xs={6}>.col-xs-6</Col>
                </Row>

                <hr />

                <h3>Mixed: mobile, tablet, and desktop</h3>
                <p></p>
                <Row>
                    <Col xs={12} sm={6} lg={8}>.col-xs-12 .col-sm-6 .col-lg-8</Col>
                    <Col xs={6} lg={4}>.col-xs-6 .col-lg-4</Col>
                </Row>
                <Row>
                    <Col xs={6} sm={4}>.col-xs-6 .col-sm-4</Col>
                    <Col xs={6} sm={4}>.col-xs-6 .col-sm-4</Col>
                    <Col xs={6} sm={4}>.col-xs-6 .col-sm-4</Col>
                </Row>

                <hr />

                <h3>Column clearing</h3>
                <p><a href="http://getbootstrap.com/css/#grid-responsive-resets">Clear floats</a> at specific breakpoints to prevent awkward wrapping with uneven content.</p>
                <Row>
                    <Col xs={6} sm={3}>
                        .col-xs-6 .col-sm-3
                        <br />
                        Resize your viewport or check it out on your phone for an example.
                    </Col>
                    <Col xs={6} sm={3}>.col-xs-6 .col-sm-3</Col>
                    { /* Add the extra clearfix for only the required viewport */ }
                    <div className="clearfix visible-xs"></div>

                    <Col xs={6} sm={3}>.col-xs-6 .col-sm-3</Col>
                    <Col xs={6} sm={3}>.col-xs-6 .col-sm-3</Col>
                </Row>
                
                <hr />

                <h3>Offset, push, and pull resets</h3>
                <p>Reset offsets, pushes, and pulls at specific breakpoints.</p>
                {/* v0.16.1では正しく動作しない。#406で修正されている。 */}
                <Row>
                    <Col sm={5} md={6}>.col-sm-5 .col-md-6</Col>
                    <Col sm={5} smOffset={2} md={6} mdOffset={0}>.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</Col>
                </Row>
                <Row>
                    <Col sm={6} md={5} lg={6}>.col-sm-6 .col-md-5 .col-lg-6</Col>
                    <Col sm={6} md={5} mdOffset={2} lg={6} lgOffset={0}>.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lgOffset-0</Col>
                </Row>

          </Grid>
        );
    }
}
```

コードにもコメントしたけど、react-bootstrap v0.16.1ではバグがあって、offset/push/pollに0を指定すると無効になるので注意。私は30分くらい悩んだ…