Bootstrap3からBootstrap4にCSS移行するための備考

12102 ワード
HTML Bootstrap3 bootstrap4 CSS HTML テキストリンク

概要

Bootstrap3では使えて、Bootstrap4では使えない機能は結構あります。
その時に参考するのがこちらのサイト。めちゃくちゃお世話になっています。

Bootstrap4移行ガイド

ですが、そこに書かれている記述のまま転記しても同等に利用できない事例もあったりするため、
そのようなものが発生した場合の解決をメモ代わりに利用しています。

なおscssで編集を行っています。

対象のクラス

btn-xs

Bootstrap4では消えました。
ですが、どうしても使いたいことは結構あります。
ほら、テーブルのボタンとか……ヘッダー右揃えで目立たないコンフィグボタンとか……。

そんなわけで、作ってしまいます

app.scss
$btn-padding-x-xs: .20rem !default;
$btn-padding-y-xs: .12rem !default;
$input-btn-line-height-xs: 1.1 !default;

.btn.btn-xs {
  @include button-size($btn-padding-y-xs, $btn-padding-x-xs, $font-size-sm, $input-btn-line-height-xs, $btn-border-radius-sm);
}
index.html

<button type="button" class="btn btn-xs btn-primary">めっちゃ小さいボタン</button>

なお.btn-xsのサイズはBootstrap3のマイナーバージョンの番号によって地味にサイズが異なるので、入れてみてから「なんか違うな」となったら変数を変更しましょう。

well

Bootstrap4ではこいつも消えました。
具体的には.card系と統合になったとのこと。
では.cardで統合してしまいましょう。

index.html

<div class="card card-body bg-light mb-3">
    wellの中身
</div>

と書きたいところですが、ちょっと待った！
実はこのように記述すると、ボタンやバッジを以下のように記述したとき、同等に表示されなくなります。

index.html

<div class="card card-body mb-3">
    <button type="button" class="btn btn-danger mb-3">なぜかブロックになってるボタン</button>
    <span class="badge badge-danger">なぜかめちゃくちゃ長いバッジ</span>
</div>

こんな感じになります↓

その理由としては、cardにはdisplay: flexが指定されており、card-body側でそれを打ち消す処理は特に入れていないから。
クラスの中身を編集しても構いませんが、面倒なのでdivの階層構造だけで対応してしまいましょう。

index.html
<div class="card bg-light mb-3">
    <div class="card-body">
        wellの中身
    </div>
</div>

なんか釈然としませんが、だいたい解決します。
ちなみにちょっとだけ色合いが違いますが、以下のように解決してもいいと思います。

index.html

<div class="alert alert-secondary">
    アラート<br>
    <button type="button" class="btn btn-primary">アラート内ボタン</button>
</div>

ボタンなども問題なく描画されます。

bs-callout

これはbootstrap3にも4にもそもそも収録されていないやつですが、
Bootstrap公式サイトでtipsなどに利用されているクラスの再現です。

app.scss

.bd-callout {
  padding: $card-spacer-x;
  margin-top: $card-spacer-x;
  margin-bottom: $card-spacer-x;
  border: $card-border-width solid $card-border-color;
  border-left-width: .25rem;
  border-radius: $card-border-radius;
  background-color: $white;
  h2,h3,h4,h5 {
    margin-top: 0;
    margin-bottom: .25rem
  }
  p:last-child {
    margin-bottom: 0
  }
  code {
    border-radius: $border-radius;
  }
}

.bd-callout-primary{
  border-left-color: $primary;
  h2,h3,h4,h5 {
    color: $primary
  }
}

.bd-callout-secondary{
  border-left-color: $secondary;
  h2,h3,h4,h5 {
    color: $secondary
  }
}
.bd-callout-success {
  border-left-color: $success;
  h2,h3,h4,h5 {
    color: $success
  }
}
.bd-callout-info {
  border-left-color: $info;
  h2,h3,h4,h5 {
    color: $info
  }
}
.bd-callout-warning {
  border-left-color: $warning;
  h2,h3,h4,h5 {
    color: $warning
  }
}
.bd-callout-danger {
  border-left-color:$danger;
  h2,h3,h4,h5 {
    color: $danger
  }
}
.bd-callout-light {
  border-left-color: $light;
  h2,h3,h4,h5 {
    color: $light
  }
}
.bd-callout-dark {
  border-left-color: $dark;
  h2,h3,h4,h5 {
    color: $dark
  }
}

$whiteは公式の変数宣言ではなく自分で必要に迫られて書いた気がしますが、覚えてないのでこのまま。
エラーが出たら宣言してあげてください。

なにか発生するたびに増える予定...