えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック

Bootstrap4の便利なクラスまとめ

リノバス制作部の小林です。

2018/1/18にBootstrap v4.0.0が公開されました。メジャーアップデートだと変更点が多くなかなかバージョンアップに踏み切れなかったりします。

そこで今回の記事では、まだBootstrap4にバージョンアップを踏み切れない方やBootstrap4を使用していない方に向けて、Bootstrap4の便利なクラスをご紹介したいと思います!

余白を指定するクラス

これはものすごくよく使用するクラスです。

コーディングをしていると、「ここの上に余白欲しいなー」と思ったことが絶対にあると思います。
その都度クラスを書き足して、CSSを書き足すのは大変な作業だと思います。

そんな時に、上記のクラスを書き足すことで「padding」や「margin」を簡単にとることができます。

数字の部分を1~5まで指定することができ、下記の余白を取ることができます。

  • 1を指定すると、「.25rem」
  • 2を指定すると、「.5rem」
  • 3を指定すると、「1rem」
  • 4を指定すると、「1.5rem」
  • 5を指定すると、「3rem」

文字を太くするクラス

このクラスも、ちょっとしたところで使いたくなるクラスです。

「p」タグや「span」などに「font-weight-bold」を指定することで、「font-weight:bold」が指定されます。
上記の「font-weight-bold」のテキストにに対して「span class=”font-weight-bold”」をかけているため、太く表示されていると思います。

表示・非表示クラス

この表示・非表示クラスもよく使用します。このクラスを使用しないと、cssでメディアクエリを使用して、「display:none」を指定していましたが、このクラスを使用することにより簡潔に記述することができます。

この表示・非表示クラスですが、Bootstrap4 beta版からBootstrap4 alpha版にバージョンアップの際にクラス名が変更になりました。

全部は紹介しきれませんが、よく使用するクラスをご紹介したいと思います。

画面サイズ クラス
xs~mdは非表示/lg~xlは表示 .d-block .d-lg-none
xs~mdは表示/lg~xlは非表示 .d-none .d-lg-block
mdのみ表示 .d-md-none .d-lg-block

テーブルクラス

0から組むと大変時間がかかってしまうテーブルも「Bootstrap4」の標準装備を使用すれば、いい感じのテーブルレイアウトを組むことができます。

シンプルなテーブルレイアウト

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

ストライプ形式のテーブルレイアウト

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

カラークラス

primary

secondary

success

danger

Warning

info

light

black

Bootstrap4には、標準でテーマカラーと呼ばれる上記の8つのカラーが備わっています。

「btn(ボタン)」・「table(テーブル)」・「border(枠線)」・「bg(背景)」・「text(文字)」に対して、「.btn-primary」や「.bg-danger」や「.text-info」のように指定することにより、カラー変更することができます。

本来「primary」は、上記でご紹介した青色ですが、前回「かゆい所に手が届く!Bootstrap4カスタマイズ方法!(テーマカラー編)」でご紹介した方法を用いているため、下記の例ではリノバスのテーマカラーが反映されています。

Bootstrap4では、テーマカラーを上書きする方法でなく、独自のテーマカラーを簡単に追加できるようになっています。
その方法は、次回の記事でご紹介したいと思います。

btn(ボタン)

border(枠線)

Hello World Hello World Hello World Hello World Hello World Hello World

「border-top-0」・「border-right-0」・「border-bottom-0」・「border-left-0」を指定することにより、こういった表現もできます。

Hello World Hello World Hello World Hello World

「border-top-0」・「border-right-0」・「border-bottom-0」・「border-left-0」を組み合わせることによって、「下線のみ」や「両端のみ」の表現もできます。

Hello World Hello World

text(文字)

Primary

Secondary

Success

Danger

Warning

Info

少しアクセントが欲しい時などに、非常に重宝するクラスになっています。

まとめ

今回ご紹介したクラスは、Bootstrap4のクラスのほんの一部分です。

Bootstrap4にはまだまだ便利な機能が備わっていますので、Bootstrap3を使用してきた方はぜひバージョンアップを、使用したことがない方はぜひ使用してみてください。

気になる方はぜひ公式ページをご覧ください。

えっ!?まだスマホで見にくいんですか?スマホ最適化リノバスなら標準仕様です。ウェブ制作会社にお困りなら今すぐチェック