とほほのBootstrap 4入門

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

はじめに

はじめに

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

Bootstrap とは

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

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

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

【広い画面】
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.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" 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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  </body>
</html>

ダウンロード

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

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

インストール

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

Linux
$ npm install bootstrap

$ gem bootstrap -v 4.1.1

$ composer require twbs/bootstrap:4.1.1

Reboot

Bootstrap 4 では、リセットCSS として Normalize.css をベースとした Reset.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   // =< 4.1.1

ブレークポイント

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

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


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