Bootstrap使い方メモ２（Components）

Bootstrap 使い方続き。

[Components](http://getbootstrap.com/components/) の使い方。

# Glyphicons
## 基本
```text:フォルダ構成
│  sample..html
│
├─css
│      bootstrap.min.css
│
└─fonts
       glyphicons-halflings-regular.eot
       glyphicons-halflings-regular.svg
       glyphicons-halflings-regular.ttf
       glyphicons-halflings-regular.woff
```

```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="glyphicon glyphicon-search"></span>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/a5e536c0-5f9d-00a8-4e39-debfd2a541aa.jpeg)

- CSS ファイルから見て、 `../fonts` の下にフォントファイルが配置されるようにする。
- `.glyphicon` クラスと、表示させたいアイコンごとのクラス（`.glyphicon-search`）を指定すると、アイコンを表示できる。
- アイコン表示用のクラスは、他のコンポーネントと一緒に指定してはいけない。その場合は、アイコンだけ `span` タグで作成して、それをラップする形で他のコンポーネントを指定する。

## Glyphicon について
アイコンには [Glyphicon](http://glyphicons.com/) の Halflings セットというのが利用されている。

これは本来無料では使用できないが、 Bootstrap と合わせて利用する場合に限り無償で使うことができるよう Glyphicon の製作者が計らってくれているらしい。

[Glyphicon のリンク](http://glyphicons.com/) をサイト上に載せることは必須ではないが、できれば表示してほしいと Bootstrap および Glyphicon がお願いしている。


## ボタンにアイコンを表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <button class="btn btn-default">
            <span class="glyphicon glyphicon-search"></span>Search
        </button>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/1ae65620-b1b4-45dc-e09c-bd872bedefaa.jpeg)

# Dropdowns
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/afdc95cb-b5f2-a23c-8495-97393c08b69f.jpeg)

- `jQuery` と `bootstrap.min.js` を読み込む。
- `.dropdown` クラスを設定したタグで、ドロップダウンの表示を切り替えるリンク（またはボタン）、およびメニューを括る。
- 表示を切り替えるリンク（ボタン）には `data-toggle="dropdown"` を設定する。
- メニューは `.dropdown-menu` を設定した `ul` タグで作成する。
- 各メニュー項目は `a` タグで括る。

## 区切り線を入れる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li class="divider"></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f4f05bbb-a19e-de5d-0bed-70111fb5ed45.jpeg)

- `.divider` クラスを設定した `li` タグを挟むことで区切り線を設けることができる。

## ドロップダウンメニューを画面の右側に表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu dropdown-menu-right">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e4959793-77a6-74fc-08f0-3ebd1606b326.jpeg)

- メニューの `ul` タグに `.dropdown-menu-right` クラスを設定すると、メニューが右側に表示される。

## ヘッダーラベルを表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li class="dropdown-header">header menu</li>
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/3cb29fc1-8928-4d60-8f47-dfa389eea47d.jpeg)

- `.dropdown-header` クラスを設定した `li` で、メニューにヘッダーラベルを追加できる。

## メニュー項目を無効にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="dropdown">
            <a data-toggle="dropdown" href="#">Dropdown Link</a>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li class="disabled"><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/5000c676-6946-266f-32ac-bd3c5d47e679.jpeg)

- `li` タグに `.disabled` クラスを設定された項目は選択できなくなる。

# Button groups
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f8621eea-d951-440d-79c4-952b107432fb.jpeg)

- ボタンを `.btn-group` クラスを設定した `div` タグでくくると、ボタングループを作成できる。


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

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/b196c060-e2dd-b86f-122b-83c821f0ae7e.jpeg)

- `.btn-group` と一緒に `.btn-group-**` クラスを設定すると、ボタンのサイズを変更できる。
- `**` に入るはの、 `lg`, `md`, `sm`, `xs` の４つ。

## ボタングループの中にドロップダウンを混ぜる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            
            <div class="btn-group">
                <button class="btn btn-default" data-toggle="dropdown">
                    Dropdown<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">hoge</a></li>
                    <li><a href="#">fuga</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/bdeb16c2-df54-d18d-ae63-379e01bf1a9f.jpeg)

- `.btn-group` は入れ子が可能で、ドロップダウンなどをボタングループに混ぜることができる。

## 縦方向に並べる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group-vertical">
            <button class="btn btn-default">hoge</button>
            <button class="btn btn-default">fuga</button>
            <button class="btn btn-default">piyo</button>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/73e6a64b-2743-dd13-37c3-efe0dc44785a.jpeg)

- `.btn-group-vertical` クラスを設定すれば、縦方向にボタンを並べられる。

## ボタングループの幅を親要素の幅いっぱいまで広げる
### ボタンに a タグを使う場合
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group btn-group-justified">
            <a class="btn btn-default">hoge</a>
            <a class="btn btn-default">fuga</a>
            <a class="btn btn-default">piyo</a>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e28d57c1-813a-926a-4b54-a591380a66ba.jpeg)

- `.btn-group-justified` クラスを追加すれば、幅を親要素いっぱいまで広げることができる。

### ボタンに button タグを使う場合
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="btn-group btn-group-justified">
            <div class="btn-group">
                <button class="btn btn-default">hoge</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">fuga</button>
            </div>
            <div class="btn-group">
                <button class="btn btn-default">piyo</button>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/56e3da09-1b37-d518-46ef-aa99c9e2f617.jpeg)

- `button` タグを使う場合は、各ボタンを `.btn-group` クラスを設定した `div` タグで括らなければならない。

# Button dropdowns
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button data-toggle="dropdown">
                Dropdown<span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/cf661dae-8a95-c791-aafb-e340dedc5149.jpeg)

- `.btn-group` でもドロップダウンが作れる。

## ドロップダウンを表示させる ▼ ボタンを分割して表示する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="btn-group">
            <button class="btn btn-default">Button</button>
            <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/df0fe323-e17f-6b30-311b-eaf86987fbc2.jpeg)

- ▼ ボタン用にもう一つ `button` タグを用意し、そちらでドロップダウンの表示を制御する。
- ▼ ボタンの方には `.btn-toggle` クラスを設定する。

## ドロップアップ
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <style>body {padding-top: 10em;}</style>
    </head>
    <body>
        <div class="btn-group dropup">
            <button class="btn btn-default" data-toggle="dropdown">
                Dropup<span class="caret"></span>
            </button>
            
            <ul class="dropdown-menu">
                <li ><a href="#">Hoge</a></li>
                <li ><a href="#">Fuga</a></li>
                <li ><a href="#">Piyo</a></li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/217203cc-3056-6982-8445-d0992b2880d0.jpeg)

- `.dropup` クラスを追加するとメニューがボタンの上部に表示される。

# Input groups
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>div {margin-bottom: 1em;}</style>
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-addon">hoge</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <input type="text" class="form-control" />
            <span class="input-group-addon">fuga</span>
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">piyo</span>
            <input type="text" class="form-control" />
            <span class="input-group-addon">piyo</span>
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">
                <input type="radio" />
            </span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">
                <input type="checkbox" />
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f0c52ddd-be1d-96d6-80b6-a7704e5c62f0.jpeg)

- テキスト入力項目の前後に任意の文字やボタンを配置することができる。
- `.input-group` で入力項目を括り、追加する文字を `.input-group-addon` クラスを設定した `span` タグで前後に配置する。
- テキストだけでなく、チェックボックスやラジオボタンを配置することも可能。

### .form-group と一緒に使うときは、 .input-group をネストさせる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="input-group form-group">
            <label for="exampleInputFile">Hoge</label>
            <span class="input-group-addon">hoge</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="form-group">
            <label for="exampleInputFile">Fuga</label>
            <div class="input-group form-group">
                <span class="input-group-addon">fuga</span>
                <input type="text" class="form-control" />
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/9d11d2b6-ba2c-f37e-d26a-a5aeca5f12a7.jpeg)

- `.form-group` と `.input-group` を同じ `div` タグに設定すると、スタイルが崩れてしまう。
- 一緒に使いたい場合は、 `.form-group` の中に `.input-group` が来るようにする。

## サイズを変更する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        <style>div {margin-bottom: 1em;}</style>
    </head>
    <body>
        <div class="input-group input-group-lg">
            <span class="input-group-addon">large</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group">
            <span class="input-group-addon">normal</span>
            <input type="text" class="form-control" />
        </div>
        
        <div class="input-group input-group-sm">
            <span class="input-group-addon">small</span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/673e9db7-5fba-d65a-821c-1fb8994b4f25.jpeg)

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

## ボタンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default">Button</button>
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2e0e5fb0-3ee5-5857-1e4c-0647e7636de4.jpeg)

- `.input-group-btn` クラスを使うとボタンを配置できる。

## ドロップダウンボタンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="input-group">
            <span class="input-group-btn">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Button<span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">hoge</a></li>
                    <li><a href="#">fuga</a></li>
                    <li><a href="#">piyo</a></li>
                </ul>
            </span>
            <input type="text" class="form-control" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/563556e9-6a2e-1eef-510b-fc35623593b3.jpeg)

- ドロップダウンを配置できる。

# Navs
## タブ
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li class="active"><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/26f6e609-c941-78e9-9874-23d9717cc2b9.jpeg)

- `ul` タグに `.nav` クラスと `.nav-tabs` クラスを設定すると、タブバーを作れる。
- `li` タグに `.active` クラスを設定すると、「その項目が現在選択されている」という状態を表現できる。

### 各タブの幅を親要素の幅にいっぱいになるように均等割する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs nav-justified">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/832fa321-7878-fe6a-b3a2-7b1a0a5e729f.jpeg)

- `.nav-justified` クラスを追加すると、各タブの幅が、親要素いっぱいに均等割になるように拡張される。

## Pills
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/dfd46bf9-8627-8efd-0805-0dc7922baa4d.jpeg)

- `.nav-pills` で Pills ？を作成できる。

### 縦にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills nav-stacked">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/37d7d215-404d-c252-aaa2-4f0ddfbc9e7d.jpeg)

- `.nav-stacked` クラスを追加すると縦にできる。

## 項目を無効にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li class="disabled"><a href="#">fuga</a></li>
            <li><a href="#">piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/3854bec5-7ccc-9c71-3950-75a9476a2348.jpeg)

- `li` タグに `.disabled` クラスを設定すると、その項目を無効にできる。

## 項目をドロップダウンにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <ul class="nav nav-tabs">
            <li><a href="#">hoge</a></li>
            <li><a href="#">fuga</a></li>
            <li>
                <a href="#" data-toggle="dropdown">
                    Dropdown<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Hoge</a></li>
                    <li><a href="#">Fuga</a></li>
                    <li><a href="#">Piyo</a></li>
                </ul>
            </li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/0e099684-3c9f-32be-8bdb-c9291a733aab.jpeg)

- 項目をドロップダウンにできる。

# Navbar
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4290ae93-31df-30ae-d87a-3eead1505fee.jpeg)

- `nav` タグに `.navbar` クラスを指定したところがナビゲーションバーとしてレウアウトが設定される。

## ホームページへ戻る用のボタンを置く
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="nav-header">
                <a class="navbar-brand" href="#">Boostrap</a>
            </div>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2c9d49fe-14b9-a0b2-2c10-63174fc63c77.jpeg)

- よくナビゲーションバーの左端にある、タイトル的なボタンを配置する。
- `.nav-header` クラスを指定した `div` タグの中に `.navbar-brand` クラスを指定した `a` タグを配置する。

## テキストを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text">hoge fuga piyo</p>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/64bbbbd6-419a-11b6-e662-7848eee0f37a.jpeg)

- `.navbar-text` クラスを指定した `p` タグで配置できる。

### リンクを混ぜる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text">
                text <a href="#" class="navbar-link">link</a>
            </p>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d03fb887-3b95-de1b-f73b-49b1800b11ef.jpeg)

- テキストの中にリンクを設けたい場合は、 `.navbar-link` クラスを設定する。

## ボタンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <button class="btn btn-default navbar-btn">Button</button>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/23af2b9c-8977-0095-40d8-540b4995de8b.jpeg)

- `.navbar-btn` クラスを設定する。

## フォームを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" />
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6b8943ad-418f-c9d5-1fc5-6673d391c978.jpeg)

- `.navbar-form` と `.navbar-left` クラスを設定した `form` タグを配置する。
    - `.navbar-left` を設定しないと `form` タグの幅が横幅いっぱいになってしまう。
- 入力項目は `.form-group` で括らないと、横幅いっぱいに広がってしまう。

## 右端に配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <p class="navbar-text navbar-right">right text</p>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/bd32c439-5bde-cec4-f3e8-0109516455df.jpeg)

- `.navbar-right` で右に配置できる。

## ナビゲーションバーに一体化したボタンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li><a href="#">Hoge</a></li>
                <li><a href="#">Fuga</a></li>
                <li><a href="#">Piyo</a></li>
            </ul>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/8d584526-63b1-dbff-de7e-0f6577142de6.jpeg)

- `.nav` と `.navbar-nav` クラスを設定した `ul` タグを配置する。

## ドロップダウンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <ul class="nav navbar-nav">
                <li>
                    <a href="#" data-toggle="dropdown">
                        Dropdown<span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">hoge</a></li>
                        <li><a href="#">fuga</a></li>
                        <li><a href="#">piyo</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f1208bb4-9a8d-5bcb-6afd-7b7d4d69f83c.jpeg)

- `.navbar-nav` を利用してドロップダウンを配置できる。

## 画面の幅が狭くなったときに各項目を非表示にして、メニューボタンで呼び出せるようにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#collapse-target">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">Boostrap</a>
            </div>
            
            <div class="collapse navbar-collapse" id="collapse-target">
                <ul class="nav navbar-nav">
                    <li><a href="#">Hoge</a></li>
                    <li><a href="#">Fuga</a></li>
                </ul>
                <button class="navbar-btn btn btn-default">Button</button>
            </div>
        </nav>
    </body>
</html>
```

__画面の幅が十分にあるとき__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e07c01d0-7435-ca41-700d-edf7614a712d.jpeg)

