![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp/index.php?FrontPage]] -[[戻る>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] -一つ上の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 -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 *参考 [#i17d2f68] -Bootstrap - Wikipedia~ https://ja.wikipedia.org/wiki/Bootstrap -デザイン知識がなくても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 -Bootstrap3日本語リファレンス~ http://bootstrap3.cyberlab.info/ -Bootstrap 3 Tutorial~ http://www.w3schools.com/bootstrap/default.asp
