Bootstrap使い方メモ１（基本＋CSS）

公式サイトを一通り動かしてみたときのメモ。

まずは [CSS](http://getbootstrap.com/css/)。

#Hello World
##Bootstrap を入手する
[ここ](http://getbootstrap.com/getting-started/#download) から zip ファイルをダウンロードする。

##HTML を書く
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1>Hello Bootstrap!!</h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d7aa9451-25da-250b-76fe-ccc8ec8a7914.jpeg)

- HTML5 の DOCTYPE を記述する。
- css ファイルを読み込むだけで使い始められる。
- モバイル用に viewport を設定する meta タグを記述する。
- `user-scalable=no` を設定すればズームをできなくさせれるが、 Bootstrap 的にはお勧めしないらしい。

#センタリングする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
            div {
                border: 1px solid red;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Containers</h1>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/528d256a-b0b0-a941-0ada-d2934640cf1c.jpeg)

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/28822d3b-87e5-b702-129e-3a2c14bae9d5.jpeg)

- `.container` クラスを設定した `div` タグで全体を括れば、センタリングされた領域を作ることができる。

#IE8 で動かす
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        
        <!--[if lt IE 9]>
            <script src="html5shiv.js"></script>
            <script src="respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <div class="nav-header">
                    <a class="navbar-brand" href="#">Boostrap</a>
                </div>
                
                <ul class="nav navbar-nav">
                  <li><a href="#">Hoge</a></li>
                  <li><a href="#">Fuga</a></li>
                  <li><a href="#">Piyo</a></li>
                </ul>
            </div>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/8ee66d96-74cf-5c53-5eb0-39d51a166e70.jpeg)

- Bootstrap 3 は、 IE8 をサポートしている。
- ただし、 IE8 は HTML5 で追加されたタグや、 CSS3 のメディアクエリには対応していない。
- これら未サポートの機能を動作させるために、以下の JavaScript を読み込む必要がある。
    - [html5shiv - HTML5 IE enabling script - Google Project Hosting](https://code.google.com/p/html5shiv/)：HTML5 のタグを有効にする。
    - [scottjehl/Respond | GitHub](https://github.com/scottjehl/Respond)：

##動作確認するときはサーバーに上げてから確認する
自分の環境には IE8 がなかったので、 IE11 の互換モード機能で IE8 をエミュレートして試している。

このとき、ローカルにある HTML ファイルを開くと、ページ表示時に Respond 内でエラーが発生した。

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/da4c7cd6-1881-dfd6-f30d-ace108d59e1e.jpeg)

どうやら JavaScript からローカルのファイルを参照しようとして、ブラウザのセキュリティ機能に引っかかりエラーになっている模様。

なので、 IE8 での動作を確認する場合は、サーバー（Apache, Tomcat など）にアップしてから確認する必要がある。

※ただ、このセキュリティの機能が IE11 のもので、本物の IE8 に無いのであればサーバーにアップする必要はないかもしれない。

#CSS
##Grid system
###基本

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/737cacdb-27e5-5dd6-a950-baf2254dbb63.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/S3D4P)

- Grid system とは、画面の横を 12 等分して、グリッド状にレイアウトを定義する方法・仕組みのこと。
- Bootstrap では、 `.container` クラスを指定したタグの中にグリッドを定義する。
- `.row` クラスで「行」を定義する。
- `.col-**-##` クラスで「列」を定義する。
    - `**` の部分は画面サイズを表す以下の文字のいずれかを指定する。
        - `lg`　：　幅 1200px 以上の大きな画面。デスクトップＰＣなど。
        - `md`　：　幅 992px 以上のそれなりの大きさの画面。デスクトップＰＣなど。
        - `sm`　：　幅 768px 以上の小さ目の画面。タブレットなど。
        - `xs`　：　幅 768px 未満の小さい画面。携帯など。
    - `##` の部分は、占有する「列」の数（1 ～ 12）を指定する。
    - 例： `col-lg-3`