__ないとき__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/570b0ebb-3f05-f951-9ce6-6b918e22be3d.jpeg)

__メニューボタンを押したとき__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/099129cc-5ee8-eb78-8aa8-8c554da05de3.jpeg)

- `.navbar-header` の中に `button` タグで画面幅が小さくなったときに表示するボタンを配置する。
- 幅が小さくなったときに非表示にする範囲を `.collapse` と `.navbar-collapse` クラスを指定した `div` タグで括る。
- この `div` タグを特定するためのセレクタを先述のメニューボタンの `data-target` 属性に設定する。

## ナビゲーションバーを画面上部に固定する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <style>
            body {
                padding-top: 50px;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
        
        <p>top</p>
        <div style="height:1000px;"></div>
        <p>bottom</p>
    </body>
</html>
```

__一番上__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6a910ad2-99b7-c1c8-c072-a28e0daad0ce.jpeg)

__一番下__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4b2fe966-909a-00ae-62cb-8fd18d457ed7.jpeg)

- `.navbar-fixed-top` クラスを設定すると、ナビゲーションバーが画面上部に固定される。
- ナビゲーションバーの中身は `.container` または `.container-fluid` クラスを指定した `div` タグで括る。
- `body` 要素のスタイルに `padding-top: 50px;` を設定する。
    - こうしないと、ナビゲーションバーが直後の要素を上から覆い隠してしまう。
    - `50px` はデフォルトのナビゲーションバーの高さ。

## ナビゲーションバーを画面下部に固定する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <style>
            body {
                padding-bottom: 50px;
            }
        </style>
    </head>
    <body>
        <nav class="navbar navbar-default navbar-fixed-bottom">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
        
        <p>top</p>
        <div style="height:1000px;"></div>
        <p>bottom</p>
    </body>
</html>
```

__一番上__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/fec5bf82-521a-e59e-a650-eacb78f4f44a.jpeg)

