Bootstrapとは－入門からBootstrap4の管理画面のテンプレート利用まで。

Bootstrapは、UIまで手が回らないエンジニアにうれしい「CSSやJavaScript」のライブラリです。デザイン面のすぐれた豊富なテンプレートに加え、デバイスやブラウザ依存を吸収してくれます。この記事ではBootstrapの入門知識からBootstrap4の管理画面用のテンプレートの利用まで解説していきます。

最終的にはすぐれたデザインのテンプレートを使いこなしたいですが、少々知識がないとテンプレートのカスタマイズが難しいと思います。そこでHTML、CSS、JavaScriptのおさらいから入り、管理画面を想定したサンプルを作りながら、bootstrapの入門知識を解説していきたいと思います。

1. bootstrapとは

bootstrapとは、UIまで手が回らないエンジニアにうれしい「HTML、CSS、およびJSを使用して開発するためのオープンソースのツールキット」です。

Sassの変数とmixin、レスポンシブグリッドシステム、豊富なビルド済みコンポーネント、およびjQuery上に構築された強力なプラグインを使用して、アイデアをすばやくプロトタイプ作成したり、アプリケーション全体のUIが構築できます。

2. HTML、CSS、JavaScript、jQueryの入門知識

bootstrapについて見ていく前にHTML、CSS、JavaScript、jQueryの入門知識を見ていきます。

HTML

ホームページなどのページはHTML／CSSを記述して表示します。HTMLは構造をCSSはデザインを決めます。この記事では、HTMLと、右寄せなどCSSの入門知識を解説しています。

詳細

JavaScript

JavaScriptとは、IEやChrome、FirefoxなどWebブラウザで動かせるプログラミング言語です。プロトタイプ式のオブジェクト指向で、 Javaなどの一般的なオブジェクト指向のプログラミング言語と異なるオブジェクト指向言語となっています。

詳細

jQuery

jQueryとは、ブラウザ用のJavaScriptライブラリです。特にブラウザに依存しないオープンソースのセレクタが特徴です。セレクタを使用したCSSやHTMLタグのDOM操作などJavaScriptコードをそのまま書くより簡単にコードが記述できます。

詳細

3. bootstrapのダウンロード

bootstrapは「https://getbootstrap.com/」からダウンロードできます。またBootstrapCDNから直接ソースで取り込んで利用できます。

4. bootstrap実践1（Hello Bootstrap）

「Hello Bootstrap!!」を表示するサンプルを作りながら、「viewport」、「bootstrap.min.css」の取り込みについて解説していきます。なお、ダウンロードしたファイルにはたくさんファイルがありますが、入門ということでシンプルに「bootstrap.min.css」のみ使います。

viewport

まずは以下のような「Hello Bootstrap!!」と表示するコードを表示してみます。

構成

/test
└─sample.html

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello Bootstrap!!</title>
</head>
<body>
Hello Bootstrap!!
</body>
</html>

ポイント

bootstrapは使用していませんが、bootstrapの基本として上記のような「viewport」を定義します。「viewport」は、PC向けサイトをスマホで表示すると、文字などが小さすぎて閲覧しづらくなる問題を回避する指定です。

「bootstrap.min.css」の取り込み

「bootstrap.min.css」を取り込むことでフォントがきれいになります。

構成

/test
│  sample.html
└─css
        bootstrap.min.css

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello Bootstrap!!</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
Hello Bootstrap!!
</body>
</html>

ポイント

CSSファイルはheadタグの中で取り込む取り込みます。「bootstrap.min.css」を取り込むことでデフォルトのスタイルがbootstrap仕様に替わります。

5. Bootstrap実践2（ログインフォーム）

今度はログインフォームの作成を目指しながら、Bootstrapの実践知識を補足していきます。

ログインフォームのHTML

まずはログインフォームのHTMLを見ていきます。「bootstrap.min.css」を取り込んだだけですが、素よりきれいですね。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

まだ「bootstrap.min.css」を取り込んだだけです。 account-icon.pngは自作したものです。

青いボタン（btn btn-primary）

今度はボタンをカスタマイズして青いボタンに変更していきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form>
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

bootstrapで青いボタンを表示するにはclass属性に「btn btn-primary」を指定します。