###画面サイズとクラスプレフィックス（.col-**）の関係

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/cd574f2d-b0bd-0d7a-c693-b8a38a1b5ba7.jpeg)

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2e434abc-5334-7abe-ebb0-4a3ad4965241.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/2ZC24/show)

- 上記サンプルを表示して、ブラウザの幅を変化させれば、なんとなく挙動が把握できるかと。
- 現在の画面の幅が、クラスプレフィックスの対応している幅よりも小さくなると、横幅が画面いっぱいに伸びる。

[コードあり](http://jsfiddle.net/opengl_8080/2ZC24)

###画面サイズに合わせてカラムの幅（列数）を変更する

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/1691be9c-0203-e83d-aaba-851428d2f927.jpeg)

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/833e1303-8d1c-894c-843c-ad7d6aa523e7.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/e8CsG/show)

- サイズごとの `col-**` クラスを複数指定すれば、画面サイズに合わせてカラム幅が自動で切り替わる。

[コードあり](http://jsfiddle.net/opengl_8080/e8CsG/)

###あるセルの内容が他のセルより長い場合、他のセルが回り込まないようにする

__セルが回り込んでしまっている例__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/5719560f-220b-c5ab-ee6d-1bdd9fd0ee3a.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/ZtX9e/)

__セルが回り込まないようにした例__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/c38678cb-a990-e33f-0bc2-d3206c36f399.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/gvTYE/)

- あるセルの内容が他のセルより長く縦に伸びた場合、何もしないと続くセルが縦に長いセルの横に回り込む。
- `.clearfix` クラスを設定した `div` タグを挟むと、そこでセルの回りこみを防ぐことができる。


###左に間をあける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
            .row div {
                border: 1px solid red;
            }
            
            div {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
            </div>
            <div class="row">
                <div class="col-xs-offset-3">offset 3</div>
            </div>
            <div class="row">
                <div class="col-xs-offset-4 col-xs-3">offset 3, col 3</div>
            </div>
            <div class="row">
                <div class="col-xs-2">col 2</div>
                <div class="col-xs-offset-4 col-xs-5">offset 4, col 5</div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2e9ec448-5cd0-68c5-d573-013572f580aa.jpeg)


- `col-**-offset-##` というクラスを指定すれば、　`##` で指定した数だけ右に列をずらした場所にセルを配置できる。

###Grid を入れ子にする

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/af7ec275-75d4-e131-a4de-2f0f7289a0e3.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/88pjt/)

- Grid は入れ子にできる。
- 入れ子になった Grid の中は、さらに 12 に等分される。
- ただし、幅が足りない場合は適宜改行される。

###列を移動させる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
            div {text-align: center;}
            .container .row:first-child div {border: 1px solid red; color: red;}
            .col-xs-push-1, .col-xs-push-2 {border: 1px solid green; color: green;}
            .col-xs-pull-1, .col-xs-pull-2 {border: 1px solid blue; color: blue;}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
                <div class="col-xs-1">1</div>
            </div>
            <div class="row">
                <div class="col-xs-1 col-xs-push-1">push 1</div>
            </div>
            <div class="row">
                <div class="col-xs-1 col-xs-push-1">push 1</div>
                <div class="col-xs-1 col-xs-push-2">push 2</div>
            </div>
            <div class="row">
                <div class="col-xs-1 col-xs-pull-1">pull 1</div>
            </div>
            <div class="row">
                <div class="col-xs-3 col-xs-push-2">push 2</div>
                <div class="col-xs-3 col-xs-pull-2">pull 2</div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/8526d154-a304-c6ab-b47f-7c89a04ddb97.jpeg)

- `.col-**-push-##` クラスを設定すると、 `##` で指定した分だけ列を右にずらすことができる。
- `.col-**-pull-##` クラスを設定すると、 `##` で指定した分だけ列を左にずらすことができる。
- ずらした結果セルが重なることもある。

##Typography
###h* タグと同じスタイルを適用する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div>
            <h1>h1 tag</h1> normal text
        </div>
        <div>
            <span class="h1">h1 class</span> normal text
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/c45c83cd-f7a0-a3ae-5a04-1c870805f2d9.jpeg)

- インラインで `h*` タグのスタイルを使用したい場合は、 `.h*` クラスを設定する。

###リードコピー用のスタイルを設定する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <p class="lead">Lead body copy</p>
        <p>Body copy</p>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/86edc016-17b3-a634-a9b8-f86d85432091.jpeg)

- `.lead` クラスを設定すると、リードコピー用に通常の文章よりも強調されたスタイルになる。

__※リードコピーとは__

> 本文を要約した見出しのこと。構成によっては「見出しコピー」と呼ばれる場合もあります。

- [コピーの種類 | コピー大学](http://copywriter-college.com/type.html)

###文字を小さく表示させる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1>H1 <span class="small">small text</span></h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/cba8dd9c-a22a-9a9a-ada8-fe20d70b835c.jpeg)

- `.small` クラスを設定したタグのテキストは他よりもフォントが小さく表示される。
- `small` タグを使っても同じ。

###テキストのアライメントを設定する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>div {margin-bottom: 1em;}</style>
    </head>
    <body>
        <div class="text-left">left</div>
        <div class="text-center">center</div>
        <div class="text-right">right</div>
        <div>
            [no justify] The most popular front-end framework for developing responsive, mobile first projects on the web.
        </div>
        <div class="text-justify">
            [justify] The most popular front-end framework for developing responsive, mobile first projects on the web.
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ab334c3c-8eef-3b83-9584-fb77c0aafe6b.jpeg)

- `.text-**` クラスでテキストのアライメントを設定できる。

###引用文章を右寄せで表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <blockquote>
                通常の場合
            </blockquote>
            <blockquote class="blockquote-reverse">
                右寄せの場合
            </blockquote>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/63c321b1-be54-7143-0745-e5a4580911ef.jpeg)

- `blockquote` タグに `.blockquote-reverse` クラスを設定すると、右寄せにできる。

###リストのマーカーを非表示にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-unstyled">
            <li>hoge</li>
            <li>fuga</li>
            <li>piyo</li>
        </ul>
        <ul>
            <li class="list-unstyled">hoge</li>
            <li>fuga</li>
            <li class="list-unstyled">piyo</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/c07f44ca-0edd-d45d-2035-7161f29b2bf9.jpeg)

- `.list-unstyled` クラスを設定すると、リストのマーカーを消せる。

###リストをインライン表示にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-inline">
            <li>hoge</li>
            <li>fuga</li>
            <li>piyo</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/feb35bf8-fc35-b105-669b-c85f1ed31264.jpeg)

- `.list-inline` クラスを設定すると、リストをインライン表示にできる。

###dl タグの用語と説明のレイアウトを横並びにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <dl class="dl-horizontal">
            <dt>dt</dt>
            <dd>dd</dd>
            
            <dt>abcdefghijklmnopqrstuvwxyz</dt>
            <dd>dd</dd>
        </dl>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ad2f7e81-c789-33d5-8475-b1a21af6de43.jpeg)

- `dl` タグに `.dl-horizontal` クラスを設定すると、用語と説明を横並びにできる。
- ただし、ウィンドウの幅が狭いと、通常通りの縦並びになる。
- `dt` タグの内容が長い場合は、末尾が `...` という形になって省略される。

##Code
###pre タグに横スクロールを追加する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <pre class="pre-scrollable">
a
b
c
d
e
f
g
h
i
j
k
l
m
n
o
p
q
r
        </pre>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/00e7ff3e-9fc3-f370-9532-4e37feac7251.jpeg)

- `pre` タグに `.pre-scrollable` クラスを設定すると、高さが 350px 以上になるとスクロールが表示されるようになる。


##Table
###基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Takeshi</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Takuya</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Taichi</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/66e779d6-9756-48a7-b2b8-674fd8c92574.jpeg)

- `table` タグに `.table` クラスを設定すると、横線だけの簡易なスタイルが適用される。
- `thead` タグと `tbody` タグは省略できない。

###縞模様にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Takeshi</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Takuya</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Taichi</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e96667ce-62f3-bb7d-6f96-1ee601cd0922.jpeg)

- `.table-striped` クラスを `table` タグに追加すると、行が縞模様になる。
- `:nth-child` セレクタを使用しているので、 IE8 では動作しないらしい。

###縦線も表示させる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Takeshi</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Takuya</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Taichi</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4aa9f1b0-e825-5476-0c66-bc85880b5f88.jpeg)

- `.table-bordered` クラスを `table` タグに追加すると、縦線も表示されるようになる。

###マウスカーソルが乗った行をハイライトさせる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Takeshi</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Takuya</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Taichi</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d61912db-b5ec-ed88-cfc3-5e4f38b63316.jpeg)

- `.table-hover` クラスを `table` タグに追加すると、マウスカーソルが乗った行をハイライトさせることができる。

###テーブルのサイズを若干縮める
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table table-condensed">
            <thead>
                <tr>
                    <th>name</th>
                    <th>age</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Takeshi</td>
                    <td>19</td>
                </tr>
                <tr>
                    <td>Takuya</td>
                    <td>17</td>
                </tr>
                <tr>
                    <td>Taichi</td>
                    <td>11</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2d81615c-9382-d04c-78ad-c2127eec337d.jpeg)

- `.table-condensed` クラスを `table` タグに追加すると、各セルの padding が若干小さくなり、テーブル全体が若干小さくなる。

__.table-condensed なし__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/60b87074-a9b8-15d5-ea4a-449c0a6ec157.jpeg)

おわかりいただけただろうか。

###行に意図に合わせた色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <table class="table">
            <thead>
                <tr>
                    <th>header</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>default</td>
                </tr>
                <tr class="active">
                    <td>active</td>
                </tr>
                <tr class="success">
                    <td>success</td>
                </tr>
                <tr class="info">
                    <td>info</td>
                </tr>
                <tr class="warning">
                    <td>warning</td>
                </tr>
                <tr class="danger">
                    <td>danger</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ed606a16-0271-448e-bc8c-21ffefbb5df5.jpeg)

- `tr` タグに `.active`, `.success`, `.info`, `.warning`, `.danger` のいずれかのクラスを設定すると、その意図に合わせた背景色が付く。

###画面の横幅が小さくなったら横スクロールを表示させるようにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="table-responsive">
            <table class="table table-condensed">
                <thead>
                    <tr>
                        <th>name</th>
                        <th>age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Takeshi</td>
                        <td>19</td>
                    </tr>
                    <tr>
                        <td>Takuya</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>Taichi</td>
                        <td>11</td>
                    </tr>
                    <tr>
                        <td>jugemu jugemu gokounosurikire kaijarisuigyono suigyomatsu unraimatsu huraimatsu kuunerutokoronisumutokoro yaburakoujinoburakouji paipo paipo paiponoshuringan shuringannogurindai gurindainoponpokopino ponpokonano choukyumeinochosuke</td>
                        <td>51</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/89b1b7b6-c9d2-ef34-0831-d2ed346da88c.jpeg)

- `.table-responsive` クラスを設定した `div` タグで `table` タグを括ると、次の条件をすべて満たしたときにテーブルに横スクロールが表示される。
    - 画面の幅が 768px より小さい。
    - テーブルの内容を表示するのに 768px では足りない場合。


##Forms
###基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group">
            <label for="name">Username</label>
            <input id="name" type="text" class="form-control" />
        </div>
        <div class="form-group">
            <label for="name">Password</label>
            <input id="age" type="password" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ef0adf0c-c78d-ecd8-b7cb-5191f2219678.jpeg)

- `label` タグと入力フォーム（`input` タグなど）を一塊として `.form-group` クラスを設定した `div` タグで括ることで、フォーム同士の間隔を適度に調整してくれる。
- 入力フォームに `.form-contol` クラスを設定すると、デフォルトで幅が 100% に設定される。

###フォームをインラインで並べる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-inline form-group">
            <div class="form-group">
                <label for="name">Username</label>
                <input id="name" type="text" class="form-control" />
            </div>
            <div class="form-group">
                <label for="name">Password</label>
                <input id="age" type="password" class="form-control" />
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/0d395cfc-ee87-c7e1-6df1-e6552da10933.jpeg)

- `.form-inline` クラスを設定したブロック要素で各入力フォームを括ると、入力フォームを横並びにすることができる。
- インラインで横並びにした場合、各フォームの幅は開発者が指定しなければならない。

###ラベルを非表示にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group">
            <label class="sr-only" for="name">Username</label>
            <input id="name" type="text" class="form-control" placeholder="Username" />
        </div>
        <div class="form-group">
            <label class="sr-only" for="name">Password</label>
            <input id="age" type="password" class="form-control" placeholder="Password" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/bf4a69b3-fe50-e6df-a809-1438ae0d4b4e.jpeg)

- 単純に `label` タグをなくしてしまうと、スクリーンリーダーが誤動作する可能性がある。
- この場合は、 `.sr-only` クラスを `label` タグに設定することで非表示にする（sr はおそらく screen reader の略）。
- これ以外にも、スクリーンリーダーにのみ認識させたい要素には `.sr-only` クラスを設定する。

###水平レイアウトを使う
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-horizontal">
            <div class="form-group">
                <label for="name" class="col-xs-2 control-label">Username</label>
                <div class="col-xs-10">
                    <input id="name" type="text" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <label for="name" class="col-xs-2 control-label">Password</label>
                <div class="col-xs-10">
                    <input id="age" type="password" class="form-control" />
                </div>
            </div>
            <div class="form-group">
                <div class="col-xs-offset-2 col-xs-10">
                    <input type="submit" class="btn btn-default" value="Submit" />
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/88b24494-671b-eadb-ff1b-80b15d36e483.jpeg)

- `.form-horizontal` クラスを指定したブロック要素で括ることで、水平レイアウトを使用できる。
- 基本的な考え方は Grid system と同じで、 `.col-**-##` クラスを使用してレイアウトを調整する。
- `label` タグには、 `.control-label` クラスも指定する必要がある。
- `.form-group` クラスが `.row` クラスを兼ねているので、 `.row` クラスを指定した要素は不要。

####入力項目の位置に静的なテキストを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-horizontal">
            <div class="form-group">
                <label class="col-xs-2 control-label">Username</label>
                <div class="col-xs-10">
                    <p class="form-control-static">static text</p>
                </div>
            </div>
            <div class="form-group">
                <label class="col-xs-2 control-label">Password</label>
                <div class="col-xs-10">
                    not static text
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d147d014-0c86-aa31-ab5f-36591e62f741.jpeg)

- 入力項目の位置に静的なテキストを配置したい場合は、テキスト全体を `.form-control-static` クラスを指定したブロック要素で括る。
- これをしないと、テキストが上にややずれて表示されてしまう。


###チェックボックスとラジオボタンを表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="checkbox">
            <label>
                <input type="checkbox" /> checkbox
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" checked /> male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" /> female
            </label>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ef9025ad-5992-f3b7-18f3-01f030f9ef52.jpeg)

- `checkbox` と `radio` は、 `.form-group` クラスではなくそれぞれ専用のクラスが用意されている。

###チェックボックスとラジオボタンをインラインで横並びに表示させる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group">
            <label class="checkbox-inline">
                <input type="checkbox" /> checkbox
            </label>
            <label class="checkbox-inline">
                <input type="checkbox" /> checkbox
            </label>
        </div>
        
        <div class="form-group">
            <label class="radio-inline">
                <input type="radio" checked /> male
            </label>
            <label class="radio-inline">
                <input type="radio" /> female
            </label>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/998b5135-0357-62ce-28d7-0608b0d01fe6.jpeg)

