概要

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

grid

Bootstrap4 グリッド・オプション external_link

v3v4備考
.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

v3v4備考
.well.card.well
.well.well-lg.card.well .p-5
.well.well-sm.card.well .p-2
  • card は元 panel 用に利用したいので、well用のcardの方は独自で .card-well クラスを用意

panel

v3v4備考
.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

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

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-roundedrounded-pill

ボタンないの文字列の折り返しを無効化

.btn.text-nowrap

progress bar

label

v4では Badge に統一

badge

v4 では丸みが弱くなっている。v4 のピルバッヂというのが v3 の丸みの強いバッヂに当たる

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

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

tab

reactstrap を用いる external_link

help-block

https://cccabinet.jpn.org/bootstrap4/components/forms external_link

公式推奨の変更方法は

.help-block → .form-text.text-muted

reactstrap の Modal を使用

変更点

  • キャレット(▼): の設定は不要
  • ドロップメニュー: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