Bootstrap

[CSS][CSS3][レスポンシブWebデザイン][jQuery][Angular JS]

基本テンプレート

http://getbootstrap.com/getting-started/

<!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

グリッドレイアウト

ビューポート

ピクセル幅により、次に4種類に分類

1. Extra small(-768px)
2. Small(768 - 992px)
3. Medium(992 - 1200px)
4. 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	エラー

必須です

リファレンス

ナビゲーションバー

http://bootstrap3.cyberlab.info/components/navbar.html

MyMemoWiki

Bootstrap

目次

Bootstrap

基本テンプレート

Hello, world!

ヘッダー

Header

Header

グリッドレイアウト

ビューポート

コンテナ

段組

基本クラス

2段組み

空きを作る

列を入れ替える

ブラウザの幅に応じて段組を変える

例

表示非表示を切り替える

UI

リスト

横に並べる

フォーム

例

モーダルダイアログボックス

ダイアログ

ダイアログを開くボタン

ボタン

色

大きさ

エラーメッセージ

アラートボックス

リファレンス

ナビゲーションバー

案内メニュー

検索