- インラインで横並びに表示させたい場合は、各 `label` タグに `.checkbox-inline` または `.radio-inline` クラスを設定する。
- この場合、全体を括るブロック要素の class 属性は前述の `.checkbox` や `.radio` クラスではなく、 `.form-group` クラスを指定したブロック要素で括る。


###入力の状態に合わせた色を設定する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group has-success">
            <label class="control-label">Success</label>
            <input type="text" class="form-control" />
        </div>
        <div class="form-group has-warning">
            <label class="control-label">Warning</label>
            <input type="text" class="form-control" />
        </div>
        <div class="form-group has-error">
            <label class="control-label">Error</label>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d6ab6de5-ecc4-fd77-7cbb-261e1c945b99.jpeg)

- `.has-success`, `.has-warning`, `.has-error` クラスを設定した要素で入力項目を括ると、その下に存在する `.control-label` や `.form-control` クラスを設定した要素の色が切り替わる。

###入力項目のサイズを変更する
####高さを変更する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group">
            <input type="text" class="form-control input-lg" value="input-lg" />
        </div>
        <div class="form-group">
            <input type="text" class="form-control" value="default" />
        </div>
        <div class="form-group">
            <input type="text" class="form-control input-sm" value="input-sm" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/30114920-830e-a4d3-4798-48f6d8c77145.jpeg)

- `.input-lg` で大きく、 `.input-sm` で小さくできる。

####幅を変更する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-1">
                     <input type="text" class="form-control" value="1" />    
                </div>
                <div class="col-xs-2">
                     <input type="text" class="form-control" value="2" />    
                </div>
                <div class="col-xs-3">
                     <input type="text" class="form-control" value="3" />    
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/19d799e7-7c0d-42f7-c0ab-b2bd48783d4f.jpeg)

- Grid system を利用する。

###入力補助のためのヘルプテキスト用スタイル
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <div class="form-group">
            <label>Username</label>
            <input type="text" class="form-control" />
            <span class="help-block">ユーザー名を入力してください。</span>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f7f56717-99d4-f3b8-990e-f5555bb2fd65.jpeg)

- `.help-block` クラスを指定した要素でテキストを括ると、ヘルプテキスト用のスタイルを設定できる。

##Buttons
###基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <p>
            <button type="button" class="btn btn-default">Default</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-link">Link</button>
        </p>
        
        <p>
            <a class="btn btn-default">Default</a>
            <a class="btn btn-primary">Primary</a>
            <a class="btn btn-success">Success</a>
            <a class="btn btn-info">Info</a>
            <a class="btn btn-warning">Warning</a>
            <a class="btn btn-danger">Danger</a>
            <a class="btn btn-link">Link</a>
        </p>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/40a0328f-59a0-ed0d-1f09-cc8217fea2a2.jpeg)

- `.btn` クラスを設定して、 `.btn-**` クラスで種類（`default`, `primary`, `success`, `info`, `warning`, `danger`, `link`）を指定する。
- `button` タグでなくてもボタン化できる。

ただし、 Bootstrap ではクロスブラウザにするのであれば `button` タグを使用することを強く推奨している。

理由として、 Firefox の [「input タグに line-height が適用できないバグ」](https://bugzilla.mozilla.org/show_bug.cgi?id=697451) が原因で、 `input` タグで作ったボタンが他の `button` タグで作ったボタンの高さと一致しないことを挙げている。

__Firefox 29.0.1 で確認した時の様子__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/9bae6dda-9321-b5fc-f0d0-85df63ba3d09.jpeg)

確かに高さが違っている。

ただ、このバグは 2014 年 5 月 10 日現在 `RESOLVED FIXED` になっていて、 [2014 年 6 月リリース予定の ver 30 で改善されるっぽい](https://developer.mozilla.org/ja/docs/Mozilla/Firefox/Releases/30)。


###ボタンのサイズを変更する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <button type="button" class="btn btn-default btn-lg">btn-lg</button>
        <button type="button" class="btn btn-primary">Default Size</button>
        <button type="button" class="btn btn-success btn-sm">btn-sm</button>
        <button type="button" class="btn btn-info btn-xs">btn-xs</button>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/598b2c00-e9da-8365-246a-f003ddbc296b.jpeg)

