[[.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]]を使用して実現する。

-".col-画面幅-列数"というCSSクラスを付与することにより~
画面幅毎に[[グリッドレイアウト>#v5377ce1]]が変更される。

**参考 [#e609de76]
-Bootstrapのグリッドシステムの使い方を初心者に向けておさらいする~
http://websae.net/twitter-bootstrap-grid-system-21060224/

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

**参考 [#tb886d65]

***Bootstrap 3 Tutorial [#e0d1d0f4]
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

***その他 [#i1d10a0e]
-一つ上の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]
色々なクラスが用意されていてソレを使用できる。

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