.NET開発者のためのブログメディア
Bootstrap4の使い方と新機能「Card」について解説
- SE
- Bootstrap4の使い方が知りたいです。
- PM
- こちらの記事で解説していきますので、順を追って見ていきましょう。
目次
Bootstrap4の使い方を紹介します
今回は、Bootstrap4の使い方を紹介します。
ここでは、
・Bootstrap4を使えるようにする方法
・Bootstrap4を導入するとどうなる？
・Bootstrap4の新機能「Card」
・Bootstrap4の新機能「5段階のグリッド・レイアウト」
について紹介します。
Bootstrap4に興味のある方はぜひご覧ください。
Bootstrapを使えるようにする方法
Bootstrap4を使えるようにするには、2種類の方法があります。必要なファイル群をダウンロードして使う方法と、CDNを使ってリンクを記述する方法です。ここでは、手軽に利用できるCDNを利用します。
以下のようにベースのHTMLを作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> <title></title> </head> <body> Your code here! <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script> </body> </html> |
Bootstrap4を導入するとどうなる？
Bootstrapを使うと、デザインが統一され、洗練されたデザインになります。テーブルとボタンでサンプルを紹介します。Bootstrap4を使わない場合と、使った場合の違いを見てみましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<table> <caption>table</caption> <tr><th>name</th><th>age</th><th>email</th></tr> <tr><td>taro</td><td>24</td><td>taro@email.com</td></tr> <tr><td>jiro</td><td>18</td><td>jiro@email.com</td></tr> <tr><td>saburo</td><td>37</td><td>saburo@email.com</td></tr> </table> <hr> <table class="table table-striped table-bordered"> <caption>Bootstrapのtable</caption> <tr><th>name</th><th>age</th><th>email</th></tr> <tr><td>taro</td><td>24</td><td>taro@email.com</td></tr> <tr><td>jiro</td><td>18</td><td>jiro@email.com</td></tr> <tr><td>saburo</td><td>37</td><td>saburo@email.com</td></tr> </table> <hr> normal button <button type="button">Button</button> <hr> Bootstrap button <button type="button" class="btn btn-primary">Button</button> |
実行結果は以下のようになります。
See the Pen
bootstrap4_3 by kskumd (@kskumd)
on CodePen.
上側のtableはBootstrapを使っていませんので、味気ないtableになっています。下側のtableはBootstrapを使っているので、デザイン性の高いtableになっています。
Bootstrap4の新機能「Card」
Bootstrap4の新機能「Card」について紹介します。Cardは以下のようなコンテナです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="card" style="width: 18rem;"> <div class="card-header"> Card Header </div> <div class="card-body"> <h5 class="card-title">Card title</h5> <p class="card-text">This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.This is card text.</p> <button type="button" class="btn btn-primary">Button</button> </div> <div class="card-footer"> Card Footer </div> </div> |
実行結果は以下のようになります。
See the Pen
bootstrap4_2 by kskumd (@kskumd)
on CodePen.
Bootstrap4の新機能「5段階のグリッド・レイアウト」
Bootstrap4で、グリッド・レイアウトが5段階になりました（Bootstrap3は4段階）。グリッド・レイアウトの使い方を紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="container-fluid"> <div class="row"> <div class="col-sm border border-primary">A</div> <div class="col-sm border border-primary">B</div> <div class="col-sm border border-primary">C</div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-sm-2 border border-primary">A</div> <div class="col-sm-8 border border-primary">B</div> <div class="col-sm-2 border border-primary">C</div> </div> </div> |
実行結果は以下のようになります。画面の横幅を狭めてみてください。
下記は埋め込み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ページになります。
ぜひご自身でソースコードを書いて、理解を深めてください。
