CSSのフレームワーク「Bootstrap」を少し試してみたのでメモ。
対応ブラウザ
Getting started · BootstrapのBrowser and device supportに記載されていますが、
IE7以下はサポート外になります。
IE8まで対応する場合、Respond.jsが必要になります。
ダウンロード
Bootstrapのサイトからダウンロードします。
左の「Download Bootstrap」をクリックしてダウンロード。
ダウンロード後、解凍すると以下のようなファイル群が入っています。
-
css
- bootstrap.css
- bootstrap.css.map
- bootstrap.min.css
- bootstrap-theme.css
- bootstrap-theme.css.map
- bootstrap-theme.min.css
-
fonts
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
-
js
- bootstrap.js
- bootstrap.min.js
- npm.js
fontsはアイコンフォントで使用するみたいです。
Components · BootstrapのGlyphiconsあたりに記載されています。
ファイルの読み込み
ファイルの読み込みや最初の準備は、Getting started · BootstrapやCSS · Bootstrapにあります。
とりあえず今回は、下記のようにしました。
HTML
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link href="css/bootstrap.min.css" rel="stylesheet"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
IE8への対応が不要の場合、8～11行目は不要です。
使い方
今回はContainers、Grid system、Buttonsの機能を試してみたいと思います。
Containers
サイト内のコンテンツを包むのに使用します。
BootstrapのGrid systemを使用するために必要みたいです。
| .container | 要素をセンタリング。左右に余白を作る。 |
|---|---|
| .container-fluid | 左右に余白を作らない。 |
HTML
<div class="container"> <p>container</p> </div> <div class="container-fluid"> <p>container-fluid</p> </div>
Grid system
Containersの幅を12列に分割して、レイアウトを作ることができます。
レスポンシブにも対応していて幅に応じてレイアウトの変更も可能です。
| .row | 列の水平方向のグループを作成。.rowの中に列の要素を配置します。 |
|---|---|
| .col-xs-num | 列を作成。numに1～12の数値を指定します。 |
| .col-sm-num | 列を作成。幅768px以上で使用。 numに1～12の数値を指定します。 |
| .col-md-num | 列を作成。幅992px以上で使用。 numに1～12の数値を指定します。 |
| .col-lg-num | 列を作成。幅1200px以上で使用。 numに1～12の数値を指定します。 |
| col-size-offset-num | 列要素の左側に余白を作ります。 sizeに使用する画面サイズ(lg,md,sm,xs)、 numに1～12の数値を指定します。 |
列に対してcol-XX-numを指定し、合計が12になるようにnumの部分に数値を設定します。
.col-xs-numのみ指定されている場合、全ての画面サイズでそのレイアウトが適用されます。
.col-md-numのみが指定されている場合、992px以上ではそのレイアウトが適用されますが、
992px未満では縦並びになります。
.col-xs-numと.col-md-numが指定されている場合、992px未満では.col-xs-numのレイアウトが、
992px以上では.col-md-numのレイアウトが適用されます。
HTML
<div class="container"> <div class="row"> <div class="col-xs-5 col-md-3">.col-xs-5<br />.col-md-3</div> <div class="col-xs-7 col-md-5">.col-xs-7<br />.col-md-5</div> <div class="col-xs-12 col-md-4">.col-xs-12<br />.col-md-4</div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-xs-4">.col-xs-4</div> <div class="col-xs-6 col-xs-offset-2">.col-xs-6 col-xs-offset-2</div> </div> </div>
Buttons
aかbutton、inputタグに使用して、ボタンのスタイルを適用します。
ただ、Firefoxのバージョン30未満でinputタグにline-heightが適用できないバグがあるので、
公式ではbuttonタグを使用することを推奨しているみたいです。(バージョン30以上では解消されています)
| .btn | ボタンのスタイルを適用。 |
|---|---|
| .btn-default | ボタンのスタイルをdefaultに変更します。 |
| .btn-primary | ボタンのスタイルをprimaryに変更します。 |
| .btn-success | ボタンのスタイルをsuccessに変更します。 |
| .btn-info | ボタンのスタイルをinfoに変更します。 |
| .btn-warning | ボタンのスタイルをwarningに変更します。 |
| .btn-danger | ボタンのスタイルをdangerに変更します。 |
| .btn-link | ボタンのスタイルをlinkに変更します。 |
HTML
<div class="container"> <a href="#" class="btn btn-default">aタグ</a> <button class="btn btn-default">buttonタグ</button> <input type="submit" value="inputタグ" class="btn btn-default"> </div> <div class="container"> <button class="btn btn-default">default</button> <button class="btn btn-primary">primary</button> <button class="btn btn-success">success</button> <button class="btn btn-info">info</button> <button class="btn btn-warning">warning</button> <button class="btn btn-danger">danger</button> <button class="btn btn-link">link</button> </div>
今回は以上で終わりですが、公式のドキュメントにはもっと色々あるみたいなので、
時間のある時に試してみたいと思います。
コメントが承認されるまで時間がかかります。