.NET 開発基盤部会 Wiki
目次 †
概要 †
- BootstrapはTwitter社が開発したCSSのフレームワーク
- よく使われるスタイルやJavaScript用拡張があらかじめ定義してあるので、
ルールに沿って利用するだけで整ったデザインのページを作成できる。
- Ver2.0以降ではレスポンシブデザインに対応している
CSS3のメディアクエリを使用しスマートフォンやタブレットのブラウザの
横幅サイズを判断基準として、レイアウトデザインを柔軟に調整可能。
- サイトの基本情報がすべてのデバイスのブラウザで利用できるよう、部分的な互換性という概念を用いている。
- HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。
- CSS3で導入された古いWebブラウザでサポートされていない機能が、サポートされる。
- JavaScriptライブラリ
- jQueryを読み込む必要がある。
- jQuery UIと競合する部分がある。
レスポンシブデザイン †
- ".col-画面幅-列数"というCSSクラスを付与することにより
画面幅毎にグリッドレイアウトが変更される。
参考 †
レイアウト（グリッドレイアウト） †
Bootstrapのグリッドシステムというものが利用できるもよう。
参考 †
Bootstrap 3 Tutorial †
http://www.w3schools.com/bootstrap/default.asp
その他 †
スタイル（基本スタイル、デザインパーツ） †
色々なクラスが用意されていてソレを使用できる。
参考 †
Bootstrap 3 Tutorial †
http://www.w3schools.com/bootstrap/default.asp
BootstrapでレスポンシブなWebサイト制作 †
BootstrapでレスポンシブなWebサイト制作：連載｜gihyo.jp … 技術評論社
http://gihyo.jp/design/serial/01/bootstrap3
- 第1回 今どきのWebサイト制作にはBootstrapがおすすめ！
- 第2回 グリッドシステムとブレイクポイントを理解する
- 第3回 Bootstrapの基本スタイルを覚えよう
- フォーム
- 一行フォーム
- 横並びのフォーム
- フォームサイズの変更
- フォームの解説テキスト
- ボタン
- ボタンの意味に合わせたデザイン
- ボタンのサイズ変更
- ブロックレベルボタン
- ボタンのアクティブ表示
- ヘルパークラス群
- フロート関連のクラス
- 要素の表示・非表示
- sr-onlyクラス（1px×1px要素）
- 第4回 デザインパーツを使おう
- 新しくなったグラフィックアイコン
- ドロップダウンメニュー
- 外箱の用意
- ボタンの用意
- ドロップダウンメニューの中身を作る
- ドロップダウン項目にタイトルをつける
- ボタングループ
- ボタンツールバー
- ジャストフィットボタングループ
- 縦並びのボタングループ
- ボタンググループのサイズ
- ボタングループ + ドロップダウンメニュー
- ナビゲーション
- タブ型ナビゲーション
- ピル型ナビゲーション、縦積み、両端詰め
- ナビゲーション + ドロップダウンメニュー
- ナビゲーションバー
参考 †
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
