.net column
.NET開発者のためのブログメディア

データの表示

Bootstrap4の使い方と新機能「Card」について解説

2021年01月29日
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ページになります。

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


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags