Bootstrapのテスト、現在(2017/2/21)のバージョンは 3.3.8
まずは、CDNを使う。
https://www.bootstrapcdn.com/
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無題ドキュメント</title> </head> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" > <body> <div class="container"> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script> </body> </html>
レスポンシブな感じにしてみる。
実際にメディアクエリを見てみると、
- Extra small devices Phones (<768px)
- Small devices Tablets (≥768px)
- Medium devices Desktops (≥992px)
- Large devices Desktops (≥1200px)
@See http://getbootstrap.com/css/#grid-media-queries
それぞれ、クラス名が、
- .col-xs-
- .col-sm-
- .col-md-
- .col-lg-
4つに分かれているらしい。
基本構造は「col-グリッドサイズ-カラム数」で合計１２。
早速基本の配置をしてみる。
続けて携帯用のハンバーガーメニューを出してみる。