Bootstrapとは？
Twitter社が作成し公開したレスポンシブデザインに対応した*1CSSフレームワークです。
あらかじめ用意されているCSSを使うと、パーツをいちいちデザインしなくても今風のおしゃれなホームページが作れます。
使い方
とりあえず試すにはCDNを使うのが便利です。
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
よく使うクラスを紹介
次の三つのCSSクラスを紹介します。
- 囲み - well
- テーブル - table
- ボタン - button
囲み - well
特定の領域を囲んで目立たせたいときにwellというクラスで囲みます。
<html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> </head> <body> <div class="well" style="width:50%; margin: 0 auto;">wellクラスを使うとグレーで囲みます。 </div> </body> </html>
テーブル - table
tableクラスを使うとテーブルがきれいになります。さらにtable-stripedクラスを使うと縞々になって見やすくなります。
<html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> </head> <body> <div style="width:50%; margin: 0 auto;"> <table class="table table-striped"> <thead> <tr><th>ヘッダー１</th><th>ヘッダー２</th></tr> </thead> <tbody> <tr><td>項目1</td><td>項目2</td></tr> <tr><td>項目3</td><td>項目4</td></tr> <tr><td>項目5</td><td>項目6</td></tr> </tbody> </table> </div> </body> </html>
theadとtbodyを指定する必要があります。
ボタン - button
色が6種類、サイズが4種類の24種類のボタンとリンクのように表示するためのクラスが用意されています。
<html> <head> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> </head> <body> <div style="width:50%; margin: 0 auto;"> <table class="table table-striped"> <thead> <tr><th>色／サイズ</th><th>大</th><th>標準</th><th>小</th><th>極小</th></tr> </thead> <tbody> <tr> <td>Default</td> <td><input type="button" class="btn btn-default btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-default" value="ボタン"></td> <td><input type="button" class="btn btn-default btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-default btn-xs" value="ボタン"></td> </tr> <tr> <td>Primary</td> <td><input type="button" class="btn btn-primary btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-primary" value="ボタン"></td> <td><input type="button" class="btn btn-primary btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-primary btn-xs" value="ボタン"></td> </tr> <tr> <td>Info</td> <td><input type="button" class="btn btn-info btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-info" value="ボタン"></td> <td><input type="button" class="btn btn-info btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-info btn-xs" value="ボタン"></td> </tr> <tr> <td>Success</td> <td><input type="button" class="btn btn-success btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-success" value="ボタン"></td> <td><input type="button" class="btn btn-success btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-success btn-xs" value="ボタン"></td> </tr> <tr> <td>Warning</td> <td><input type="button" class="btn btn-warning btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-warning" value="ボタン"></td> <td><input type="button" class="btn btn-warning btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-warning btn-xs" value="ボタン"></td> </tr> <tr> <td>Danger</td> <td><input type="button" class="btn btn-danger btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-danger" value="ボタン"></td> <td><input type="button" class="btn btn-danger btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-danger btn-xs" value="ボタン"></td> </tr> <tr> <td>Link</td> <td><input type="button" class="btn btn-link btn-lg" value="ボタン"></td> <td><input type="button" class="btn btn-link" value="ボタン"></td> <td><input type="button" class="btn btn-link btn-sm" value="ボタン"></td> <td><input type="button" class="btn btn-link btn-xs" value="ボタン"></td> </tr> </tbody> </table> </div> </body> </html>
その他のクラス
CSS編～Bootstrap3移行ガイド ではサンプル付きですべてのクラスが紹介されています。
今回使用したファイル
今回使用したファイルはgithubに公開しています。
*1:レスポンシブデザイン対応の話はグリッドと呼ばれる機能だけど、よく分からないのでBootstrap3超速レビュー！刷新されたグリッドシステムを理解しよう！ | HTML5Experts.jpを読んでください。
