Bootstrap 5α ボタン

2020年6月28日

bootstrap5α ボタン

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

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

下の例は一番左が「btn」と「btn-primary」以外に「btn-sm」classを追加した場合、真ん中が何も追加しなかった場合、右が「btn-lg」classを追加した場合です。

ボタンの角をさらに丸くするclassが追加

「btn-rounded」というclassが追加されました。これによって、ボタンをさらに丸くできます。下の例は「btn-outline-*」と「btn-rounded」の組み合わせ。

使用するclass

button要素に設定するclass

  • btn
  • btn-*
  • btn-outline-*
  • btn-rounded
  • btn-sm
  • btn-lg

別途button要素にtypeとしてbuttonやsubmitを設定する必要があります。

※Bootstrapのmaterial design toolkitで比較しております。

※コードは公式サイトを参照ください。

技術情報bootstrap

Posted by Nao