概要
v3 → v4 移行における変更点まとめ
grid
Bootstrap4 グリッド・オプション external_link
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 external_link
ex. .hidden-xs
→ .d-none.d-sm-block
対応表↓
https://cccabinet.jpn.org/bootstrap4/utilities/display#hiding-elements external_link
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
<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
<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 external_link
アイコンつきのフォーム
-
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 external_link- 以下のようにクラスをつければ再現するようにしました(https://github.com/weseek/growi/pull/1663/files#diff-a0759896cbe248abec0166a1e997b27dR22 external_link)
div.custom-control.custom-checkbox.custom-checkbox-{{ theme-color }} > input.custom-control-input + label.custom-control-label
- 以下のようにクラスをつければ再現するようにしました(https://github.com/weseek/growi/pull/1663/files#diff-a0759896cbe248abec0166a1e997b27dR22 external_link)
v3
<div class="checkbox checkbox-info"> <input type="checkbox" id="example" /> <label htmlFor="example">example</label> </div>
v4
<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 external_link
v3
<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
<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 external_link
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 管理が不要な場合
- state 管理が必要な場合
- reactstrap の progress bar を使用する
label
v4では Badge に統一
badge
v4 では丸みが弱くなっている。v4 のピルバッヂというのが v3 の丸みの強いバッヂに当たる
変更内容: .badge-pill
を追加
badge-defalut
は廃止されたので badge-secondary
を使用
tab
help-block
https://cccabinet.jpn.org/bootstrap4/components/forms external_link
公式推奨の変更方法は
.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 external_linkより
-
closeBtn を表示させるためには ModalHeader に props として Modal を閉じるメソッドを渡す。
-
調整例: https://github.com/weseek/growi/pull/1719/files external_link
dropdown
変更点
- キャレット(▼): の設定は不要
- ドロップメニュー:ul.dropdown-menu > li > a ⇒ div.dropdown-menu > a.dropdown-item
- メニューが開いた状態:.dropdown.open ⇒ .dropdown.show
https://cccabinet.jpn.org/bootstrap4/components/dropdowns#single-button external_link