__一番下__

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/7c7b7211-be64-0da8-6373-6358ff177152.jpeg)

- `.navbar-fixed-bottom` クラスを設定するとナビゲーションバーが画面下部に固定される。
- こっちは `body` タグに `padding-bottom` を設定しないと（以下略）。

## 画面の幅いっぱいまで利用する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-default navbar-static-top">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/9291b02f-4efb-1891-a57a-7492b6cf1cfc.jpeg)

- `.navbar-static-top` クラスを設定する。

## ナビゲーションバーの色を反転させる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <nav class="navbar navbar-inverse">
            <div class="container">
                <p class="navbar-text">text</p>
            </div>
        </nav>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/36cd6a81-eac9-5e32-df32-0dfa1024f31a.jpeg)

- `.navbar-default` の代わりに `.navbar-inverse` クラスを設定すると、色が反転したスタイルになる。

# Breadcrumbs（パンくずリスト）
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="breadcrumb">
            <li><a href="#">Hoge</a></li>
            <li><a href="#">Fuga</a></li>
            <li class="active">Piyo</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/3fc9e82f-310d-fa12-e69b-528c2bc07aa0.jpeg)

- `ul` タグに `.breadcrumb` クラスを設定することで、パンくずリストのスタイルを適用できる。

# Pagination
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d25012d1-255b-9fa8-33ae-87e9f64758a1.jpeg)

