BootStrapの特徴
- レスポンシブWebデザインでマルチデバイスに対応
- フォームやボタン、ナビゲーション等をパーツとしてコンポーネントと呼んでいます。
- デフォルトでjQueryライブラリを使うようになっています。
- HTML5に準拠しています。
- グリッドシステムにより横幅を12分割で構成している。（4より）
歴史
| バージョン | リリース日 | 特徴 |
|---|---|---|
| 1 | 2011年8月19日 | |
| 2 | 2012年1月31日 | レスポンシブな12カラムのグリッドシステム |
| 3 | 2013年8月19日 | コンポーネントにフラットデザインを採用、モバイルファースト |
| 4 | 2018年1月18日 | flexboxサポート、単位がrem、グリフアイコンの廃止 |
必要なファイル
下記3つのファイルが必要です。
- bootstrapのCSS
- bootstrapのJS
- jQuery
CSSファイル
bootstrap.css
BootStrapの全ての機能を使いたい場合に使う。
bootstrap-grid.css
グリッドシステムレイアウトやFlexユーティリティのみ使いたい場合に使う。
bootstrap-reboot.css
Reboot機能のみ使いたい場合に使う。（ブラウザごとのデフォルトスタイルの差異をなくす）
JSファイル
bootstrap.bundle.js
BootStrapの全機能を利用できます。
bootstrap.js
popper.jsが含まれません。
読み込み方法
ダウンロードして読み込む
ネットにアクセスできない環境で利用されます。読み込む際は「integrity属性」及び「crossorign属性」は不要になります。
CDN(Contents Delivary Network)から読み込む
一番簡単でお手軽でネットにアクセスできるシステムで利用します。
|
1 2 3 4 |
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script> |
integrity
読み込んだファイルが改竄されていないかかチェックするハッシュ値です。
npmから読み込む
パッケージ管理ツールのインストールが必要なので大変
雛形HTMLの作成
雛形HTMLは下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="css/bootstrap.min.css"> <title>タイトル</title> </head> <body> <h1 class="text-success">テストです。</h1> <script src="js/jquery-3.3.1.slim.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script> </body> </html> |
特徴
- BootStrapはHTM5に準拠している。
viewportの指定
content="width=device-width, initial-scale=1
デバイス幅に合わせてズーム倍率を1倍にする。
shrink-to-fit=no
iOS9のSafariでinitial-scaleが適応されないのを回避する。
JavaScriptの読み込み順番
JavaScriptファイルは下記の順番で読み込むようにする。
- jQuery
- BootStrap
- もしその他必要なJavaScriptプラグイン
色の種類
BootStrapでは色は色名で示すのではなく特殊な英単語で示すことになります。
| 単語 | 色 |
|---|---|
| primary | 青系 |
| secondary | グレー |
| success | 緑系 |
| danger | 赤系 |
| warning | 黄系 |
| info | 水色系 |
| light | 明るいグレー |
| dark | 暗いグレー |
| white | 白 |
基本的なクラス
見出し関連
display-N
配置関連
.container
固定幅コンテナ
.container-fluid
可変幅コンテナ
.justify-content-end
右側に配置できる。
部品関連
bg-色
背景に色をつける。
text-色
テキストに色を付ける。
リスト関連
list-unstyled
リストスタイルを解除して縦並びのまま左に詰めます。
list-inline(ulに適用)とlist-inline-item(liに適用)
リストスタイルを解除して横並びに表示します。画面に情報を多く表示させたい場合によく使います。
画像関連
img-fluid
親要素のサイズに合わせて画像サイズが変化します。
img-thumbnail
親要素のサイズに合わせて画像サイズが変化しさらに1px幅のボーダーが画像の周りにつきます。
テーブル関連
table table-striped
縞模様のテーブルになります。
table table-hover
マウスオーバーすると色が変わるテーブルになります。
table table-sm
テーブルの余白を少しカットしたコンパクトなテーブルを作ることが可能です。
ボーダー関連
border-色
枠線に色をつけることができる。
rounded
丸く切り抜いた角になります。
rounded-lg
半径の大きい角丸になります。
rounded-circle
画像が丸くなります。
rounded-pill
画像がカプセル型になります。
シャドウ関連
shadow-sm
小さめの影
shadow
標準の影
shadow-lg
大きめの影
この記事へのコメントはありません。