このページは「Bootstrap 4.1.1」について説明しています。Bootstrap 3 については、「Bootstrap 3入門」を参照してください。
Bootstrap は、スマートフォンなどのモバイル端末にも対応し、レスポンシブデザインを採用した HTML, CSS, JavaScript フレームワークです。
em
(親要素の文字サイズ)から rem
(body 要素のフォントサイズ) に変更しました。
スマートフォン、タブレット、デスクトップなどの画面の広さに応じて、横並びを縦並びにしたり、狭い画面ではサイドバーを表示しないなどを自動的に調整し、同じデザインで異なる大きさの画面に対応するためのデザイン技術です。
Header | ||
Menu | Main | Info |
Header |
Menu |
Main |
Bootstrap 4 を使用する際の基本テンプレートを下記に示します。ダウンロード版を使用したり、npm 等の環境に組み込んで使用する手順については説明を割愛します。
<!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 等でインストールすることも可能です。
$ npm install bootstrap $ gem bootstrap -v 4.1.1 $ composer require twbs/bootstrap:4.1.1
Bootstrap 4 では、リセットCSS として Normalize.css をベースとした Reset.css を採用しています。Reboot.css は下記の特徴を持ちます。
em
の代わりに rem
を採用。
content-box
から border-box
に変更。
Bootstrap のバージョンは下記で参照することができます。
$.fn.tooltip.Constructor.VERSION // =< 4.1.1
Bootstrap 3 では、画面の横幅に応じて、下記の4つのレベルの画面サイズを定義していました。
Bootstrap 4 では、xl が追加され、サイズがひとつシフトしました。