- `ul` タグに `.pagination` クラスを設定すると、ページング用のリンクを作れる。

## リンクを無効にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li class="disabled"><span>&amp;laquo;</span></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ccec2a68-b73d-0a02-f763-24bd45215104.jpeg)

- `.disabled` クラスを設定すると、そのリンクを無効にできる。

## 現在表示されているページをハイライトさせる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li class="active"><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/eee8acc9-c98e-9339-b423-707e15355ce9.jpeg)

- `.active` クラスを設定したリンクはハイライトされるので、現在表示中のページ番号を示すのに利用できる。

## サイズを変更する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pagination pagination-lg">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
        <ul class="pagination">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
        <ul class="pagination pagination-sm">
            <li><a href="#">&amp;laquo;</a></li>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">&amp;raquo;</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/bf8f728e-c9c5-958a-821b-80235caa1e2a.jpeg)

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

# Pager
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e8d76939-4df2-3c08-6c67-c4a22cb80db2.jpeg)

- `ul` タグに `.pager` クラスを設定すると、ページ切り換えボタン用のスタイルを適用できる。

## ボタンを画面の左右に分けて配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/29381d18-8f83-7590-ce6a-3b28d97ac8c2.jpeg)

- `li` タグに `.previous` クラスを設定すると、画面の左側に寄せることができる。
- `.next` クラスを設定すると、画面の右側に寄せることができる。

