Bootstrap超入門

## はじめに
HTMLおよびBootstrapの勉強の為に作成しました。
超初心者向けとなっております。
詳細なリファレンスは以下のページを参照ください。
http://bootstrap3.cyberlab.info/

また、Bootplyを使っているため、htmlやbodyタグは省略しております。

## 今回のプロジェクトでやること
Webアプリケーションでよくある入力画面と一覧画面の２つを
Bootstrapを使って簡単にカッコよくします。
それにより、HTMLおよびBootstrapについての理解を深めます。

こんな画面を...
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/918a0686-e72f-09ed-d7fd-1b30f1069c0a.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/61565cfd-92fc-43e2-cba1-ebb87897991e.png)


こんな感じにしていきます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/cb30890c-cfd0-32e8-3fd8-a1af7134d679.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/3baa2471-c4e3-48a3-eceb-2e1ee3b28e33.png)

## プロジェクトを学習するために

本プロジェクトを学習するためにBootplyを用いることを推奨します。

Bootplyはその場でHTML、Javascript、CSSを実行することができ、
テスト的にWebアプリケーションを開発することができるサイトです。
Bootstrapがデフォルトで使用できるところが特徴です。
Play Nowから開始しましょう。

https://www.bootply.com/
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/ed2b3cf6-328d-c099-92a3-73f7c733653b.png)

##　サンプル１：入力画面
会員登録画面のサンプルです。
サンプル１はこれをベースに進めていきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/918a0686-e72f-09ed-d7fd-1b30f1069c0a.png)

### ソース

```html:html
<div>
  <div>
    <div>
      Sign In
    </div>
    <form>
      <div>
        <div>
          <label>名前</label>
          <input type="text">
        </div>
        <div>
          <label>ふりがな</label>
          <input type="text">
        </div>
        <div>
          <label>生年月日</label>
          <input type="date" value="2017-10-04">
        </div>
        <div>
          <label>性別</label>
          <div>
            <label>
              <input type="radio" name="optionsRadios">
              男
            </label>
            <label>
              <input type="radio" name="optionsRadios">
              女
            </label>
          </div>
        </div>
        <button type="submit">Sign In</button>
      </div>
    </form>
  </div>
</div>
```

### ヘッダー作り
※この部分はゴリゴリのcssです。
　正直ここが一番かっこよくしている部分かもしれません。

ここでは`container`と`header`にスタイルを適用しています。
cssがしていることは以下です。

- `.container`がしていること
 - 最大横幅を400pxに
 - 枠線を1pxのオレンジに
 - 上部左右の角を丸に
- `.header `がしていること
 - 背景色をオレンジに
 - 上部左右の角を丸に
 - 内側余白を15pxに
 - フォントサイズを25pxに

```css:css
.container {
 	max-width:400px;
  	border: solid 1px #FF773E;
  	border-radius:10px 10px 0px 0px;
  }

.header {
  	background: #FF773E;
 	border-radius:10px 10px 0px 0px;
  	padding: 15px;
  	font-size: 25px;
  }
...
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/eda7cc1c-fbf1-6030-8d02-518cb4b2cb21.png)

### アイコン
Bootstrapは200種類のアイコンがあります。
適材適所に取り入れていきましょう。

今回は`log-in`というアイコンを使いました。
アイコンはスタイルによって色やサイズを変えることができます。
今回は`header`のスタイルが適用されているため「Sign In」と同じ色、サイズになっています。

``` html:html
<div class="row header">
    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
    Sign In
</div>
...
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/09224e73-f36c-bce7-858f-a9818c6c1b6c.png)


### 入力フォーム
Bootstrapは入力フォームを一瞬でカッコよくしてくれます。

`class`属性に`form-group`のあるdivを用意します。
次に、`input`タグの`class`属性を`form-control`にします。
※`input`タグすべてにこの設定を行ってください。

※今回は`div`を`fieldset`に変更しました。
　`fieldset`は入力フォームの塊としてBootstrapではよく使われています。
　Javascriptを用いると`fieldset`配下の入力フォームを一気に空にしたりできます。（今回は割愛します）

