react-bootstrapで書くとコンポーネント的にBootstrapが使えるよ！

React-Bootstrap はReact.jsのコンポーネントとしてBootstrapを扱うことができるライブラリです。
これを使うことでBootstrapのCSSではなく、React.jsのコンポーネントを組み合わせる感覚でコードを構築できます。また、全体のコードが明瞭になるのでメンテナーンスコストも抑えられそうです！

🗽 Merit

全体のコードが明瞭になる
BootstrapのCSSを覚える必要がなく、設定で変更が簡単にできる
ModalなどJSを組み合わせる場合もコンポーネントとして扱える

🗻 Installation

ライブラリのインストール手順です。

$ npm install react-bootstrap --save

😼 CSSの読み込み

CSS自体は同梱していないようですので、別途読み込む。
好きなテーマを使えるのでこれは助かるかも。 npm で別管理しても良さそう。

🤔 Usage

いつものナビゲーションバーはこんなコードになります。

12} md={8}><code><{'Col xs={12} md={8}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
</Row>

<{'Col xs={6} md={4}'} />code>Col>
6} md={4}><code><{'Col xs={6} md={4}'} />code>Col>
4}><code><{'Col xsHidden md={4}'} />code>Col>
</Row>

<{'Col xs={6} xsOffset={6}'} />code>Col>
</Row>

<{'Col md={6} mdPush={6}'} />code>Col>
6} mdPull={6}><code><{'Col md={6} mdPull={6}'} />code>Col>
</Row>
Grid>
);
}

// components/NavigationSample.jsx
import React from 'react';

export NavigationSample class extends React.Component {
  render () {
    return (
      
        "show-grid">

Layout

たとえば上のようなLayoutにしたい場合はこちら。

// components/LayoutSample.jsx
import React from 'react';

export LayoutSample class extends React.Component {
  render () {
    return (
      
        "show-grid">

🚜 グリッド、 Row ColとBootstrap CSSの対応関係

🍮 Form要素について

react-bootstrapのformを使うとBootsrapらしいHTML構造に変換してくれます。


  
    id="formControlsText"
    type="text"
    label="Text"
    placeholder="Enter text"
  />
  
    id="formControlsEmail"
    type="email"
    label="Email address"
    placeholder="Enter email"
  />
  
    id="formControlsPassword"
    label="Password"
    type="password"
  />
  
    id="formControlsFile"
    type="file"
    label="File"
    help="Example block-level help text here."
  />

  
    Checkbox
  </Checkbox>
  
    Radio
  Radio>

  
    
      1
    </Checkbox>
    {' '}
    
      2
    Checkbox>
    {' '}
    
      3
    </Checkbox>
  FormGroup>
  
    "radioGroup" inline>
      1
    </Radio>
    {' '}
    
      2
    Radio>
    {' '}
    "radioGroup" inline>
      3
    </Radio>
  FormGroup>

  "formControlsSelect">
    Select</ControlLabel>
    
      
      >...</option>
    FormControl>
  </FormGroup>
  
    Multiple selectControlLabel>
    "select" multiple>
      >select (multiple)</option>
      
    </FormControl>
  FormGroup>

  "formControlsTextarea">
    Textarea</ControlLabel>
    >
  </FormGroup>

  
    Static textControlLabel>
    
      email@example.com
    </FormControl.Static>
  FormGroup>

  >
    Submit
  </Button>
form>