「[[.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と競合する部分がある。 -概要 ≪ CSS ≪ Bootstrap3日本語リファレンス~ http://bootstrap3.cyberlab.info/css/overview.html -classの効用の詳細は書かれていないので、~ 見出しのレイアウトやコンポーネントに対応するsnippetを使用して開発を行うstyle。~ このため、classの詳細を知りたい場合、bootstrapの*.cssファイルの中を読む必要がある。 --Bootstrap · The world's most popular mobile-first and responsive front-end framework.~ http://getbootstrap.com/ *レイアウト [#v5377ce1] **フォーム [#dfdbba2e] -フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス~ http://bootstrap3.cyberlab.info/css/forms.html ***並び [#a0595c2d] -インライン・フォーム~ 子要素をインラインレベル要素のように横にスタックする。 --≪ フォーム ≪ CSS ≪ Bootstrap3日本語リファレンス ---インライン・フォーム~ http://bootstrap3.cyberlab.info/css/forms-inline.html ---インライン・フォーム内のインプット・グループ~ http://bootstrap3.cyberlab.info/css/forms-inputGroups.html -水平フォーム~ 水平フォームなら子要素をインラインレベル要素のように縦にスタックするので、レスポンシブになる。 --レスポンシブ水平フォーム~ http://bootstrap3.cyberlab.info/css/forms-horizontal.html ***form & control [#x2b7bf30] -form-group~ form-group classを適用したdivで、labelと、controlのペアを囲む。 -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のグリッドシステムが利用できる。 -Bootstrapのグリッドシステムはcontainerとrowとcolのclassからなる。 --親要素がcontainer classを適用したdiv、 --子要素が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 テキスト入力欄の左サイド、右サイド(、もしくは、両サイドに)、~ テキストやボタンを、1つ(づつ)配置できる。 ***ドロップダウン [#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 -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