# 概要
v3 → v4 移行における変更点まとめ

## grid
[Bootstrap4 グリッド・オプション](https://cccabinet.jpn.org/bootstrap4/layout/grid#grid-options)
| v3               | v4                | 備考                                                                                                 |
| ---------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
| .col-xs-N        | .col-N, .col-sm-N | 前者が極小（全サイズに適用）、後者が小 |
| .col-sm-N        | .col-md-N         | 中                                                                                                   |
| .col-md-N        | .col-lg-N         | 大                                                                                                   |
| .col-lg-N        | .col-xl-N         | 特大                                                                                                 |
| .col-XX-offset-N | .offset-XX-N      | 空白                                                                                                 |
| .clearfix        | .w-100            | 改行                                                                                                 |
## 非表示クラス
hidden-xx など

変更内容はこれが分かりやすい↓

https://webnetamemo.com/coding/bootstrap4/201710015697#v4-hidden

ex. `.hidden-xs` → `.d-none.d-sm-block`

対応表↓

https://cccabinet.jpn.org/bootstrap4/utilities/display#hiding-elements

## well

| v3            | v4                     | 備考 |
| ------------- | ---------------------- | ---- |
| .well         | .card.well       |      |
| .well.well-lg | .card.well  .p-5 |      |
| .well.well-sm | .card.well  .p-2 |      |

- card は元 panel 用に利用したいので、well用のcardの方は独自で .card-well クラスを用意
## panel

| v3                   | v4           | 備考       |
| -------------------- | ------------ | ---------- |
| .panel.panel-default | .card        | 全体       |
| .panel-heading       | .card-header | ヘッダ     |
| .panel-body          | .card-body   | コンテンツ |
| .panel-footer        | .card-footer | フッタ     |

## form
- `form` タグの `form-horizontal` クラスを削除
- `form` タグの中の `div` タグに `row` クラスを追加
- `col-xs-6` などのクラスを `col-6` に変更
- `.control-label`クラスを `col-form-label` に変更
    
### 例
- v3
```html
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail" class="col-sm-2 control-label">Eメール</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Eメール">
    </div>
  </div>
</form>
```
- v4
```html
<form>
  <div class="form-group row">
    <label for="inputEmail" class="col-sm-2 col-form-label">Eメール</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail" placeholder="Eメール">
    </div>
  </div>
</form>
```

## input group
https://cccabinet.jpn.org/bootstrap4/components/input-group

アイコンつきのフォーム

- v3
    - div.input-group > span.input-group-addon + input.form-control
    ```
    <div class="input-group">
      <span class="input-group-addon" id="basic-addon1">@</span>
      <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
    </div>
    ```

- v4
    - div.input-group.mb-3 > div.input-group-prepend + input.form-control
    ```
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1">@</span>
      </div>
      <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1">
    </div>
    ```
## checkbox
- `checkbox-{color}` はagile-admin仕様
https://cccabinet.jpn.org/bootstrap4/components/forms#default-stacked
    - 以下のようにクラスをつければ再現するようにしました(https://github.com/weseek/growi/pull/1663/files#diff-a0759896cbe248abec0166a1e997b27dR22)
        ```
        div.custom-control.custom-checkbox.custom-checkbox-{{ theme-color }}
         > input.custom-control-input + label.custom-control-label
        ```
### v3
```html
<div class="checkbox checkbox-info">
  <input
    type="checkbox"
    id="example"
  />
  <label htmlFor="example">example</label>
</div>
```

### v4
```html
<div class="custom-control custom-checkbox custom-checkbox-info">
  <input
    type="checkbox"
    class="custom-control-input"
    id="example"
  />
  <label class="custom-control-label" htmlFor="example">example</label>
</div>
```

## radio button
- `radio-{color}` はagile-admin仕様
https://cccabinet.jpn.org/bootstrap4/components/forms#default-stacked

### v3
```html
<div className="radio radio-primary radio-inline">
    <input
        type="radio"
        id="radioLangEn"
        name="globalLang"
        value="en-US"
        checked={adminAppContainer.state.globalLang === 'en-US'}
        onChange={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
    />
    <label htmlFor="radioLangEn">{t('English')}</label>
</div>
```

### v4
```html
<div className="custom-control custom-radio custom-control-inline">
    <input
        type="radio"
        id="radioLangEn"
        className="custom-control-input"
        name="globalLang"
        value="en-US"
        checked={adminAppContainer.state.globalLang === 'en-US'}
        onChange={(e) => { adminAppContainer.changeGlobalLang(e.target.value) }}
    />
    <label className="custom-control-label" htmlFor="radioLangEn">{t('English')}</label>
</div>
```
    
## button
### btn-default
v4では廃止されてるのでbtn-light で代用
https://cccabinet.jpn.org/bootstrap4/components/buttons

Before:

`<button type="button" className="btn btn-sm btn-default mr-2" onClick={this.checkAll}>`

After:
            
`<button type="button" className="btn btn-sm btn-light mr-2" onClick={this.checkAll}>`

### btn-outline
`.btn.btn-outline.btn-{themecolor}` → `btn btn-outline-{theme-color}`

### 角丸ボタン
`.btn-rounded` → `rounded-pill`

### ボタンないの文字列の折り返しを無効化
`.btn.text-nowrap`
 
## progress bar
- state 管理が不要な場合
    - 色の指定方法など変更
    - https://cccabinet.jpn.org/bootstrap4/components/progress
- state 管理が必要な場合
    - reactstrap の progress bar を使用する
        - https://reactstrap.github.io/components/progress/
    
## label
v4では Badge に統一
    
## badge
v4 では丸みが弱くなっている。v4 のピルバッヂというのが v3 の丸みの強いバッヂに当たる

変更内容: `.badge-pill` を追加

`badge-defalut` は廃止されたので `badge-secondary` を使用

## tab
[reactstrap を用いる](https://tips.weseek.co.jp/5e424e61decd0a0049953ae1)
    
## help-block
https://cccabinet.jpn.org/bootstrap4/components/forms
    
公式推奨の変更方法は
    
.help-block → .form-text.text-muted

## Modal
reactstrap の Modal を使用
- ModalHeader は default で h5 なので `tag="h4"` を指定する。
    > ***ModalHeader:** ModalHeader now defaults to h5 instead of h4. If you still need h4 add tag="h4"  
    
    reactstrap 公式の [changelog](https://github.com/reactstrap/reactstrap/search?p=2&q=ModalHeader&unscoped_q=ModalHeader)より
- closeBtn を表示させるためには ModalHeader に props として Modal を閉じるメソッドを渡す。
- 調整例: https://github.com/weseek/growi/pull/1719/files

    
## dropdown

変更点

- キャレット（▼）：<span class="caret"></span> の設定は不要
- ドロップメニュー：ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
- メニューが開いた状態：.dropdown.open ⇒ .dropdown.show

https://cccabinet.jpn.org/bootstrap4/components/dropdowns#single-button


---

## Page Navigation

- Canonical URL: https://dev.growi.org/開発日記/bootstrap4化/汎用的な変更点
- Permalink: https://dev.growi.org/5e142eaf61c1a10048c26ea8
- Parent: [bootstrap4化](/5e14092061c1a10048c26e7f.md)
- Children: 0 total
- Total descendants: 0
- Siblings: 4 total
  - [admin配下ページ](/5e140da461c1a10048c26e85.md)
  - [agile-adminに関する注意点](/5e4b80a868584d00488b5c92.md)
  - [フォームのレスポンシブ対応](/5ea006de8cbaec0048e04734.md)
  - [棚卸しMTG](/5e86ffa4c5b3f400482f183f.md)
- Last updated: 2020-04-03T07:56:56.443Z by yusuektk
- Full page listing (all children regardless of count): https://dev.growi.org/_api/v3/page-listing/children?id=5e142eaf61c1a10048c26ea8