![[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] ***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. ***BootstrapでレスポンシブなWebサイト制作 [#g7422698] BootstrapでレスポンシブなWebサイト制作：連載｜gihyo.jp … 技術評論社~ http://gihyo.jp/design/serial/01/bootstrap3 -第1回 今どきのWebサイト制作にはBootstrapがおすすめ！ -第2回 グリッドシステムとブレイクポイントを理解する -第3回 Bootstrapの基本スタイルを覚えよう --静的な要素 --フォーム ---一行フォーム ---横並びのフォーム ---フォームサイズの変更 ---フォームの解説テキスト --ボタン ---ボタンの意味に合わせたデザイン ---ボタンのサイズ変更 ---ブロックレベルボタン ---ボタンのアクティブ表示 --チェックボックスとラジオボタン ---インライン チェックボックス・ラジオボタン --バリデーションの表示方法 ---バリデーションの表示方法 --ヘルパークラス群 ---フロート関連のクラス ---要素の表示・非表示 ---sr-onlyクラス（1px×1px要素） -第4回 デザインパーツを使おう --新しくなったグラフィックアイコン --ドロップダウンメニュー ---外箱の用意 ---ボタンの用意 ---ドロップダウンメニューの中身を作る ---ドロップダウン項目にタイトルをつける --ボタングループ ---ボタンツールバー ---ジャストフィットボタングループ ---縦並びのボタングループ ---ボタンググループのサイズ ---ボタングループ + ドロップダウンメニュー --ナビゲーション ---タブ型ナビゲーション ---ピル型ナビゲーション、縦積み、両端詰め ---ナビゲーション + ドロップダウンメニュー ---ナビゲーションバー *参考 [#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 -CSS · Bootstrap~ http://getbootstrap.com/css/ -Bootstrap3日本語リファレンス~ http://bootstrap3.cyberlab.info/ -Bootstrap 3 Tutorial~ http://www.w3schools.com/bootstrap/default.asp