```html:html
<form>
    <fieldset class="form-group">
      <div class="form-group">
        <label>名前</label>
        <input type="text" class="form-control">
      </div>
...
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/dbaf97bf-e5a5-7a3d-9b8b-281a74ebadf9.png)

### ラベル
これはBootstrapの機能ではありませんがご紹介します。

`label`を`legend`に変更するとカッコいいラベルになります。

```html:html
<legend>名前</legend>
<input type="text" class="form-control">
...
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/eda67781-18fb-daf4-5c1e-57ba7c88876d.png)

### ボタン
Bootstrapはボタンも一瞬でカッコよくしてくれます。

`button`タグの`class`属性を`btn`にします。（デフォルトの状態）
次に、ボタンに色を付けます。
`class`属性に`btn-primary`を追加します。
これでボタンが青になります。

これ以外にも以下のようなバリエーションがあります。

- btn-success（緑）
- btn-info（水色）
- btn-warning（黄色）
- btn-danger（赤）

また、ボタンを右寄せにするために
`class`属性に`pull-right`を追加します。
これはボタンやテキストなどのインライン要素に使えます。
※以下のページに詳しく書かれています。
　https://qiita.com/Rock22/items/e4e89f15c29e1415977d

```html:html
<button type="submit" class="btn btn-primary pull-right">Sign In</button>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/34ded6a2-a3c2-18a9-614a-e66c31c48f08.png)

### スタイル
最後にスタイルを微調整します。
ヘッダーと「名前」の間に隙間を入れます。

```css:css
fieldset{
  	padding: 15px;
  }
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/a652b508-841b-9c67-d3e6-d9649876a0d7.png)

これで完成です。
ソースはこれ

```html:html
<div class="container">
  <div class="row header">
    <span class="glyphicon glyphicon-log-in" aria-hidden="true"></span>
    Sign In
  </div>
  <form>
    <fieldset class="form-group">
      <div class="form-group">
        <legend>名前</legend>
        <input type="text" class="form-control">
      </div>
      <div class="form-group">
        <legend>ふりがな</legend>
        <input type="text" class="form-control">
      </div>
      <div class="form-group">
        <legend>生年月日</legend>
        <input type="date" class="form-control " value="2017-10-04">
      </div>
      <div class="form-group">
        <legend>性別</legend>
        <div>
          <label>
            <input type="radio" name="optionsRadios">
            男
          </label>
          <label>
            <input type="radio" name="optionsRadios">
            女
          </label>
        </div>
      </div>
      <button type="submit" class="btn btn-primary pull-right">Sign in</button>
    </fieldset>
  </form>
</div>
```

```css:css
.container {
 	max-width:400px;
  	border: solid 1px #FF773E;
  	border-radius:10px 10px 0px 0px;
  }

.header {
    background: #FF773E;
 	border-radius:10px 10px 0px 0px;
  	padding: 15px;
  	font-size: 25px;
  }

fieldset{
  	padding: 15px;
  }
```

##　サンプル２：一覧画面
検索画面のサンプルです。
サンプル２はこれをベースに進めていきます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/61565cfd-92fc-43e2-cba1-ebb87897991e.png)

###ソース
`div`が多いのは目をつぶってください。。。

```html:html
<div>
  <div>
    <div>
      <div>
        <div>
          <h3>
            <a>
              検索条件
            </a>
          </h3>
        </div>
        <div>
          <div>
            <form>
              <fieldset>
                <div>
                  <div>
                    <div>
                      <label>名前</label>
                    </div>
                    <div>
                      <input type="text" placeholder="テキスト入力欄">
                    </div>
                  </div>
                </div>
                <br>
                <div>
                  <div>
                    <div>
                      <label>ふりがな</label>
                    </div>
                    <div>
                      <input type="text" placeholder="テキスト入力欄">
                    </div>
                  </div>
                </div>
                <br>
                <div>
                  <div>
                    <div>
                      <label>生年月日</label>
                    </div>
                    <div>
                      <input type="text">
                    </div>
                  </div>
                </div>
                <br>
                <div>
                  <div>
                    <div>
                      <label>性別</label>
                    </div>
                    <div>
                      <select id="number" name="number">
                        <option value="1" selected="selected">　</option>
                        <option value="2">男</option>
                        <option value="3">女</option>
                      </select>
                    </div>
                  </div>
                </div>
                <br>
                <div>
                  <div>
                    <div>
                      <button>検索</button>
                      <button>クリア</button>
                    </div>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div>
    <table>
      <thead>
        <tr>
          <th>選択</th>
          <th>名前</th>
          <th>ふりがな</th>
          <th>生年月日</th>
          <th>性別</th>
        </tr></thead>
      <tbody>
        <tr>
          <td>
            <input type="checkbox">
          </td>
          <td>田中　太郎</td>
          <td>たなか　たろう</td>
          <td>1990/01/01</td>
          <td>男</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox">
          </td>
          <td>鈴木　一郎</td>
          <td>すずき　いちろう</td>
          <td>1991/02/02</td>
          <td>男</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox">
          </td>
          <td>山田　花子</td>
          <td>やまだ　はなこ</td>
          <td>1992/03/03</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div>
    <div>
      <button>登録</button>
    </div>
  </div>
</div>
```

