SE

Bootstrap4の使い方が知りたいです。

PM

こちらの記事で解説していきますので、順を追って見ていきましょう。

Bootstrap4の使い方を紹介します

今回は、Bootstrap4の使い方を紹介します。
ここでは、
・Bootstrap4を使えるようにする方法
・Bootstrap4を導入するとどうなる？
・Bootstrap4の新機能「Card」
・Bootstrap4の新機能「5段階のグリッド・レイアウト」
について紹介します。

Bootstrap4に興味のある方はぜひご覧ください。

Bootstrapを使えるようにする方法

Bootstrap4を使えるようにするには、2種類の方法があります。必要なファイル群をダウンロードして使う方法と、CDNを使ってリンクを記述する方法です。ここでは、手軽に利用できるCDNを利用します。
以下のようにベースのHTMLを作成します。

Bootstrap4を導入するとどうなる？

Bootstrapを使うと、デザインが統一され、洗練されたデザインになります。テーブルとボタンでサンプルを紹介します。Bootstrap4を使わない場合と、使った場合の違いを見てみましょう。

実行結果は以下のようになります。

See the Pen
bootstrap4_3 by kskumd (@kskumd)
on CodePen.

上側のtableはBootstrapを使っていませんので、味気ないtableになっています。下側のtableはBootstrapを使っているので、デザイン性の高いtableになっています。

Bootstrap4の新機能「Card」

Bootstrap4の新機能「Card」について紹介します。Cardは以下のようなコンテナです。

実行結果は以下のようになります。

See the Pen
bootstrap4_2 by kskumd (@kskumd)
on CodePen.

Bootstrap4の新機能「5段階のグリッド・レイアウト」

Bootstrap4で、グリッド・レイアウトが5段階になりました（Bootstrap3は4段階）。グリッド・レイアウトの使い方を紹介します。

実行結果は以下のようになります。画面の横幅を狭めてみてください。
下記は埋め込みURLのため、横幅を広げても変動しないので、自分でHTMLを書いてみてください。

上側の例では、画面サイズが sm 以上の時は 3分割となり、それより小さくなると縦方向に並ぶことが分かります。
下側の例では、画面サイズが sm 以上の時は 2:8:2 の割合となり、それより小さくなると縦方向に並ぶことが分かります。

See the Pen
bootstrap4_1 by kskumd (@kskumd)
on CodePen.

SE

CDNを使ってリンクを記述すれば手軽にBootstrap4を利用することができるのですね。

PM

Bootstrap4を使ってデザイン性の高いWebページを作成しましょう。

まとめ

いかがでしたでしょうか。Bootstrap4の導入方法について紹介しました。また、Bootstrap4の新機能について紹介しました。
Bootstrapを使うことで、簡単にデザイン性の高いWebページになります。

ぜひご自身でソースコードを書いて、理解を深めてください。