とほほのBootstrap 4入門

トップ > Bootstrap 4入門 > はじめに

はじめに

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

Bootstrap とは

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

ライセンス

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 は下記からダウンロードすることができます。

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

インストール

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 は下記の特徴を持ちます。

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

Bootstrap のバージョン

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

Code
$.fn.tooltip.Constructor.VERSION

ブレークポイント

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

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

多くのクラスでは、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 と表記した時は、下記のブレークポイント名を指定できるものとします。


Copyright (C) 2015-2020 杜甫々
初版:2015年9月6日 最終更新:2020年6月15日
http://www.tohoho-web.com/bootstrap/introduction.html