Bootstrapがデフォルトで用意しているクラス名の効果を別のクラス名にも適用する

Question

最近Bootstrap3からBootstrap4にバージョンアップしました。

問題は、Bootstrapがデフォルトで用意してくれているクラスの名前が変わった事です。

例えばlabelタグはBootstrap3では

<span class="label label-info">Info Label</span>

とすればlabelを装飾してくれますが、Bootstrap4では同じような装飾をするには

<span class="tag tag-default">Default</span>

となります。

いずれ全てBootstrap4のクラスに直したいとは思いますが、現在使っているツールがデフォルトで

class="tag tag-default"

の要素を作ってしまう状態で、Bootstrap4だと何も装飾されない状態になってしまいます。

この場合、HTMLでは

class="tag tag-default"

のまま

class="label label-info"

の効果をつける事はできるのでしょうか？よろしくお願い致します。

Answer 1

Bootstrap3→4では、かなり変更点があるので現段階ではBootstrap3のまま運用し、リニューアルなどのタイミングでBootstrap4に切り替え構築しなおすのがよいかと思います。
全体的ではグリッドが4つから5つに増えたりしてますので新しく増えた分のメディアクエリに対しての追加だったり修正の工数が相当かかるかと。

妙なバッティングなどが起きる可能性や煩雑になるので本当にオススメしませんが、Bootstrap3のCSSのあとにBootstrap4のCSSを読み込めば同じものは4に上書きされますし4にないものは3のCSSが適用されます。

あとご質問のですがclass="tag tag-default"ならばBootstrap4にあるのでスタイルはあたるはずですが…
おそらくCSSがBootstrap3のままなのかと思います。

逆に4にしていて.labelに.tagの効果をつけるというのであれば.tagのところすべてに.labelの分を追加していくしかないと思います。

Answer 2

現在使っているツールがbootstarp3のclassしか吐けない時は、scssを使えるのであれば

.label {
  @extend .tag;
}

.label-info {
  @extend .tag-info;
}

とすることで比較的簡単にbootstrap4の定義内容をbootstap3のクラス名で使えるようになります。

Comments

[WanOOOOOO]

横からすみません。これだけでｓｐやｈｏｖｅｒ等も対応できるのですか？
特にｈｏｖｅｒやｄｉｓａｂｌｅｄ等状態変化のスタイルが沢山あるのでこれ１つで対応できるなら便利だから覚えておきたくて・・・
それともやはり対応させたいものの数だけ書くのでしょうか？

[hisataka]

できました！@extendで継承的なことができるのですね。ありがとうございます！！

[WanOOOOOO]

タイムリーに
全部まとめて大丈夫なんですね！覚えておきます！

[gin]

補足しておきます。

さすがに全部っていうのはないです。
コンパイルすると、
-------
.tag,
.label {}
-------
こうなるという意味なので。
継承したいものがあればその分、書く感じになります。

今回は使用していて変更になったclassが少なくレスポンシブも崩れず大丈夫だったということだと思います。
それならこちらのほうが早いですね。
私の回答はガッツリ使ってるひとや業務用向けみたいなものなので…^^;

あ、Sassやってたの2年以上前なので継承新しくなってたらごめんなさい。