Bootstrap

「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

• 戻る

目次 †

概要 †

• BootstrapはTwitter社が開発したCSSのフレームワーク

• よく使われるスタイルやJavaScript用拡張があらかじめ定義してあるので、
  ルールに沿って利用するだけで整ったデザインのページを作成できる。

• Ver2.0以降ではレスポンシブデザインに対応している
  CSS3のメディアクエリを使用しスマートフォンやタブレットのブラウザの
  横幅サイズを判断基準として、レイアウトデザインを柔軟に調整可能。

• サイトの基本情報がすべてのデバイスのブラウザで利用できるよう、部分的な互換性という概念を用いている。
  • HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。
  • CSS3で導入された古いWebブラウザでサポートされていない機能が、サポートされる。

• JavaScriptライブラリ
  • jQueryを読み込む必要がある。
  • jQuery UIと競合する部分がある。

• 概要 ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/overview.html

• classの効用の詳細は書かれていないので、
  見出しのレイアウトやコンポーネントに対応するsnippetを使用して開発を行うstyle。
  このため、classの詳細を知りたい場合、bootstrapの*.cssファイルの中を読む必要がある。
  • Bootstrap · The world's most popular mobile-first and responsive front-end framework.
    http://getbootstrap.com/

レイアウト †

フォーム †

• フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/forms.html

並び †

• インライン・フォーム
  子要素をインラインレベル要素のように横にスタックする。
  • ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
    • インライン・フォーム
      http://bootstrap3.cyberlab.info/css/forms-inline.html
    • インライン・フォーム内のインプット・グループ
      http://bootstrap3.cyberlab.info/css/forms-inputGroups.html

• 水平フォーム
  水平フォームなら子要素をインラインレベル要素のように縦にスタックするので、レスポンシブになる。
  • レスポンシブ水平フォーム
    http://bootstrap3.cyberlab.info/css/forms-horizontal.html

form & control †

• form-group
  form-group classを適用したdivで、labelと、controlのペアを囲む。

• label
  • for="controlのID"
    
    • form-group内のlabelに適用するとlabelとcontrolが関連付き、labelとクリック時の動作が変わる。
    • <label for="id属性値"> ラベルを付けて関連付けをする -HTMLタグ辞典-
      http://www.newcredge.com/IT/www/html/tag/form/label.html
  • control-label
    • forms-horizontalの場合、form-group内のlabelに適用する。
    • その他、has-success、has-warning、has-errorクラスで使用されている。

• control
  • form-control
    form-group内のcontrolに適用する。

レスポンシブデザイン †

• 後述の水平フォームやグリッドレイアウトを使用して実現する。

• ".col-画面幅-列数"というCSSクラスを付与することにより、画面幅毎に、
  水平フォームの幅やグリッドレイアウトグリッドの表示・非表示が変更される。

水平フォーム †

• レスポンシブ水平フォーム ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/forms-horizontal.html

グリッドレイアウト †

• グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/gridSystem.html

レイアウトには、Bootstrapのグリッドシステムが利用できる。

• Bootstrapのグリッドシステムはcontainerとrowとcolのclassからなる。

• 親要素 : container, container-fluid classを適用したdiv
  • container : 画面サイズに合わせて段階的にリサイズ。
  • container-fluid : 画面サイズに合わせて流動的にリサイズ。

• 子要素 : row classを適用したdiv（縦方向にスタックする）。
• 孫要素 : col classを適用したdiv（横方向にスタックする）。

• containerのサイズと幅の段階

  項番	名称	幅の段階
  1	Extra small	極小（544px未満）
  2	Small	小（544px以上 768px未満）
  3	Medium	画面幅 中 （768px以上 992px未満）
  4	large	画面幅 大 （992px以上 1200px未満）
  5	Extra large	画面幅 特大 （1200px以上）

• col classには、class="col-{prefix}-{columns}"の形で書く。
  • 幅の段階毎に以下のprefixを指定する。

    項番	名称	prefix
    1	Extra small	xs
    2	Small	sm
    3	Medium	md
    4	large	lg
    5	Extra large	xl

  • columnsには、幅の段階毎に、1列-12列を指定する。
  • 幅の段階に対応するクラスを指定しない場合は100%（=12列）になり縦にスタックする。
  • 指定の幅の段階で非表示にする場合は、レスポンシブ・ユーティリティのclass="hidden-{prefix}"を書く。

• 参考
  • Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする
    http://websae.net/twitter-bootstrap-grid-system-21060224/
  • Bootstrapのグリッドシステムについてまとめてみた - Qiita
    http://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
  • グリッドシステム | 基本 | Bootstrap3の使い方
    http://bootstrap3-guide.com/base/grid.html
  • 一つ上のwebデザイナーに！BootstrapのグリッドシステムをわかりやすくCode部
    https://blog.codecamp.jp/bootstrap_grid_system

レスポンシブ・ユーティリティ †

• レスポンシブ・ユーティリティ ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/responsiveUtilities.html

スタイル †

色々なクラスが用意されていてソレを使用できる。

ボタン †

• ボタン ≪ CSS ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/css/buttons.html

コンポーネント †

• ≪ コンポーネント ≪ Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/components/

インプット・グループ †

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

テキスト入力欄の左サイド、右サイド（、もしくは、両サイドに）、
テキストやボタンを、１つ（づつ）配置できる。

ドロップダウン †

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

ボタン・グループ †

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

ドロップダウン・ボタン †

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

リスト・グループ †

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

ラベル †

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

アイコン †

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

バッジ †

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

ページ・ヘッダー †

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

パネル †

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

ナビゲーション †

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

ナビゲーション・バー †

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

パンくずリスト †

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

ページネーション †

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

アラート †

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

プログレス・バー †

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

ジャンボトロン †

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

サムネイル †

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

メディア・オブジェクト †

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

レスポンシブな埋め込み †

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

埋め込み効果 †

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

参考 †

• Bootstrap - Wikipedia
  https://ja.wikipedia.org/wiki/Bootstrap

• CSS · Bootstrap
  http://getbootstrap.com/css/

• Bootstrap3日本語リファレンス
  http://bootstrap3.cyberlab.info/

• Bootstrap 3 Tutorial
  http://www.w3schools.com/bootstrap/default.asp

• デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademy?マガジン
  https://techacademy.jp/magazine/6270

• HTML5アプリ作ろうぜ！（11）：Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT
  http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html