とほほのBootstrap 4入門

はじめに

このページは「Bootstrap 4.2.1」について説明しています。Bootstrap 3 については、「Bootstrap 3入門」を参照してください。

Bootstrap とは

Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。

Twitter 社で開発されました。
最初は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」となりました。
現時点(2018年12月30日)の最新バージョンは 4.2.1 です。
Bootstrap 2, Bootstrap 3, Bootstrap 4 では一部互換性の無い機能があります。
Chrome 45 / Firefox 38 / IE 10 / Edge 12 / Safari 9 / Opera 30 / iOS 9 / Android 4.4 以上をサポートします。
IE 8, 9 への対応が必要な場合は、Bootstrap 3 を使用してください。
利用の際は jQuery が必要です。
ドロップダウン、ポップオーバー、ツールチップを利用する際は Popper.js が必要です。
長さの単位を基本的に、em (親要素の文字サイズ)から rem (body 要素のフォントサイズ) に変更しました。

ライセンス

MIT License で配布されています。商用利用も可能です。

レスポンシブデザインとは

スマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。

【広い画面】
Header
Menu	Main	Info

【狭い画面】
Header
Menu
Main

基本テンプレート

Bootstrap 4 を使用する際の基本テンプレートを下記に示します。ダウンロード版を使用したり、npm 等の環境に組み込んで使用する手順については説明を割愛します。

Code

<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <title>タイトル</title>
  </head>
  <body>
    <!-- ここに本文を記述します -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  </body>
</html>

ダウンロード

Bootstrap は下記からダウンロードすることができます。

https://getbootstrap.com/

ダウンロードファイルには、下記のファイルが含まれています。

css/bootstrap.css ... Bootstrap 本体 (フル版)
css/bootstrap-grid.css ... Bootstrap Grid (グリッドシステムのみ版)
css/bootstrap-reboot.css ... Bootstrap Reboot (リセットCSSのみ版)
css/*.min.* ... 上記を Minimize したファイル
css/*.map ... Chrome Developer Tools 等で使用されるデバッグ用マップファイル
js/bootstrap.js ... Bootstrap 本体
js/bootstrap.bundle.js ... Popper.jsバンドル版
js/*.min.js ... 上記を Minimize したファイル
js/*.map ... Chrome Developer Tools 等で使用されるデバッグ用マップファイル

インストール

npm, gem, composer 等でインストールすることも可能です。

Linux

$ npm install bootstrap

$ gem bootstrap -v 4.2.1

$ composer require twbs/bootstrap:4.2.1

Reboot.css

Bootstrap 4 では、リセットCSS として Normalize.css をベースとした Reboot.css を採用しています。Reboot.css により、異なるブラウザであっても、おおまか、同じようなデフォルトスタイルが提供されます。Reboot.css は下記の特徴を持ちます。

長さの単位として em の代わりに rem を採用。
h1～h6, ol, ul, pre など大半の要素の margin-top を 0 に設定。
デフォルトフォントとして、システムフォントを利用。
box-sizing のデフォルト値を content-box から border-box に変更。

Bootstrap のバージョン

Bootstrap のバージョンは下記で参照することができます。

Code

$.fn.tooltip.Constructor.VERSION

ブレークポイント

Bootstrap 3 では、画面の横幅に応じて、下記の4つのレベルの画面サイズを定義していました。

xs : Extra Small。スマートフォンなど。767px以下。
sm : Small。タブレットなど。768～991px。
md : Medium。中型ディスプレイ。992～1199px。
lg : Large。大型ディスプレイ。1200px以上。

Bootstrap 4 では、xl が追加され、サイズがひとつシフトしました。

xs : Extra Small。小型スマートフォンなど。575px以下。
sm : Small。通常スマートフォンなど。576～767px。
md : Medium。タブレット。768～991px。
lg : Large。中型ディスプレイ。992～1199px。
xl : Extra Large。大型ディスプレイ。1200px以上。

多くのクラスでは、col-{breakpoint}-{n} の様にブレークポイントを指定することができます。下記の例では、グリッドを用いて、画面サイズが xs(小型スマートフォン) の時にはカラム分割無し、sm(通常スマートフォン) の時には 4:4:4 で、md(タブレット以上) 以上の時には 2:8:2 で、カラムを分割します。

Code

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

ただし、xs の時にはブレークポイント名を記述しません。例えば、col-xs-4 ではなく col-4 と記述します。

Code

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

本書で x-{breakpoint}-y と表記した時は、下記のブレークポイント名を指定できるものとします。

x-y ... xs (小型スマホ)以上
x-sm-y ... sm (スマホ)以上
x-md-y ... md (タブレット)以上
x-lg-y ... lg (中型ディスプレイ)以上
x-xl-y ... xl (大型ディスプレイ)以上

初版:2015年9月6日最終更新:2020年6月15日

https://www.tohoho-web.com/bootstrap/introduction.html