## ボタンを無効にする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="pager">
            <li class="disabled"><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/4d76fea7-68e8-9880-1214-c38d6c070f7e.jpeg)

- `.disabled` クラスを設定すると、ボタンを無効にできる。

# Labels
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="label label-default">default</span>
        <span class="label label-primary">primary</span>
        <span class="label label-success">success</span>
        <span class="label label-info">info</span>
        <span class="label label-warning">warning</span>
        <span class="label label-danger">danger</span>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/d66c86ce-9ce6-462f-8724-79626ad68191.jpeg)

- `.label` クラスと `.label-**` クラスを設定すると、テキストにラベルのスタイルが適用される。

# Badges
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <span class="badge">12</span>
        <span class="badge"></span>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/bb508cc7-8307-eba3-94b9-ae3bee4e771d.jpeg)

- `.badge` クラスを設定すると、未読メッセージ数の通知などに利用できるバッジのスタイルを適用できる。
- `.badge` クラスを設定したタグのテキストが空の場合は、何も表示されない。

## Navs の Pill と一緒に利用できる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="nav nav-pills">
            <li class="active">
                <a href="#">
                    Hoge
                    <span class="badge">15</span>
                </a>
            </li>
            <li>
                <a href="#">
                    Fuga
                    <span class="badge">15</span>
                </a>
            </li>
            <li><a href="#">Piyo</a></li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/8ce59ae6-2301-9153-2015-1323b74bbbf0.jpeg)

