Bootstrap
ナビゲーションに移動
検索に移動
Bootstrap
[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]
基本テンプレート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
Hello, world!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
ヘッダー
Header
Header
グリッドレイアウト
ビューポート
- ピクセル幅により、次に4種類に分類
- Extra small(-768px)
- Small(768 - 992px)
- Medium(992 - 1200px)
- Large(1200px -)
コンテナ
- Bootstrap3では、コンテンツ全体を でくくる使い方を想定している
- これにより、デフォルトのマージンが確保される
段組
基本クラス
- col-xs-n コンテナの12分のn(1～12) の幅を占める
- ネストさせることも可能
2段組み
1
2
空きを作る
- オフセットを指定し、指定した幅だけ枠を開けることができる
test
列を入れ替える
- col-xs-push-XX,col-xs-pull-XX を利用(XXは1～12)する
test1
test2
ブラウザの幅に応じて段組を変える
| 接頭辞 | 意味 |
|---|---|
| col-xs- | Extra small(-768px) |
| col-sm- | Small(768 - 992px) |
| col-md- | Medium(992 - 1200px) |
| col-lg- | Large(1200px -) |
例
- Extra smallの場合、col-xs-12 が適用され、幅が12分の12(コンテナ一杯)となる
- Small以上の場合、col-sm-6 が適用され、幅が12分の6(コンテナ幅の半分)となる
Contents
表示非表示を切り替える
| Extra small | Small | Medium | Large | |
|---|---|---|---|---|
| visible-xs | ○ | × | × | × |
| visible-sm | × | ○ | × | × |
| visible-md | × | × | ○ | × |
| visible-lg | × | × | × | ○ |
| hidden-xs | × | ○ | ○ | ○ |
| hidden-sm | ○ | × | ○ | ○ |
| hidden-md | ○ | ○ | × | ○ |
| hidden-lg | ○ | ○ | ○ | × |
UI
リスト
横に並べる
- ...
フォーム
- form-groupでくくる
- 入力コントロールの見出しには、control-label を指定する
- 入力コントロールには form-control を指定する
- 静的なテキストには form-control-static を指定する
- ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
<input type="radio" value="1" name="hoge" id="hoge"> <label for="hoge">HOGE</label>
<input type="checkbox" value="foo" name="foo" id="foo"> <label for="foo">FOOO</label>
- 説明文にはhelp-block を設定する
- ボタンには btn クラスを適用する
例
<label class="control-label" for="xlinks_login_user_id">ID</label> <input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力">
<label class="control-label" for="xlinks_login_user_password">パスワード</label> <input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力">
モーダルダイアログボックス
ダイアログ
ダイアログを開くボタン
<button class="btn btn-primary" data-toggle="modal" data-target="#login_dialog">ログイン</button>
Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される
ボタン
色
| クラス名 | 用途 |
|---|---|
| btn-default | デフォルト |
| btn-primary | プライマリ |
| btn-success | 成功 |
| btn-info | 情報 |
| btn-warning | 警告 |
| btn-danger | 危険(エラー) |
大きさ
| クラス名 | 大きさ |
|---|---|
| btn-xs | 極小 |
| btn-sm | 小さく |
| btn-lg | 大きく |
| btn-block | 横一杯 |
エラーメッセージ
アラートボックス
| クラス名 | 用途 |
|---|---|
| alert-success | 成功 |
| alert-info | 情報 |
| alert-warning | 警告 |
| alert-danger | エラー |
必須です
リファレンス
ナビゲーションバー
© 2006 矢木浩人