### ベース作り
Bootstrapには"グリッドシステム"というものがあります。
これを使うことで、画面サイズを変えてもスマホになっても画面レイアウトが崩れることがなくなります。

- グリッドシステムの基本
 1. `class`属性が `container`（固定枠）または`container-fluid`（流動枠）の`div`を配置する
 - 1.に`class`属性が`row`の`div`を配置する
 - 2.配下の`class`属性に`col-{prefix}-{columns}`の形で記載する
 - `{columns}`は合計が12になるようにする

`col-{prefix}-{columns}`の詳細は以下です。
今回は表示幅が自動のスマホサイズ（`co-xs-{columns}`）を指定しております。

|  | スマホ | タブレット | PC | PC大画面 |
|:-:|:-:|:-:|:-:|:-:|
| prefix | `co-xs-{columns}` | `col-sm-{columns}` | `col-md-{columns}` | `col-lg-{columns}` |
| .containerの表示幅 | 自動 | 750px | 970px | 1170px |



この基本を用いてベースを作ります。
複数の`row`で区切ることで、よりフレキシブルな画面レイアウトを実現できます。

```html:html
<div class="container">
  <div class="row">
  ...
  </div>
  <div class="row">
  ...
  </div>
...
```

サンプル２では検索フォームと一覧、登録ボタンの３つの構造に分かれています。
「グリッドシステムの基本3」を適応します。
検索フォームをコンパクトにするため１つ目の`row`のカラムサイズを8にしております。

```html:html
<div class="container">
  <div class="row col-xs-8">
  ...
  <div class="row col-xs-12">
    <table>
  ...
  <div class="row row col-xs-12">
    <div>
      <button>登録</button>
  ...
```

###アコーディオン
BootstrapはJavascriptも提供してます。
その一つのアコーディオンを検索フォームに適用してみたいと思います。

アコーディオンとは楽器のアコーディオンのように開閉するパネルのことです。

まずは、検索フォームをパネル化します。

- パネルの作り方
 1. `class`属性が`panel-group`の`div`を配置する
 - 1.に`class`属性が`panel panel-default`の`div`を配置する
 - 必要に応じて、2.に`panel-heading`（ヘッダー）、`panel-body`（ボディー）、`panel-footer`（フッター）の何れかを`class`属性に指定した`div`を配置する
 - 必要に応じて、タイトルの`class`属性に`panel-title`を指定する

今回は`panel-heading`と`panel-body`を使ってます。

```html:html
<div class="container">
  <div class="row col-xs-8">
    <div class="panel-group">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">
            <a>
              検索条件
            </a>
          </h3>
        </div>
        <div>
          <div class="panel-body">
   ...
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/75e2c645-8e4d-3fd8-5034-39c3272d1e9c.png)

次に、アコーディオンを適応します。

- アコーディオンの作り方
 1. `class`属性が`panel-group`の`div`要素にアコーディオン用のの`id`を付ける
 - `class`属性が`panel-title`の`div`要素に`a`属性を配置し、`data-toggle="collapse" data-parent="1.のid" href="1.のid"`を付ける
 - `class`属性が`panel-body`の親の`div`要素に`id="1.のid" class="panel-collapse collapse in"`を付ける

```html:html
<div class="container">
  <div class="row col-xs-8">
    <div class="panel-group" id="sampleAccordion">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">
            <a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1">
              検索条件
            </a>
          </h3>
        </div>
        <div id="sampleAccordionCollapse1" class="panel-collapse collapse in">
          <div class="panel-body">
   ...
```
パネルヘッダーをクリックすることで検索フォームを開閉することができるようになる。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/804003c2-1456-9e71-95cd-b572711d064e.png)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/3751a1a3-d2ad-1d9a-961c-4d5c27e90bbe.png)


### アイコン
検索フォームのヘッダーにアイコンを配置する。

```html:html
<span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
<a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1">
  検索条件
