「[[.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と競合する部分がある。

*スタイル [#b804abd6]
色々なクラスが用意されていてソレを使用できる。

**コンポーネント [#i655c2c6]

***インプット・グループ [#j510cbe2]
テキスト入力欄の左サイド、右サイド(、もしくは、両サイドに)、テキストやボタンを、1つ(づつ)配置できる。

-インプット・グループ ≪ コンポーネント ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/components/inputGroups.html

*レイアウト [#v5377ce1]
**フォーム [#dfdbba2e]
-フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/forms.html

***form & control [#x2b7bf30]
-form-group
-form-control
-control-label

***インライン・フォーム [#kf2e4801]
-≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス
--インライン・フォーム~
http://bootstrap3.cyberlab.info/css/forms-inline.html
--インライン・フォーム内のインプット・グループ~
http://bootstrap3.cyberlab.info/css/forms-inputGroups.html

***水平フォーム [#rb918010]
水平フォームなら、レスポンジブ。

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

**レスポンシブデザイン [#l5082446]
-後述の[[水平フォーム>#rb918010]]や[[グリッドレイアウト>#kf3dffc6]]を使用して実現する。

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

**水平フォーム [#rb918010]
form-group
***水平フォーム [#rb918010]
-レスポンシブ水平フォーム ≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス~
http://bootstrap3.cyberlab.info/css/forms-horizontal.html

**グリッドレイアウト [#kf3dffc6]
***グリッドレイアウト [#kf3dffc6]
Bootstrapのグリッドシステムというものが利用できるもよう。

***参考 [#tb886d65]
-参考
--グリッド・システム ≪ 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のグリッドシステムの使い方を初心者に向けておさらいする~
http://websae.net/twitter-bootstrap-grid-system-21060224/

--一つ上のwebデザイナーに!BootstrapのグリッドシステムをわかりやすくCode部~
https://blog.codecamp.jp/bootstrap_grid_system

--Bootstrapのグリッドシステムについてまとめてみた - Qiita~
http://qiita.com/akatsuki174/items/53b7367b04ed0b066bbf

--グリッドシステム | 基本 | Bootstrap3の使い方~
http://bootstrap3-guide.com/base/grid.html

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

*スタイル [#b804abd6]
色々なクラスが用意されていてソレを使用できる。

**基本スタイル [#jdce96b1]
**デザインパーツ [#u5612d74]
**参考 [#x74155ae]

***Bootstrap 3 Tutorial [#y460b29c]
http://www.w3schools.com/bootstrap/default.asp
-Bootstrap Tutorial
--BS HOME~
http://www.w3schools.com/bootstrap/default.asp
--BS Get Started~
http://www.w3schools.com/bootstrap/bootstrap_get_started.asp
--BS Grid Basic~
http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
--BS Buttons~
http://www.w3schools.com/bootstrap/bootstrap_buttons.asp
--BS List Groups~
http://www.w3schools.com/bootstrap/bootstrap_list_groups.asp
--BS Panels~
http://www.w3schools.com/bootstrap/bootstrap_panels.asp
--BS Dropdowns~
http://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp
--BS Forms~
http://www.w3schools.com/bootstrap/bootstrap_forms.asp
--BS Inputs~
http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
--BS Inputs 2~
http://www.w3schools.com/bootstrap/bootstrap_forms_inputs2.asp
--BS Input Sizing~
http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
--, etc.

*参考 [#i17d2f68]
-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


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS