- 追加された行はこの色です。
- 削除された行はこの色です。
[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp/index.php?FrontPage]]
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。
-[[戻る>CSS]]
*目次 [#v5394f09]
#contents
*概要 [#zc6ccaec]
-BootstrapはTwitter社が開発したCSSのフレームワーク
-よく使われるスタイルやJavaScript用拡張があらかじめ定義してあるので、~
ルールに沿って利用するだけで整ったデザインのページを作成できる。
-Ver2.0以降ではレスポンシブデザインに対応している~
CSS3のメディアクエリを使用しスマートフォンやタブレットのブラウザの~
横幅サイズを判断基準として、レイアウトデザインを柔軟に調整可能。
-サイトの基本情報がすべてのデバイスのブラウザで利用できるよう、部分的な互換性という概念を用いている。
--HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。
--CSS3で導入された古いWebブラウザでサポートされていない機能が、サポートされる。
-JavaScriptライブラリ
--jQueryを読み込む必要がある。
--jQuery UIと競合する部分がある。
*レスポンシブデザイン [#l5082446]
-後述の[[グリッドレイアウト>#v5377ce1]]を使用して実現する。
-概要 ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/overview.html
-".col-画面幅-列数"というCSSクラスを付与することにより~
画面幅毎に[[グリッドレイアウト>#v5377ce1]]が変更される。
-classの効用の詳細は書かれていないので、~
見出しのレイアウトやコンポーネントに対応するsnippetを使用して開発を行うstyle。~
このため、classの詳細を知りたい場合、bootstrapの*.cssファイルの中を読む必要がある。
--Bootstrap · The world's most popular mobile-first and responsive front-end framework.~
http://getbootstrap.com/
**参考 [#e609de76]
-Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする~
http://websae.net/twitter-bootstrap-grid-system-21060224/
*レイアウト [#v5377ce1]
*レイアウト（グリッドレイアウト） [#v5377ce1]
Bootstrapのグリッドシステムというものが利用できるもよう。
**フォーム [#dfdbba2e]
-フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/forms.html
**参考 [#tb886d65]
***並び [#a0595c2d]
-インライン・フォーム~
子要素をインラインレベル要素のように横にスタックする。
--≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
---インライン・フォーム~
http://bootstrap3.cyberlab.info/css/forms-inline.html
---インライン・フォーム内のインプット・グループ~
http://bootstrap3.cyberlab.info/css/forms-inputGroups.html
-一つ上のwebデザイナーに！BootstrapのグリッドシステムをわかりやすくCode部~
https://blog.codecamp.jp/bootstrap_grid_system
-水平フォーム~
水平フォームなら子要素をインラインレベル要素のように縦にスタックするので、レスポンシブになる。
--レスポンシブ水平フォーム~
http://bootstrap3.cyberlab.info/css/forms-horizontal.html
-Bootstrapのグリッドシステムについてまとめてみた - Qiita~
http://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf
***form & control [#x2b7bf30]
-form-group~
form-group classを適用したdivで、labelと、controlのペアを囲む。
-グリッドシステム | 基本 | Bootstrap3の使い方~
http://bootstrap3-guide.com/base/grid.html
-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に適用する。
**レスポンシブデザイン [#l5082446]
-後述の[[水平フォーム>#rb918010]]や[[グリッドレイアウト>#kf3dffc6]]を使用して実現する。
-".col-画面幅-列数"というCSSクラスを付与することにより、画面幅毎に、~
[[水平フォーム>#rb918010]]の幅や[[グリッドレイアウト>#kf3dffc6]]グリッドの表示・非表示が変更される。
***水平フォーム [#rb918010]
-レスポンシブ水平フォーム ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/forms-horizontal.html
***グリッドレイアウト [#kf3dffc6]
-グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/gridSystem.html
-Bootstrap 3 Tutorial~
http://www.w3schools.com/bootstrap/default.asp
--Bootstrap Grids~
---BS Grid System~
http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
---BS Stacked/Horizontal~
http://www.w3schools.com/bootstrap/bootstrap_grid_stacked_to_horizontal.asp
---BS Grid Small~
http://www.w3schools.com/bootstrap/bootstrap_grid_small.asp
---BS Grid Medium~
http://www.w3schools.com/bootstrap/bootstrap_grid_medium.asp
---BS Grid Large~
http://www.w3schools.com/bootstrap/bootstrap_grid_large.asp
---BS Grid Examples~
http://www.w3schools.com/bootstrap/bootstrap_grid_examples.asp
レイアウトには、Bootstrapのグリッドシステムが利用できる。
-Bootstrapのグリッドシステムはcontainerとrowとcolのclassからなる。
--親要素 : container, container-fluid classを適用したdiv
---container : 画面サイズに合わせて段階的にリサイズ。
---container-fluid : 画面サイズに合わせて流動的にリサイズ。
--子要素 : row classを適用したdiv（縦方向にスタックする）。
--孫要素 : col classを適用したdiv（横方向にスタックする）。
-containerのサイズと幅の段階
|項番|名称|幅の段階|h
|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|h
|1|Extra small|xs|
|2|Small|sm|
|3|Medium|md|
|4|large|lg|
|5|Extra large|xl|
--columnsには、幅の段階毎に、1列-12列を指定する。
--幅の段階に対応するクラスを指定しない場合は100%（=12列）になり縦にスタックする。
--指定の幅の段階で非表示にする場合は、[[レスポンシブ・ユーティリティ>#r2d49242]]の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
***レスポンシブ・ユーティリティ [#r2d49242]
-レスポンシブ・ユーティリティ ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/responsiveUtilities.html
*スタイル [#b804abd6]
色々なクラスが用意されていてソレを使用できる。
**ボタン [#aab2d330]
-ボタン ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/buttons.html
**コンポーネント [#i655c2c6]
-≪ コンポーネント ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/components/
***インプット・グループ [#j510cbe2]
http://bootstrap3.cyberlab.info/components/inputGroups.html
テキスト入力欄の左サイド、右サイド（、もしくは、両サイドに）、~
テキストやボタンを、１つ（づつ）配置できる。
***ドロップダウン [#se8e79dc]
http://bootstrap3.cyberlab.info/components/dropdowns.html
***ボタン・グループ [#d63d0b8d]
http://bootstrap3.cyberlab.info/components/buttonGroups.html
***ドロップダウン・ボタン [#t86d380e]
http://bootstrap3.cyberlab.info/components/buttonDropdowns.html
***リスト・グループ [#q08e3e8d]
http://bootstrap3.cyberlab.info/components/listGroup.html
***ラベル [#fe385d89]
http://bootstrap3.cyberlab.info/components/labels.html
***アイコン [#t5904b2a]
http://bootstrap3.cyberlab.info/components/glyphicons.html
***バッジ [#n9ccdc69]
http://bootstrap3.cyberlab.info/components/badges.html
***ページ・ヘッダー [#k6a531d6]
http://bootstrap3.cyberlab.info/components/pageHeader.html
***パネル [#b147c05d]
http://bootstrap3.cyberlab.info/components/panels.html
***ナビゲーション [#c947a748]
http://bootstrap3.cyberlab.info/components/navs.html
***ナビゲーション・バー [#t866828e]
http://bootstrap3.cyberlab.info/components/navbar.html
***パンくずリスト [#yec66d7c]
http://bootstrap3.cyberlab.info/components/breadcrumbs.html
***ページネーション [#b663940a]
http://bootstrap3.cyberlab.info/components/pagination.html
***アラート [#j0b79d85]
http://bootstrap3.cyberlab.info/components/alerts.html
***プログレス・バー [#h2d2742b]
http://bootstrap3.cyberlab.info/components/progressBars.html
***ジャンボトロン [#q95d56b3]
http://bootstrap3.cyberlab.info/components/jumbotron.html
***サムネイル [#j1e00482]
http://bootstrap3.cyberlab.info/components/thumbnails.html
***メディア・オブジェクト [#o9ea3278]
http://bootstrap3.cyberlab.info/components/mediaObject.html
***レスポンシブな埋め込み [#zcf01c9e]
http://bootstrap3.cyberlab.info/components/responsiveEmbed.html
***埋め込み効果 [#c3a3472b]
http://bootstrap3.cyberlab.info/components/wells.html
*参考 [#i17d2f68]
-Bootstrap - Wikipedia~
https://ja.wikipedia.org/wiki/Bootstrap
-デザイン知識がなくてもOK！Bootstrapの使い方【入門者向け】 | TechAcademyマガジン~
https://techacademy.jp/magazine/6270
-CSS · Bootstrap~
http://getbootstrap.com/css/
-HTML5アプリ作ろうぜ！（11）：~
Webデザイン初心者でもできる、Bootstrapの使い方超入門 (1/4) - ＠IT~
http://www.atmarkit.co.jp/ait/articles/1403/19/news034.html
-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
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