- `.btn-lg` で大きく、 `.btn-sm` で小さく、 `.btn-xs` でさらに小さくできる。


###横幅をいっぱいに利用したボタンを作る
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <button type="button" class="btn btn-info btn-block">btn-block</button>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/00483d13-1e2b-fdac-a158-ab2d4952aa38.jpeg)

- `.btn-block` クラスを設定するとボタンがブロックレベルになり、横幅を親タグの幅いっぱいまで広げる。

##Images
###画面サイズに合わせて画像のサイズが変わるようにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <img src="image.png" class="img-responsive" />
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/10166fe4-4cd0-5d19-c7c2-295e65ff6edd.jpeg)

↓画面を縮める

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/c30c7ff1-fb09-6162-00f4-2a037259f519.jpeg)

- `img` タグに `.img-responsive` クラスを設定すると、幅と高さが親要素に合うようになる。

###画像のシェイプを変更する
####円形のシェイプ
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <img src="image.png" class="img-circle" />
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/1656dd48-1b94-8b49-d433-8bce183e0411.jpeg)

- `.img-circle` クラスを設定すると、円形のシェイプにできる。

####サムネイル用シェイプ
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <img src="image.png" class="img-thumbnail" />
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f4702503-58b1-84b2-dae7-5d824acfd555.jpeg)

- `.img-thumbnail` クラスを設定するとサムネイル用の枠線が表示される。

####IE8 はサポート外

- IE8 は CSS でコーナーを丸くすることができないので注意。

##Helper classes
###テキストに意図に合わせた色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1 class="text-muted">muted</h1>
        <h1 class="text-primary">primary</h1>
        <h1 class="text-success">success</h1>
        <h1 class="text-info">info</h1>
        <h1 class="text-warning">warning</h1>
        <h1 class="text-danger">danger</h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ed1afda5-9e9a-24b1-10db-6770a878eb21.jpeg)

- `.text-**` クラスを設定すると、テキストに意図に合わせた色を付けることができる。
- `**` の部分に指定できるのは `muted`, `primary`, `success`, `info`, `warning`, `danger` 。
- このクラスは、他の強調用クラスと競合してうまく適用できないことがある。その場合は、 `span` タグで目的のテキストを括るようにすると解決する。

###背景に意図に合わせた色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1 class="bg-primary">primary</h1>
        <h1 class="bg-success">success</h1>
        <h1 class="bg-info">info</h1>
        <h1 class="bg-warning">warning</h1>
        <h1 class="bg-danger">danger</h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4301482f-a5c4-a67b-27ed-c64227551caf.jpeg)

- `.bg-**` クラスを設定すると、背景色に意図に合わせた色を指定することができる。
- `**` の部分に指定できるのは `primary`, `success`, `info`, `warning`, `danger` 。

###閉じるボタン
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <button type="button" class="close" aria-hidden="true">&times;</button>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/18673118-7c0b-12ef-6448-5ea7f0be008f.jpeg)

- `button` タグに `.close` クラスを設定し、ラベルに `&times;` を設定する。
- `&times;` は `×` のこと。
- `aria-hidden="true"` は、スクリーンリーダーに認識させないための設定。

###下矢印アイコン
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <span class="caret"></span>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/0aa4bcb8-72ed-e3a7-4a0b-553d02613ea0.jpeg)

- `.caret` クラスを指定すると下矢印アイコンを表示できる。

###要素を左右に寄せる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1 class="pull-left">left</h1>
        <h1 class="pull-right">right</h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/92076f15-6f16-f402-8f1f-857dd4f72d00.jpeg)

- `.pull-left` で左、 `.pull-right` で右に寄せられる。

