技術情報

No Image

bootstrap4のサポート期間が2023年1月に設定されたことからbootstrap5に徐々に移行させているという方も多いと思います。そこでbootstrap4 → 5で名称が変わったよく使うクラス名: ml, pl, mr, p ...

技術情報

bootstrap 5α

Bootstrapの次世代verのα版がリリース

あくまでα版なので動作は不安定で、実際に採用するのは安定するβ版まで待つことをお勧めしますが、Bootstrapの次世代verがリリースされました。

まだ不安定とのことですが ...

技術情報

bootstrap5α バッジ

デザインは大きな変更なし

デザインはあまり変わっていないですね。まぁ細かいこと言えば、角の曲率とか色味とかが違います。文字の大きさが微妙に違うのはh2タグの文字の大きさがbootstrap5と4で計算方法が変わったためですね。

技術情報

bootstrap5α アラート

セカンダリーアラートの配色が変更

下の画像に示した通り、secondary alertの色が灰色から紫に変更されています。それ以外はほぼ同じですね。色味とか文字の太さとかpaddingとかも若干は変更されています。

技術情報

Bootstrap5α カード

シャドウエフェクトの濃さが変わった

カードはシャドウエフェクトの濃さが変わって、分かりにくくなりましたね。

まぁまだα版なので、変わるかもしれませんが。


ヘッダーとフッターもほぼ同じ

カードのヘッダ

技術情報

Bootstrap5α ボタングループ

ボタングループは新機能なし

とりたてて変更になったことはありません。角の曲率が丸くなったくらいですかね。

ボタンとボタンの境界がわかりにくいのは今後変わる可能性があるので、まだ何とも言えません。


技術情報

bootstrap5α ボタン

ボタンは大きさと角の曲率が変更

paddingで大きさを変えているので、paddingをカスタムで変えれば大きさは自分で変えられますが、一応デフォルトの大きさが変わっています。あとはバッジと同様に角の曲率が5αの方が丸みが強くなっていま ...