- Navs の Pill と一緒に使うとよしなにスタイルが調整される（アクティブのときに色が反転される）。

# Jumbotron
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="jumbotron">
            <h1>H1 Text</h1>
            <p>p text...</p>
            <button class="btn btn-primary">Button</button>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6b6fc01a-7e89-dab7-a273-759fe178cc40.jpeg)

- 最近の Web サイトのトップページでよく見かける、そのサイトの主要コンテンツを大きく・かつシンプルに紹介する領域用のスタイルを適用できる。
- `div` タグに `.jumbotron` クラスを指定する。

# Page header
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="page-header">
            <h1>H1 Text</h1>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/75245119-5bbe-1057-e8c6-3bb9d10b302b.jpeg)

- `.page-header` クラスを設定すると、ページのヘッダーと本文を明確に分離するためにスペースを開けたスタイルを適用できる。

# Thumbnails
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="thumbnail">
            <img src="hoge.png" />
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/3065558d-5d1d-2e66-22ff-21a1eea31238.jpeg)

- `.thumbnail` クラスを設定した要素で `img` タグを括ることで、サムネイル表示用のスタイルを適用できる。

## Grid System と一緒に利用する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="hoge.png" />
					</div>
                </div>
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="fuga.png" />
					</div>
                </div>
                <div class="col-xs-4">
					<div class="thumbnail">
                        <img src="piyo.png" />
					</div>
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/3e89220a-7365-cc7a-27a3-9c35e0fd326e.jpeg)

- 基本は Grid system と一緒に利用することで、簡単にサムネイル画像を並べることができる。

## サムネイルの下に説明などのテキストを載せる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-xs-6">
                    <div class="thumbnail">
                        <img src="hoge.png" />
                        <div class="caption">
                            <h3>Thumbnail Label</h3>
                            <p>p text...</p>
                            <button class="btn btn-primary">Button</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/305ba9b4-93c2-a1df-ddbb-81b01a45a87f.jpeg)

- `.caption` クラスを設定した `div` タグを配置すれば、その中にサムネイルを説明するテキストを載せることができる。

# Alerts
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="alert alert-success">success</div>
        <div class="alert alert-info">info</div>
        <div class="alert alert-warning">warning</div>
        <div class="alert alert-danger">danger</div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/214cecae-b149-89fa-496c-1c09f9df4067.jpeg)

- `.alert` と `.alert-**` クラスを設定すると、アラートメッセージ用のスタイルを適用できる。

## 閉じるボタンを配置する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
        
        <script src="js/jquery-2.1.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="alert alert-success alert-dismissable">
            <button class="close" data-dismiss="alert">&amp;times;</button>
            success
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/1855e627-0846-a850-f7fc-1915eb33a3eb.jpeg)

↓クリック

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/2e767f93-bca7-d34b-84c6-c62e18a2a429.jpeg)

- JavaScript を読み込む。
- `.alert` クラスを設定した要素に `.alert-dismissable` クラスを追加する。
- `.close` クラスと `data-dismiss="alert"` 属性を追加した `button` タグを配置する（テキストは `&amp;times;`）。

## リンクを含める
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="alert alert-success">
            normal text <a href="#" class="alert-link">link text</a>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/e1d3e028-a512-abe8-8807-e6784a971ae1.jpeg)

- リンクを配置するときは、 `a` タグに `.alert-link` クラスを設定する。

# Progress bars
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/eb6df004-9726-8164-0b17-a47405ed680f.jpeg)

- `.progress` クラスを設定した `div` タグの中に、 `.progress-bar` クラスを設定した `div` タグを配置する。
- `.progress-bar` クラスを設定した `div` タグの幅でプログレスバーの表示幅が変わる。

## バーの上にテキストを載せる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 60%;">
                60%
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/a4dccf24-419a-8c9a-cd01-ee47e6b8ae73.jpeg)

- `.progress-bar` クラスを設定した `div` タグ内にテキストを書けば、そのままバーの上に表示される。

