Bootstrapとは？
BootstrapはCSSのフレームワークです。
HTMLとCSSの知識は必要ですが、それが分かれば誰でもそれなりの見栄えのサイトを作ることが出来ます。
Bootstrapの特長
レスポンシブデザインで開発されています。
グリッドシステム
横幅を12に分割し、合計12になるようにスタイルを指定するだけでサイトの枠組みを構築
CSSやJavaScriptのコンポーネントが豊富
タグやクラスを指定するだけでデザインされたボタンやテーブルを利用
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 要素のフォントサイズ) に変更しました。
基本テンプレート
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!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 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} の様にブレークポイントを指定することができます。下記の例では、グリッド を用いて、画面サイズが sm 以上の時には 4:4:4 で、mg 以上の時には 2:8:2 で、カラムを分割します。