</a>
   ...
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/e95605ae-cd12-92a8-1e53-791be92cf044.png)

### ラベル・入力フォーム
検索フォームはラベルと入力フォームを横並びにします。

手順は以下です。

1. `class`属性が`form-group`の`div`要素を配置する
- 1.の配下に`class`属性が`row`の`div`要素を配置する
- 2.の配下に`class`属性が`col-{prefix}-{columns}`の形の`div`要素を配置する
- `{columns}`は合計が12になるようにする
  
その他にもラベルを右寄せにしたりラベル用のクラスを設定しております。
個人的な意見ですが、ラベルを右寄せにする他のラベルとのバランスがよくなります。

```html:html
<div class="form-group">
  <div class="row">
    <div class="col-xs-2 text-right">
      <label class="control-label">名前</label>
    </div>
    <div class="col-xs-8">
      <input type="text" class="form-control" placeholder="テキスト入力欄">
    </div>
  </div>
</div>
```

全体はこちら

```html:html
...
<div class="form-group">
  <div class="row">
    <div class="col-xs-2 text-right">
      <label class="control-label">名前</label>
    </div>
    <div class="col-xs-8">
      <input type="text" class="form-control" placeholder="テキスト入力欄">
    </div>
  </div>
</div>
<br>
<div class="form-group">
  <div class="row">
    <div class="col-xs-2 text-right">
      <label class="control-label">ふりがな</label>
    </div>
    <div class="col-xs-8">
      <input type="text" class="form-control" placeholder="テキスト入力欄">
    </div>
  </div>
</div>
<br>
<div class="form-group">
  <div class="row">
    <div class="col-xs-2 text-right">
      <label class="control-label">生年月日</label>
    </div>
    <div class="col-xs-8">
      <input type="date" class="form-control">
    </div>
  </div>
</div>
<br>
<div class="form-group">
  <div class="row">
    <div class="col-xs-2 text-right">
      <label class="control-label">性別</label>
    </div>
    <div class="col-xs-3">
      <select class="form-control" id="number" name="number">
        <option value="1" selected="selected">　</option>
        <option value="2">男</option>
        <option value="3">女</option>
      </select>
    </div>
  </div>
</div>
...
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/40dc226e-d8bb-abdf-94b6-4979c46c84dc.png)

### 検索・クリアボタン
グリッドシステムを用いて右側に配置したいと思います。

- ボタンの親要素に`class`属性が`col-{prefix}-offset-{columns}`の形の`div`要素を配置する

`col-{prefix}-offset-{columns}`は、右側に空を配置するため
これにより右側に配置することができます。

```html:html
...
<div class="form-group">
  <div class="row">
    <div class="col-xs-offset-8">
      <button class="btn btn-primary">検索</button>
      <button class="btn">クリア</button>
    </div>
  </div>
</div>
...
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/493f52f1-da1a-d829-48c5-ae3de65bc06d.png)


### テーブル
Bootstrapはテーブルも一瞬でカッコよくしてくれます。

- `table`タグの`class`属性に`table`を追加する
- それ以外にも必要に応じて以下のクラスを追加する
 - `table-striped`（ストライプ柄の表）
 - `table-bordered`（境界線付きの表）
 - `table-hover`（カーソルを合わたとき、その行の背景色を変更する）
 - `table-condensed`（セル内の余白を半分に）
 - etc

今回は、境界線付き&ホバーにしました。

```html:html
<table class="table table-bordered table-hover">
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/d15d5d76-ddc6-30ee-1754-5a05deb04bfb.png)

選択列を間延びしているので縮めてみましょう。
`th`タグと`td`タグの``class`属性に`class="col-xs-1"`を付けると任意の幅に変更することができます。
※すべての行に適応してください。

```html:html
<thead>
  <tr>
    <th class="col-xs-1">選択</th>
    <th>名前</th>
    <th>ふりがな</th>
    <th>生年月日</th>
    <th>性別</th>
  </tr></thead>
<tbody>
  <tr>
    <td class="col-xs-1">
      <input type="checkbox">
    </td>
    <td>田中　太郎</td>
    <td>たなか　たろう</td>
    <td>1990/01/01</td>
    <td>男</td>
  </tr>
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/817c263b-026e-976c-b86c-1d50ba7c5990.png)

### 登録ボタン
以下の設定を行います。
- 右寄せ
- 緑

```html:html
  <div class="row col-xs-12">
    <div class="text-right">
      <button class="btn btn-success">登録</button>
    </div>
  </div>
