トップ ライブラリ/Framework/CMS Bootstrap 実装例 ダッシュボード

Bootstrapを使用したダッシュボードの実装例

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

▲記事トップへ

目次

この記事の目次です。

1. bootstrapの開始テンプレート(使用するCSSとJSファイル)
2. レイアウト(container)
3. レイアウト(container-fluid)
4. グリッドシステム(rowとcol)
5. グリッドシステム(ネスト)
6. グリッドシステム(col-sm)

もっと知識を広げるための参考
更新履歴

1. bootstrapの開始テンプレート(使用するCSSとJSファイル)

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

必要なファイル

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

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

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>

コードの表示例

コードの表示例です。

bootstrapの開始テンプレートを表示した場合
bootstrapの開始テンプレートを表示した場合

2. レイアウト(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は独自に定義したスタイルです。

コードの表示例

コードの表示例です。

幅575pxで表示した場合
幅575pxで表示した場合
幅576pxで表示した場合
幅576pxで表示した場合
幅767pxで表示した場合
幅767pxで表示した場合
幅768pxで表示した場合
幅768pxで表示した場合
幅991pxで表示した場合
幅991pxで表示した場合
幅992pxで表示した場合
幅992pxで表示した場合
幅1199pxで表示した場合
幅1199pxで表示した場合
幅1200pxで表示した場合
幅1200pxで表示した場合

ポイント

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

3. レイアウト(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>

コードの表示例

コードの表示例です。

container-fluidで表示した場合
container-fluidで表示した場合

ポイント

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

4. グリッドシステム(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を指定して表示した場合
rowとcolを指定して表示した場合

ポイント

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

5. グリッドシステム(ネスト)

グリッドでコンテンツをネストすることができます。ネストした場合、その領域の範囲で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%幅になるよう調整されます。

6. グリッドシステム(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>

コードの表示例

コードの表示例です。

幅が576px以上の時に表示した場合
幅が576px以上の時に表示した場合
幅が575px以下の時に表示した場合
幅が575px以下の時に表示した場合

ポイント

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

もっと知識を広げるための参考

もっと知識を広げるための参考です。

Bootstrap

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

詳細

更新履歴

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

戻る

スポンサーリンク

サイト内のページ

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

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

技術・仕様
Ajax /CORBA /Jakarta EE(旧称J2EE、Java EE) /JNI

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

Web API
Google Maps

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

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

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

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

PC製品
ZOTAC

SI
ホームページの作り方

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

スポンサーリンク

関連サイト内検索ツール

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

IPアドレス確認ツール

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

3.238.180.255

HTMLの表示色確認ツール

パスワード生成ツール

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

ここに生成されます。

スポンサーリンク