## 色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar progress-bar-success" style="width: 60%;">
                success
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-info" style="width: 80%;">
                info
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-warning" style="width: 30%;">
                warning
            </div>
        </div>
        <div class="progress">
            <div class="progress-bar progress-bar-danger" style="width: 70%;">
                danger
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/272ff512-575c-8f00-74b7-e4dcdd4bf740.jpeg)

- `.progress-bar-**` クラスを追加することで、バーに色を付けることができる。

## バーにストライプ模様を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress progress-striped">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/29895a0c-3088-de88-105f-350cdc3d712d.jpeg)

- `.progress-striped` クラスを追加すると、バーがストライプ模様になる。
- IE8 は非サポート。

## ストライプ模様をアニメーションさせる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress progress-striped active">
            <div class="progress-bar" style="width: 60%;">
            </div>
        </div>
    </body>
</html>
```

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

- `.active` クラスを追加するとバーがアニメーションされる。

## バーを積み重ねる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="progress">
            <div class="progress-bar" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-success" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-info" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-warning" style="width: 20%;">
            </div>
            <div class="progress-bar progress-bar-danger" style="width: 20%;">
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6901be83-4156-5aff-37f9-68d4d401174b.jpeg)

- `.progress-bar` クラスを設定した `div` タグを続けて記述することで、バーを積み重ねることができる。

# Media object
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="hoge.png" />
            </a>
            <div class="media-body">
                <h4>Media heading</h4>
                <p>text...</p>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/896f7b2a-5258-4438-4a23-8abd8be209b4.jpeg)

- twitter のコメントのような、画像とテキストを並べた一塊のレイアウトを実現する。

## ネストする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="media">
            <a class="pull-left" href="#">
                <img class="media-object" src="hoge.png" />
            </a>
            <div class="media-body">
                <h4>Media heading</h4>
                <p>text...</p>
                
                <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="fuga.png" />
                    </a>
                    <div class="media-body">
                        <h4>Nested Media</h4>
                        <p>text...</p>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/aa3e0d3e-c0ee-c7f1-c7fd-a1d00c70adf2.jpeg)

- `.media-body` の中に更に `.media` を追加することで、ネストが可能。

## メディアリスト
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="media-list">
            <li class="media">
                <a class="pull-left" href="#">
                    <img class="media-object" src="hoge.png" />
                </a>
                <div class="media-body">
                    <h4>Media heading</h4>
                    <p>text...</p>
                </div>
            </li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ec3a2fd8-52bd-f6ba-deee-d1e5aa64820a.jpeg)


- `ul` タグを使う事が可能。
- コメントスレッドや記事のリストを使う場合に便利らしい。

# List group
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">Hoge</li>
            <li class="list-group-item">Fuga</li>
            <li class="list-group-item">Piyo</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/8862b3f4-016b-db1b-1e81-8e0c96803866.jpeg)

- `.list-group` と `.list-group-item` クラスを使用してリストビューを作成できる。

## Badge を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">
                Hoge
                <span class="badge">11</span>
            </li>
            <li class="list-group-item">Fuga</li>
            <li class="list-group-item">Piyo</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/916ad6d6-2dde-1faa-7bf1-70ea206ee02a.jpeg)

- Badge と組み合わせて使用できる。

## リストの項目をリンクにする
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="list-group">
            <a href="#" class="list-group-item active">Hoge</a>
            <a href="#" class="list-group-item">Fuga</a>
            <a href="#" class="list-group-item">Piyo</a>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/320a56f9-8a9e-ee05-ba98-c662ba071a9d.jpeg)

- `ul` タグと `li` タグを使う代わりに `div` タグと `a` タグを使うことで、リストの項目をリンクにできる。
- `.active` クラスを設定すると表示がアクティブ状態になる。

## 色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item list-group-item-success">success</li>
            <li class="list-group-item list-group-item-info">info</li>
            <li class="list-group-item list-group-item-warning">warning</li>
            <li class="list-group-item list-group-item-danger">danger</li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/07bd1744-1efe-5b9a-cd59-425017448680.jpeg)

- `.list-group-item-**` クラスを追加することで色を付けることができる。

## リストの項目に任意の HTML を記述する
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <ul class="list-group">
            <li class="list-group-item">
                <h4>List group item heading</h4>
                <p>text...</p>
            </li>
        </ul>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/ebf04c2c-11f8-9a2b-d61d-d443e4f1443a.jpeg)

- リスト項目の中には任意の HTML が記述可能。

# Panels
## 基本
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-body">
                panel body
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/f3974f91-c7b1-40ef-1f7e-3ff86413ddbb.jpeg)

- パネルスタイルを実現する。

## ヘッダーを付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Panel Heading
            </div>
            <div class="panel-body">
                panel body
            </div>
        </div>
    </body>
</html>
```

