Bootstrap 基礎知識・基礎コード

## 本記事の内容
Bootstapについて最低限の理解を得るために必要な知識、および簡単なコード例を記載します

なお、各リンクは以下の公式ドキュメント該当箇所につなげているので、ぜひそちらも参考にしてください

https://getbootstrap.jp/

## 基礎コード

### 両端に余白を作り要素を中央にまとめる

```html
<div class = "container">
```

### 要素を両端に配置する

```html
<div class="row">
 <div class="col-sm-6">
  ~~~
 </div>
 <div class="col-sm-6 text-right">
  ~~~~
 </div>
</div>
```

- class属性が付与できるものであればなんでもいい（formタグとか）
- class="row"の中にclass="col~~"を記述することは絶対条件

### グリッドを用いた中央寄せ

```html
<div class="col-sm-8 offset-sm-2">
```

- まずoffsetで2column埋めて、その後8column分の要素を配置する
- 残りの2columnは自動で埋め合わせてくれるので2+8+2=12で要素が中央配置になる

### [ドロップダウンリスト](https://getbootstrap.jp/docs/5.0/components/dropdowns/)

```html
　　　　　　<div class="form-group">
            <label for="job">ご職業</label>
            <select id="job" name="job" class="form-control">
              <option value="">選択してください</option>
              <option value="会社員">会社員</option>
              <option value="学生">学生</option>
              <option value="その他">その他</option>
            </select>
           </div>
```

*＊リンク先はver5.0で記述に変更がある。以下はver4.5*

- inputではなく `<select id="" name="" class=""　...>`
- 項目の追加は　**`<option value="">〇〇</option>`**
- valueはバックとの兼ね合い
- ポイントは最初のoptionを「選択してください」にしてvalueを空にしているところ
- 「その他」も必ず入れること

### [チェックボックス](https://getbootstrap.jp/docs/5.0/forms/checks-radios/)

```html
<div class="form-check">
  <input type="checkbox" name="q1" id="q1_1" value="CityPop" class="form-check-input">
  <label for="q1_1">CityPop</label>
</div>
```

- これで一項目
- 項目を増やす場合はlabelをコピペしていく
- 注意するのは、**項目ごとにidとvalueを変える**こと
- inputにid,classをつけて該当項目にlabelを付与すると、文字列にもタッチ判定ができてアクセシビリティが高くなる（チェックボックスに限らず）
- **複数選択に強い！**


### [ラジオボタン](https://getbootstrap.jp/docs/5.0/forms/checks-radios/)

```html
<div class="form-check">
  <input type="radio" name="q2" id="q2_1" value="1" class="form-check-input">
  <label for="q2_1">理解できなかった</label>
</div>
```

- チェックボックスと大体同じ
- 違うのはinputのtypeとvalue
-　**単一選択に強い！（ラジオは停止ボタンを押すと、自動的に再生ボタンの選択が解除されるから、ラジオボタンって名前になってる）**


### [縦並び](https://getbootstrap.jp/docs/5.0/forms/checks-radios/#default-stacked)・[横並び](https://getbootstrap.jp/docs/5.0/forms/checks-radios/#inline) (コード例は横並び)

```html
<label class="d-block">〇〇</label>
 <div class="form-check from-check-inline">
 　△△
 </div>
```

- 縦並びはstacked(=block) (ボタン系)
- 横並びはinline（ラベルとか）
- どちらもclassで指定する（d-block,inline）
- どの要素もデフォルトでどっちか決まっている。
- ラベルの下のボタンをinline要素にしたいとき、そのままボタンをinlineにしてしまうと、ラベルとくっついてしまう。
    - したがって、ラベルを[ブロック要素](https://getbootstrap.jp/docs/5.0/utilities/display/)にしてからボタンをinlineにする

### [テキストエリア](https://getbootstrap.jp/docs/5.0/forms/floating-labels/#textareas)

```html
<div class="form-group">
   <label for="message">その他ご意見があればご自由にご記入ください</label>
   <textarea name="message" id="message" cols="30" rows="10" class="form-control"></textarea>
</div>
```

- 高さも幅も、form-controlをクラス指定すれば自動でやってくれる


- rows=高さ
- cols＝横幅
- しかしcolsはBootstrapの機能,form-controlでrowsもcolsも自動設定してくれるので正直なくても大丈夫

### [ボタン](https://getbootstrap.jp/docs/5.0/components/buttons/#button-tags)

```html
<button type="submit" class="btn btn-primary">送信する</button>
```

- btnだけだと白色でわかりづらい
- btn-primaryはボタンの役割を指定している
- btn-primaryで役割指定するのが大切
- 色はカスタマイズで変えれるから

### [バッジ](https://getbootstrap.jp/docs/5.0/components/badge/)

```html
<label for="name">お名前 <span class="badge badge-danger">必須</span></label>
```

- Badgeクラスで対応
- HTMLでやってたspanタグによる必須アピールみたいなもの
- 役割指定もボタンと同じ

### 必須入力

```html
<input required>
```

- inout内にrequired属性を付与するだけ
- バッジと組み合わせるとGood


# 基礎知識

> normalize.css標準装備
> 
- したがって、sanitize.cssは不要

### [Container](https://getbootstrap.jp/docs/5.0/layout/containers/)
- この指定したクラスが持つ要素は、全て`conteiner` が適用され、[ブレイクポイント](https://getbootstrap.jp/docs/5.0/layout/breakpoints/)ごとで自動にレイアウトを整えてくれる。
    - `conteiner-sm,-me` のように指定することで、ブレイクポイントを調整できる
- `container` の中身の一部分だけを例外適用することはできない
    - header,footerと中身のコンテンツで幅が違うことはよく目にすると思う。そういう時のために `container` は分けて使用するのが一般的

### [グリッドシステム](https://getbootstrap.jp/docs/5.0/layout/grid/)

- **1行の中で、要素をどこにどのくらいの幅で配置したいのかを決めれる（要素の長さを短くしたり、両端配置ができる）**
- そもそもブートストラップは、1行を12個の[カラム](https://getbootstrap.jp/docs/5.0/layout/columns/)に分割してある。
- col = column , sm = small(containerと同じ認識)
- col-sm-6やcol-lg-9は併存できる＝複数のクラス指定可能
- 標準で左寄せなので、[Text-Alignment](https://getbootstrap.jp/docs/5.0/utilities/text/#text-alignment)を使う

### [オフセット](https://getbootstrap.jp/docs/5.0/layout/columns/#offsetting-columns)

- カラムの個数を調整して、要素を中央配置にしたい時に有効
- offset＝埋め合わせ