水平方向に中央寄せ（text-center）

今度はログインフォームを水平方向の中央に寄せていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<form class="text-center">
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

あるブロック内で左右水平方向の中央に寄せたい場合はclass属性に「text-center」を指定します。

垂直方向に中央寄せ（独自のスタイル適用）

今度はログインフォームを垂直方向に中央に寄せていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center">
<h1><img src="img/account-icon.png" alt="ログイン"/></h1>
<p><input type="email" placeholder="メールアドレス" required autofocus></p>
<p><input type="password" placeholder="パスワード" required></p>
<p><a href="#">パスワードをお忘れの場合</a></p>
<p><button class="btn btn-primary" type="submit">ログイン</button></p>
</form>
</body>
</html>

ポイント

bootstrapでの画面の垂直方向に中央寄せする方法は見当たりませんでした。独自のスタイルを適用することでかゆい所は解決できます。

カード形式の枠を作る（card、card-XXX）

今度はログインフォームにカード形式の枠をつけていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center card">
<div class="card-body">
<h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1>
<p class="card-text"><input type="email" placeholder="メールアドレス" required autofocus></p>
<p class="card-text"><input type="password" placeholder="パスワード" required></p>
<p class="card-text"><a href="#">パスワードをお忘れの場合</a></p>
<p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p>
</div>
</form>
</body>
</html>

ポイント

bootstrapの「card」「card-body」「card-title」「card-text」などの「card-XXX」を使用してカード形式を作ることができます。

フォームに効果をつける（form-control）

今度はログインフォームにカード形式の枠をつけていきます。

構成

/test
│  sample.html
├─css
│      bootstrap.min.css
└─img
        account-icon.png

sample.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ログイン</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
html {
	height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table;
}
body {
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	display: table-cell;
	vertical-align: middle;
}
</style>
</head>
<body>
<form class="text-center card">
<div class="card-body">
<h1 class="card-title"><img src="img/account-icon.png" alt="ログイン"/></h1>
<p class="card-text"><input class="form-control" type="email" placeholder="メールアドレス" required autofocus></p>
<p class="card-text"><input class="form-control" type="password" placeholder="パスワード" required></p>
<p class="card-text"><a href="#">パスワードをお忘れの場合</a></p>
<p class="card-text"><button class="btn btn-primary" type="submit">ログイン</button></p>
</div>
</form>
</body>
</html>

ポイント

bootstrapの「form-control」を指定するとフォームに効果がつけられます。

6. Bootstrap実践3（ダッシュボード）

今度はログイン後のダッシュボードの作成を目指しながら、Bootstrap実践知識を捕捉していきます。

bootstrapの開始テンプレート（使用するCSSとJSファイル）

まず初めにbootstrapの開始テンプレートについて見ていきます。

必要なファイル

bootstrap.min.cssに加えて、一部のコンポーネントでJavaScriptを使用していますので、bootstrap.min.jsが必要です。さらにそれらが使用するjquery、popperといったJavaScriptの外部ライブラリが必要です。

以下のファイルをダウンロードしてから保存して取り込むか、直接URL指定して取り込みます。

bootstrap.min.cssの取得URLの例）
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
bootstrap.min.jsの取得URLの例）
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
jqueryの取得URLの例）
https://code.jquery.com/jquery-3.3.1.slim.min.js
popperの取得URLの例）
https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js

bootstrapの開始テンプレート

bootstrapの開始テンプレートは以下になります。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
ダッシュボード
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

コードの表示例

コードの表示例です。

レイアウト（container）

コンテナは基本のレイアウトでグリッドシステムで入れ子にする場合に必要になります。「container」を指定すると、幅568、768、992、1200のブレークポイントで固定幅のコンテナ（ブレークポイントで max-width が変わる）切り替えてくれます。

以下は「container」のサンプルです。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
	background-color:#614983;
	color:#ffffff;
}
</style>
</head>
<body>
<div class="my-bg-color container">
ダッシュボード
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

※my-bg-colorは独自に定義したスタイルです。

コードの表示例

コードの表示例です。

ポイント

レイアウト（container-fluid）