![angularjs.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/502de46a-3da6-8262-7b17-833f410d776d.jpeg)

- `.panel-heading` クラスでパネルのヘッダーを追加できる。

## フッターを付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-body">
                panel body
            </div>
            <div class="panel-footer">
                Panel Footer
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/b717d129-1e4c-f673-a357-30e3a443fabe.jpeg)

- `.panel-footer` クラスでパネルのフッターを追加できる。

## 色を付ける
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-primary">
            <div class="panel-heading">
                Primary
            </div>
            <div class="panel-body">
                primary
            </div>
        </div>
        
        <div class="panel panel-success">
            <div class="panel-heading">
                Success
            </div>
            <div class="panel-body">
                success
            </div>
        </div>
        
        <div class="panel panel-info">
            <div class="panel-heading">
                Info
            </div>
            <div class="panel-body">
                info
            </div>
        </div>
        
        <div class="panel panel-warning">
            <div class="panel-heading">
                Warning
            </div>
            <div class="panel-body">
                warning
            </div>
        </div>
        
        <div class="panel panel-danger">
            <div class="panel-heading">
                Danger
            </div>
            <div class="panel-body">
                danger
            </div>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/565a3b6c-5880-14f5-becf-385837e64bf4.jpeg)

- `.panel-**` クラスを切り替えることで色を設定できる。

## パネルの中にテーブルを入れる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <div class="panel-body">
                body
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Takeshi</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>Takuya</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>Toshio</td>
                        <td>16</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/c9bed8fc-845b-22a8-533c-5ca7fe9f6671.jpeg)

- `.panel-body` の外にテーブルを追加する。

### ボディが無い場合
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <table class="table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Age</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Takeshi</td>
                        <td>14</td>
                    </tr>
                    <tr>
                        <td>Takuya</td>
                        <td>17</td>
                    </tr>
                    <tr>
                        <td>Toshio</td>
                        <td>16</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/a3d1ad27-9c3d-e14b-fc05-7a83a0904ded.jpeg)

- `.panel-body` が無い場合、ヘッダーにつづいてテーブルが描画される。

## パネルの中にリストグループを入れる
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="panel panel-default">
            <div class="panel-heading">
                Heading
            </div>
            <div class="panel-body">
                body
            </div>
            <ul class="list-group">
                <li class="list-group-item">Hoge</li>
                <li class="list-group-item">Fuga</li>
                <li class="list-group-item">Piyo</li>
            </ul>
        </div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/6bd92343-564f-c2c8-fae5-1be9e0a887e4.jpeg)

- リストグループもテーブル同様にパネル内に入れることができる。

# Wells
```html:
<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="css/bootstrap.min.css" />
    </head>
    <body>
        <div class="well well-sm">well text</div>
        <div class="well">well text</div>
        <div class="well well-lg">well text</div>
    </body>
</html>
```

![bootstrap.JPG](https://qiita-image-store.s3.amazonaws.com/0/28302/df19d75f-1385-73bf-3728-d5f543253d69.jpeg)

- Inset Effetct ？のスタイルを適用できる。
- `.well-sm`, `.well-lg` クラスでパディングを調整できる。




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

## AREA について
- [WAI-ARIA導入（日本語訳） - TRANS](http://trans.hatenablog.jp/entry/20090709/p1)