DNET_Bootstrap

Bootstrap

• 戻る

概要

• 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}"を書く。

補足：上記 2 つの表の区切り幅（544px）と xl プレフィックスは Bootstrap 4 alpha 時点のもので、参照先の Bootstrap 3 の仕様 （768px / 992px / 1200px の 4 段階、xs / sm / md / lg）とは異なる。 なお正式版の Bootstrap 4 以降は 576px / 768px / 992px / 1200px となっている。

• 参考
  • 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

移行メモ

• グリッドの幅の段階（544px 区切り、xl プレフィックス）は 参照先の Bootstrap 3 の仕様ではなく Bootstrap 4 alpha の値であるため、 本文はそのままとし補足を加えた。
• PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替えた。

---

Tags: 移行, Bootstrap, CSSフレームワーク, グリッドシステム, レスポンシブデザイン, フォーム, コンポーネント