viewport 全体に広がる全幅で利用するには、container-fluidを使います。

以下は「container-fluid」のサンプルです。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
	background-color:#614983;
	color:#ffffff;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
ダッシュボード
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

コードの表示例

コードの表示例です。

ポイント

viewport 全体に広がる全幅で利用するには、container-fluidを使います。

グリッドシステム（rowとcol）

グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本としてrowを指定した領域の中にcolを配置します。

以下は「rowとcol」のサンプルです。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
	background-color:#614983;
	color:#ffffff;
}
.my-content-bg-color {
	background-color:#cccccc;
	color:#000000;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
<div class="row">
<div class="col">ロゴ</div>
<div class="col">アカウント情報</div>
</div>
<div class="row">
<div class="col">メニュー</div>
<div class="my-content-bg-color col">コンテンツ</div>
</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

※my-content-bg-colorは独自に定義したスタイルです。

コードの表示例

コードの表示例です。

ポイント

グリッドシステムを使用するとレイアウトの配置が簡単に行えます。基本としてrowを指定した領域の中にcolを配置します。 colを指定すると等間隔で表示されるようになります。

グリッドシステム（ネスト）

グリッドでコンテンツをネストすることができます。ネストした場合、その領域の範囲で100％幅になるよう調整されます。

以下は「ネスト」のサンプルです。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
	background-color:#614983;
	color:#ffffff;
}
.my-content-bg-color {
	background-color:#cccccc;
	color:#000000;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
<div class="row">

<div class="col">
ロゴ
<div class="row">
<div class="col">メニュー</div>
</div>
</div>

<div class="col">
アカウント情報
<div class="row">
<div class="my-content-bg-color col">コンテンツ</div>
</div>
</div>

</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

コードの表示例

コードの表示例です。

ポイント

グリッドでコンテンツをネストすることができます。ネストした場合、その領域の範囲で100％幅になるよう調整されます。

グリッドシステム（col-sm）

モバイルの幅の時に折り返したい、そんなときはcol-smが使えます。colに-smをつけると幅575px以下の時に挙動をかえることができます。

以下は「col-sm」のサンプルです。

構成

構成は以下になります。

/test
│  sample.html
├─css
│      bootstrap.min.css
└─js
        bootstrap.min.js
        jquery-3.3.1.slim.min.js
        popper.min.js

sample.html

sample.htmlのコードです。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>ダッシュボード</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.my-bg-color {
	background-color:#614983;
	color:#ffffff;
}
.my-content-bg-color {
	background-color:#cccccc;
	color:#000000;
}
</style>
</head>
<body>
<div class="my-bg-color container-fluid">
<div class="row">

<div class="col">
ロゴ
<div class="row">
<div class="col">メニュー</div>
</div>
</div>

<div class="col-sm">
アカウント情報
<div class="row">
<div class="my-content-bg-color col">コンテンツ</div>
</div>
</div>

</div>
</div>
<script src="js/jquery-3.3.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

コードの表示例

コードの表示例です。

ポイント

モバイルの幅の時に折り返したい、そんなときはcol-smが使えます。colに-smをつけると幅575px以下の時に挙動をかえることができます。

7. bootstrap4の管理画面のテンプレートの利用方法

bootstrap4の管理画面のテンプレートの利用方法について見ていきます。

無料の管理画面のテンプレート

無料で提供されているテンプレートもいろいろあります。試してみてください。

Material Dashboard

Material Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。

ライセンス：MIT
ダウンロード：https://www.creative-tim.com/product/material-dashboard
デモページ：https://demos.creative-tim.com/material-dashboard/examples/dashboard.html
ドキュメント：https://demos.creative-tim.com/material-dashboard/docs/2.1/getting-started/introduction.html

Now UI Dashboard

Now UI Dashboardです。ドキュメントが整っているのが魅力です。ダウンロードにはメールアドレスを登録する必要があります。

ライセンス：MIT
ダウンロード：https://www.creative-tim.com/product/now-ui-dashboard
デモページ：https://demos.creative-tim.com/now-ui-dashboard/examples/dashboard.html
ドキュメント：https://demos.creative-tim.com/now-ui-dashboard/docs/1.0/getting-started/introduction.html

8. bootstrap4のリファレンス

Bootstrapを始める場合、どのような機能やクラスがあるか簡単に把握しておくとスムーズです。ここではBootstrap入門をテーマにグリッドレイアウトやページングなどのサンプルなどを掲載しつつ、初心者向けのBootstrap（Bootstrap4）の使い方を解説しています。

コンテナ

viewport 全体に広がる全幅で利用するには、container-fluidを使います。

グリッドシステム

Bootstrapのグリッドシステムはflexboxで構築されており、ページ全体で最大12列まで表示することができます。

最小単位が12分割した1列で、それを必要に応じて2列分、3列分と幅の割合が指定できます。グリッドシステムはレスポンシブ（応答に応じて最適化）で、画面サイズに応じて列が自動的に再配置されます。

Bootstrap4のグリッドクラス

Bootstrap4グリッドシステムには5つのクラスがあります。以下のクラスを組み合わせると、より動的で柔軟なレイアウトが作成できます。

.col-
超小型デバイス、画面幅576px未満
.col-sm-
小型デバイス、画面幅576ピクセル以上
.col-md-
中型デバイス、画面幅768ピクセル以上
.col-lg-
大型デバイス、画面幅992ピクセル以上
.col-xl-
超大型デバイス、画面幅1200ピクセル以上

Bootstrap4グリッドレイアウトの基本的な構成

グリッドレイアウトの基本的な構成は、まず外側をrowクラスで指定し、行を作り、その中にcol*クラスを指定します。

<div class="row">
<div class="col">コル</div>
<div class="col">コル</div>
<div class="col">コル</div>
</div>

上記の例のようにcolだけの場合はrowの範囲で相対的な幅で分割されます。3つcolを並べた場合、1セル33%になります。4つcolの場合25％です。

Bootstrap4グリッドレイアウトのレスポンシブカラム

次の例は、タブレットから始まる4つの等幅の列を作成し、特大のデスクトップにスケーリングする方法を示しています。 576px未満のスマホまたは画面では、列は自動的に重なって表示されます。

<div class="row">
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
<div class="col-sm-3">col-sm-3</div>
</div>

Bootstrap4グリッドレイアウトの割合の異なるレスポンシブカラム

以下のようにすると4対8と割合の異なるレスポンシブカラムが作れます。 smを指定しているので、576px未満のスマホまたは画面では、列は自動的に重なって表示されます。

<div class="row">
<div class="col-sm-4">col-sm-4</div>
<div class="col-sm-8">col-sm-8</div>
</div>

テキスト

Bootstrap4のテキストについて見ていきます。

デフォルト設定

Bootstrap4のテキスト関連のデフォルト設定は以下のようになっています。

font-size：16px
line-height：1.5
font-family："Helvetica Neue", Helvetica, Arial, sans-serif
pタグ：margin-top:0、margin-bottom:1rem (デフォルトで16px)

見出し（h1～h6）

Bootstrap4のHTML見出し（h1～h6）は、以下のようにフォントサイズが設定されます。

h1 : 2.5rem（40px）
h2 : 2rem（32px）
h3 : 1.75rem（28px）
h4 : 1.5rem（24px）
h5 : 1.25rem（20px）
h6 : 1rem（16px）

表示見出し(.display-*)

表示見出しは、通常の見出しよりも目立つようにフォントサイズを大きく、フォント幅を軽く表示するクラスです。 .display-1、.display-2、.display-3、.display-4の4つのクラスから選択できます。

<h1 class="display-1">display-1</h1>
<h1 class="display-2">display-2</h1>
<h1 class="display-3">display-3</h1>
<h1 class="display-4">display-4</h1>

マーカー（<mark>）

Bootstrap4で<mark>を使用すると黄色の背景色のテキストになります。

使用すると<mark>黄色の背景色のテキスト</mark>になります。

小さめの文字（<small>）

Bootstrap4で<small>を使用すると軽めの2次的テキストになります。

使用すると<small>軽めの2次的テキスト</small>になります。

略語（<abbr>）

Bootstrap4で<abbr>を使用するとドット下線のついたテキストになります。

使用すると<abbr>ドット下線のついたテキスト</abbr>になります。

色

Bootstrap4の色について見ていきます。

テキストの色

Bootstrap4には、「色による意味」を提供するコンテキストクラスがいくつかあります。テキストの色のクラスは次のとおりです。

.text-muted
.text-primary
.text-success
.text-info
.text-warning
.text-danger
.text-secondary
.text-white
.text-dark
.text-body
.text-light

背景の色

Bootstrap4の背景の色のクラスは次のとおりです。

.bg-primary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-secondary
.bg-dark
.bg-light

表

Bootstrap4の表について見ていきます。

ベーシックな表

Bootstrap4のベーシックな表は、.tableクラスを指定します。この場合、軽いパディングと水平分割線があります。

表示イメージ

Bootstrap4のベーシックな表の表示イメージになります。

サンプルコード

Bootstrap4のベーシックな表のサンプルコードです。

<table class="table">
<tr><th>名前</th><th>メールアドレス</th></tr>
<tr><td>太郎</td><td>tarou@example.com</td></tr>
<tr><td>花子</td><td>hanako@example.com</td></tr>
</table>

ストライプな表

Bootstrap4のストライプな表は、.table-stripedクラスを指定します。

表示イメージ

Bootstrap4のストライプな表の表示イメージになります。

サンプルコード

Bootstrap4のストライプな表のサンプルコードです。

<table class="table table-striped">
<tr><th>名前</th><th>メールアドレス</th></tr>
<tr><td>太郎</td><td>tarou@example.com</td></tr>
<tr><td>花子</td><td>hanako@example.com</td></tr>
</table>

6. ページング

ページングのサンプルです。

<nav aria-label="ページングの例">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">前へ</a></li>
    <li class="page-item active"><a class="page-link" href="#">現在</a></li>
    <li class="page-item"><a class="page-link" href="#">次へ</a></li>
  </ul>
</nav>

更新履歴

この記事の更新履歴です。

2019/12/8 bootstrap4のリファレンスを追記しました。
2019/5/18 bootstrap実践知識3（ダッシュボード）を追記しました。
2019/5/17 記事をUPしました。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Eclipse /gcc /gdb /Git /g++ /JDK /JUnit /ZAP

技術・仕様
Ajax /CORBA /Java EE（旧称J2EE） /JNI

ライブラリ／Framework／CMS
bootstrap /jQuery /Lucene /MyBatis /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
 Apache／Tomcat /MySQL /Redis /Solr

ITインフラサーバー
Web公開サーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方 /小さな会社のISMS

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

3.220.164.172

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a～z、A～Z、0～9」の文字をランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク

Bootstrapとは－入門からBootstrap4の管理画面のテンプレート利用まで。

目次

1. bootstrapとは

2. HTML、CSS、JavaScript、jQueryの入門知識

HTML

JavaScript

jQuery

3. bootstrapのダウンロード

4. bootstrap実践1（Hello Bootstrap）

viewport

構成

sample.html

ポイント

「bootstrap.min.css」の取り込み

構成

sample.html

ポイント

5. Bootstrap実践2（ログインフォーム）

ログインフォームのHTML

構成

sample.html

ポイント

青いボタン（btn btn-primary）

構成

sample.html

ポイント

水平方向に中央寄せ（text-center）

構成

sample.html

ポイント

垂直方向に中央寄せ（独自のスタイル適用）

構成

sample.html

ポイント

カード形式の枠を作る（card、card-XXX）

構成

sample.html

ポイント

フォームに効果をつける（form-control）

構成

sample.html

ポイント

6. Bootstrap実践3（ダッシュボード）

bootstrapの開始テンプレート（使用するCSSとJSファイル）

必要なファイル

bootstrapの開始テンプレート

構成

sample.html

コードの表示例

レイアウト（container）

構成

sample.html

コードの表示例

ポイント

レイアウト（container-fluid）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（rowとcol）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（ネスト）

構成

sample.html

コードの表示例

ポイント

グリッドシステム（col-sm）

構成

sample.html

コードの表示例

ポイント

7. bootstrap4の管理画面のテンプレートの利用方法

無料の管理画面のテンプレート

Material Dashboard

Now UI Dashboard

8. bootstrap4のリファレンス

コンテナ