グリッドシステムを使ってみよう
前回に続いてreact-bootstrapということで、bootstrapの特色であるグリッドシステムをReactで使ってみる。
本家だと以下のようにclassにrow, colを指定するけど
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
react-bootstrapではそれぞれ独自のコンポーネントとなっている。
<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サンプルをreact-bootstrapで書き直してみた。無駄に長いです。
// 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分くらい悩んだ…