```
![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/afa6c5dd-7613-6d7e-cddc-677ce0021700.png)

### スタイル
最後に、検索フォームのヘッダーと一覧のヘッダーをオレンジに変更します。
fieldsetも入力画面と同じスタイルにします。

```css:css
fieldset{
  	padding: 15px;
  }

.background-orange {
  	background-color: #FF773E !important;
  }
```

```html:html
<div class="container">
  <div class="row col-xs-8">
    <div class="panel-group" id="sampleAccordion">
      <div class="panel panel-default">
        <div class="panel-heading background-orange">
...
  <div class="row col-xs-12">
    <table class="table table-bordered table-hover">
      <thead class="background-orange">
...
```

![image.png](https://qiita-image-store.s3.amazonaws.com/0/187033/b144846e-9094-4153-fa62-bb929ae8b819.png)

これで完成です。
ソースはこれ

```html:html
<div class="container">
  <div class="row col-xs-8">
    <div class="panel-group" id="sampleAccordion">
      <div class="panel panel-default">
        <div class="panel-heading  background-orange">
          <h3 class="panel-title">
            <span class="glyphicon glyphicon-lock" aria-hidden="true"></span>
            <a data-toggle="collapse" data-parent="#sampleAccordion" href="#sampleAccordionCollapse1">
              検索条件
            </a>
          </h3>
        </div>
        <div id="sampleAccordionCollapse1" class="panel-collapse collapse in">
          <div class="panel-body">
            <form>
              <fieldset>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-2 text-right">
                      <label class="control-label">名前</label>
                    </div>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" placeholder="テキスト入力欄">
                    </div>
                  </div>
                </div>
                <br>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-2 text-right">
                      <label class="control-label">ふりがな</label>
                    </div>
                    <div class="col-xs-8">
                      <input type="text" class="form-control" placeholder="テキスト入力欄">
                    </div>
                  </div>
                </div>
                <br>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-2 text-right">
                      <label class="control-label">生年月日</label>
                    </div>
                    <div class="col-xs-8">
                      <input type="date" class="form-control">
                    </div>
                  </div>
                </div>
                <br>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-2 text-right">
                      <label class="control-label">性別</label>
                    </div>
                    <div class="col-xs-3">
                      <select class="form-control" id="number" name="number">
                        <option value="1" selected="selected">　</option>
                        <option value="2">男</option>
                        <option value="3">女</option>
                      </select>
                    </div>
                  </div>
                </div>
                <br>
                <div class="form-group">
                  <div class="row">
                    <div class="col-xs-offset-8">
                      <button class="btn btn-primary">検索</button>
                      <button class="btn">クリア</button>
                    </div>
                  </div>
                </div>
              </fieldset>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row col-xs-12">
    <table class="table table-bordered table-hover">
      <thead class="background-orange">
        <tr>
          <th class="col-xs-1">選択</th>
          <th>名前</th>
          <th>ふりがな</th>
          <th>生年月日</th>
          <th>性別</th>
        </tr></thead>
      <tbody>
        <tr>
          <td class="col-xs-1">
            <input type="checkbox">
          </td>
          <td>田中　太郎</td>
          <td>たなか　たろう</td>
          <td>1990/01/01</td>
          <td>男</td>
        </tr>
        <tr>
          <td class="col-xs-1">
            <input type="checkbox">
          </td>
          <td>鈴木　一郎</td>
          <td>すずき　いちろう</td>
          <td>1991/02/02</td>
          <td>男</td>
        </tr>
        <tr>
          <td class="col-xs-1">
            <input type="checkbox">
          </td>
          <td>山田　花子</td>
          <td>やまだ　はなこ</td>
          <td>1992/03/03</td>
          <td>女</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="row row col-xs-12">
    <div class="text-right">
      <button class="btn btn-success">登録</button>
    </div>
  </div>
</div>
```

```css:css
fieldset{
  	padding: 15px;
  }

.background-orange {
  	background-color: #FF773E !important;
  }
```

## 最後に
HTMLおよびBootstrapについて理解が深まりましたら幸いです。