###ブロック要素をセンタリングさせる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
            div {width: 300px; border: 1px solid red;}
        </style>
    </head>
    <body>
        <div class="center-block">center block</div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/7c28e88b-7cda-0edc-1830-3adb3bea6466.jpeg)

- `.center-block` クラスをブロック要素に設定すると、要素をセンタリングさせることができる。
- ただし、 `width` を指定する必要あり。

###float をクリアする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1 class="pull-left">left</h1>
        <p>clearfix なし</p>

        <h1 class="pull-right">right</h1>
        <div class="clearfix"></div>
        <p>clearfix あり</p>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f4ac459d-bdc1-1ab9-923d-afcb7911ebc6.jpeg)

- `.clearfix` クラスを設定した要素をはさむことで `float` の設定をクリアすることができる。

###表示・非表示
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
    </head>
    <body>
        <h1 class="show" style="display: none;">show</h1>
        <h1 class="hidden">hidden</h1>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/031ba024-eb87-a600-4457-1bc1e1ed592f.jpeg)

- `.show` と `.hidden` クラスで要素の表示・非表示を指定できる。
- `!important` が指定されているので、最優先で表示・非表示が設定される。

###テキストだけ非表示にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
            div {
                background-image: url(red.png);
                width: 100px;
                height: 100px;
                margin-top: 1em;
            }
        </style>
    </head>
    <body>
        <div class="text-hide">hoge</div>
        <div>hoge</div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f9983f01-d0a4-f786-3885-b98eaf201f42.jpeg)

- `.text-hide` クラスを設定すると、テキストだけを非表示にできる。
- 文字を非表示にして背景画像だけを表示したい場合などに使うらしい。

##Responsive utilities
###画面サイズに合わせて表示・非表示を切り替える

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/aa0fa315-3f98-69e2-7453-5c7a735c9fc3.jpeg)

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/fe906966-682f-95e8-e423-23d2952bd3b0.jpeg)

[jsFiddle サンプル](http://jsfiddle.net/opengl_8080/Q9Ckg/)

- `.visible-**` クラスを設定すると、画面の幅が `**` で指定したサイズになった時だけ表示される。
- `.hidden-**` クラスを設定すると、画面の幅が `**` で指定したサイズになった時だけ非表示になる。

###印刷のときだけ表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="bootstrap.min.css" />
        <style>
        </style>
    </head>
    <body>
        <div class="visible-print">印刷のときだけ表示</div>
        <div class="hidden-print">ブラウザで見たときだけ表示</div>
    </body>
</html>
```

__ブラウザで見たとき__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4e1b2b4b-3539-9346-9bf1-2ea9d46aa4b9.jpeg)

__印刷プレビュー__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/406a7f14-7516-8649-0d97-04b4eb71bc25.jpeg)

- `.visible-print` クラスを設定すると、印刷のときだけ表示されるようになる。
- `.hidden-print` クラスを設定すると、ブラウザで見たときだけ表示されるようになる。

#参考
##全般
- [Bootstrap](http://getbootstrap.com/)

##viewport について
- [これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ - てっく煮ブログ](http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/)

##Grid system について
- [Twitter Bootstrapのcontainer、row、col(span)の正しい使い方 -- ぺけみさお](http://www.xmisao.com/2013/10/20/bootstrap-container-row-col-tips.html)
- [Bootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jp](http://html5experts.jp/shumpei-shiraishi/1538/)
- [レイアウト作りを簡単にしてくれるCSSグリッドシステム](http://webdesignrecipes.com/css-grid-system-layout/)

##LESS について
- [LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利 | webOpixel](http://www.webopixel.net/html-css/549.html)

##aria-hidden について
- [aria-hiddenについて - メモログ](http://memolog.org/2012/05/aria-hidden.html)
- [隠し要素 | HTML - LumberMill's Notes](http://www.lumber-mill.co.jp/notes/tips/121227_html.html)

##IE8 で動作させる方法
- [IE8以下でもメディアクエリーに対応する Respond.js の紹介と動かない時の対処法 | notnil creation weblog](http://notnil-creative.com/blog/archives/1943)