ビューポート
- Extra small(-768px)
- Small(768 - 992px)
- Medium(992 - 1200px)
- Large(1200px -)
コンテナ
- Bootstrap3では、コンテンツ全体を <div class="container"></div> でくくる使い方を想定している
- これにより、デフォルトのマージンが確保される
段組
基本クラス
- col-xs-n コンテナの12分のn(1~12) の幅を占める
- ネストさせることも可能
2段組み
<div class="row">
<div class="col-xs-6">1</div>
<div class="con-xs-6">2</div>
</div>
空きを作る
- オフセットを指定し、指定した幅だけ枠を開けることができる
<div class="col-xs-offset-1 col-xs-4">test</div>
列を入れ替える
- col-xs-push-XX,col-xs-pull-XX を利用(XXは1~12)する
<div class="row">
<div class="col-xs-6 col-xs-push-6">test1</div>
<div class="col-xs-6 col-xs-pull-6">test2</div>
</div>
ブラウザの幅に応じて段組を変える
接頭辞
|
意味
|
---|
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(コンテナ幅の半分)となる
<div class="col-xs-12 col-sm-6">Contents</div>
表示非表示を切り替える
|
Extra small
|
Small
|
Medium
|
Large
|
---|
visible-xs
|
○
|
×
|
×
|
×
|
visible-sm
|
×
|
○
|
×
|
×
|
visible-md
|
×
|
×
|
○
|
×
|
visible-lg
|
×
|
×
|
×
|
○
|
hidden-xs
|
×
|
○
|
○
|
○
|
hidden-sm
|
○
|
×
|
○
|
○
|
hidden-md
|
○
|
○
|
×
|
○
|
hidden-lg
|
○
|
○
|
○
|
×
|
リスト
横に並べる
<ul class="list-inline">
<li>...</li>
</ul>
フォーム
- form-groupでくくる
- 入力コントロールの見出しには、control-label を指定する
- 入力コントロールには form-control を指定する
- 静的なテキストには form-control-static を指定する
- ラジオボタン、チェックボックスは オブジェクトとラベルを それぞれのクラスでくくる
<div class="radio">
<input type="radio" value="1" name="hoge" id="hoge">
<label for="hoge">HOGE</label>
</div>
<div class="checkbox">
<input type="checkbox" value="foo" name="foo" id="foo">
<label for="foo">FOOO</label>
</div>
- 説明文にはhelp-block を設定する
- ボタンには btn クラスを適用する
例
<div class="form-group">
<label class="control-label" for="xlinks_login_user_id">ID</label>
<input class="form-control" id="xlinks_login_user_id" type="text" placeholder="IDを入力">
</div>
<div class="form-group">
<label class="control-label" for="xlinks_login_user_password">パスワード</label>
<input class="form-control" id="xlinks_login_user_password" type="password" placeholder="パスワードを入力">
</div>
モーダルダイアログボックス
ダイアログ
<div class="modal" role="dialog" area-hidden="true" id="login_dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">TITLE</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal">閉じる</button>
</div>
</div>
</div>
</div>
ダイアログを開くボタン
<button class="btn btn-primary" data-toggle="modal" data-target="#login_dialog">ログイン</button>
<blockquote>Bootstrap3では、JavaScriptを記述することなく、動きを作ることができ、「データ属性API(Data Attribute API)」という。data-toggle と data-target を用いているが、どのような属性を指定すべきなのかはコンポーネントごとに異なる。data- から始まる属性は、HTML5において、「独立データ属性」としてアプリケーション固有のデータを格納する目的で使用される</blockquote>
ボタン
色
クラス名
|
用途
|
---|
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
|
エラー
|
<div class="alert alert-danger">必須です</div>