Bootstrap4の使い方と新機能「Card」について解説
- システム
エンジニア - Bootstrap4の使い方が知りたいです。
- プロジェクト
マネージャー - こちらの記事で解説していきますので、順を追って見ていきましょう。
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/[email protected]/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/[email protected]/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.
- システム
エンジニア - CDNを使ってリンクを記述すれば手軽にBootstrap4を利用することができるのですね。
- プロジェクト
マネージャー - Bootstrap4を使ってデザイン性の高いWebページを作成しましょう。
まとめ
いかがでしたでしょうか。Bootstrap4の導入方法について紹介しました。また、Bootstrap4の新機能について紹介しました。
Bootstrapを使うことで、簡単にデザイン性の高いWebページになります。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。
-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。
新着案件New Job
-
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万～30万円東京都品川区(大崎駅) -
遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万～60万円東京都港区(六本木駅) -
病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万～30万円東京都豊島区(池袋駅) -
開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万～50万円東京都豊島区(大塚駅) -
債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万～67万円東京都文京区(後楽園駅) -
PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万～55万円東京都豊島区(池袋駅)
関連記事Related Posts
-
Bootstrapでのcolの使い方とは？カラムの指定・順序と水平方向の配置
Bootstrapでのcolの使い方とは？ 今回は、Bootstrapでのグリッドシステムの使い方を説明します。 グリッドシステムでは、 containersやrowsおよびcol でレイアウト調整します。 レイアウトを […]
-
Bootstrapでのnavbarの使い方の紹介｜navbarを正しく使いこなそう
Bootstrapでのnavbarの使い方とは？ 今回は、Bootstrapでのnavbarの使い方について説明します。 navbarとは、ナビゲーションバーを表示するものです。 ここでは、以下を紹介します。 ・基本的な […]
-
Bootstrapのサンプルとは？Bootstrapのサンプルについて解説！
Bootstrapのサンプルとは？ 今回は、Bootstrapのサンプルを紹介します。 Bootstrapを利用すると、良いデザインのページを作成できます。 ここでは、 ・ボタン ・テーブル ・アラート ・ツールチップ […]
-
JavaScriptでのconfirmメソッドの使い方とは？基本的な使い方からBootstrapと組み合わせた活用方法も紹介！
JavaScriptでのconfirmメソッドの使い方とは？ 今回は、JavaScriptでのconfirmメソッドの使い方について説明します。confirmメソッドを使うと、確認ダイアログボックスが表示されます。ボタン […]
-
Bootstrapでのselectの使い方を紹介｜selectを正しく使いこなそう
Bootstrapでのselectの使い方とは？ 今回は、Bootstrapでのselectの使い方について説明します。 selectとは、セレクトボックスのことです。 複数の要素から選択できます。 ここでは、 ・基本的 […]
