.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

  • BootstrapはTwitter社が開発したCSSのフレームワーク
  • よく使われるスタイルやJavaScript用拡張があらかじめ定義してあるので、
    ルールに沿って利用するだけで整ったデザインのページを作成できる。
  • Ver2.0以降ではレスポンシブデザインに対応している
    CSS3のメディアクエリを使用しスマートフォンやタブレットのブラウザの
    横幅サイズを判断基準として、レイアウトデザインを柔軟に調整可能。
  • サイトの基本情報がすべてのデバイスのブラウザで利用できるよう、部分的な互換性という概念を用いている。
    • HTML5やCSS3では比較的サポートが不完全だが、主要なWebブラウザとの互換性がある。
    • CSS3で導入された古いWebブラウザでサポートされていない機能が、サポートされる。
  • JavaScriptライブラリ
    • jQueryを読み込む必要がある。
    • jQuery UIと競合する部分がある。
  • classの効用の詳細は書かれていないので、
    見出しのレイアウトやコンポーネントに対応するsnippetを使用して開発を行うstyle。
    このため、classの詳細を知りたい場合、bootstrapの*.cssファイルの中を読む必要がある。

レイアウト

フォーム

並び

form & control

  • form-group
    form-group classを適用したdivで、labelと、controlのペアを囲む。
  • label
    • for="controlのID"
    • control-label
      • forms-horizontalの場合、form-group内のlabelに適用する。
      • その他、has-success、has-warning、has-errorクラスで使用されている。
  • control
    • form-control
      form-group内のcontrolに適用する。

レスポンシブデザイン

水平フォーム

グリッドレイアウト

レイアウトには、Bootstrapのグリッドシステムが利用できる。

  • Bootstrapのグリッドシステムはcontainerとrowとcolのclassからなる。
  • 親要素 : container, container-fluid classを適用したdiv
    • container : 画面サイズに合わせて段階的にリサイズ。
    • container-fluid : 画面サイズに合わせて流動的にリサイズ。
  • 子要素 : row classを適用したdiv(縦方向にスタックする)。
  • 孫要素 : col classを適用したdiv(横方向にスタックする)。
  • containerのサイズと幅の段階
    項番名称幅の段階
    1Extra small極小(544px未満)
    2Small小(544px以上 768px未満)
    3Medium画面幅 中 (768px以上 992px未満)
    4large画面幅 大 (992px以上 1200px未満)
    5Extra large画面幅 特大 (1200px以上)
  • col classには、class="col-{prefix}-{columns}"の形で書く。
    • 幅の段階毎に以下のprefixを指定する。
      項番名称prefix
      1Extra smallxs
      2Smallsm
      3Mediummd
      4largelg
      5Extra largexl
    • columnsには、幅の段階毎に、1列-12列を指定する。
    • 幅の段階に対応するクラスを指定しない場合は100%(=12列)になり縦にスタックする。
    • 指定の幅の段階で非表示にする場合は、レスポンシブ・ユーティリティのclass="hidden-{prefix}"を書く。

レスポンシブ・ユーティリティ

スタイル

色々なクラスが用意されていてソレを使用できる。

ボタン

コンポーネント

インプット・グループ

http://bootstrap3.cyberlab.info/components/inputGroups.html

テキスト入力欄の左サイド、右サイド(、もしくは、両サイドに)、
テキストやボタンを、1つ(づつ)配置できる。

ドロップダウン

http://bootstrap3.cyberlab.info/components/dropdowns.html

ボタン・グループ

http://bootstrap3.cyberlab.info/components/buttonGroups.html

ドロップダウン・ボタン

http://bootstrap3.cyberlab.info/components/buttonDropdowns.html

リスト・グループ

http://bootstrap3.cyberlab.info/components/listGroup.html

ラベル

http://bootstrap3.cyberlab.info/components/labels.html

アイコン

http://bootstrap3.cyberlab.info/components/glyphicons.html

バッジ

http://bootstrap3.cyberlab.info/components/badges.html

ページ・ヘッダー

http://bootstrap3.cyberlab.info/components/pageHeader.html

パネル

http://bootstrap3.cyberlab.info/components/panels.html

ナビゲーション

http://bootstrap3.cyberlab.info/components/navs.html

ナビゲーション・バー

http://bootstrap3.cyberlab.info/components/navbar.html

パンくずリスト

http://bootstrap3.cyberlab.info/components/breadcrumbs.html

ページネーション

http://bootstrap3.cyberlab.info/components/pagination.html

アラート

http://bootstrap3.cyberlab.info/components/alerts.html

プログレス・バー

http://bootstrap3.cyberlab.info/components/progressBars.html

ジャンボトロン

http://bootstrap3.cyberlab.info/components/jumbotron.html

サムネイル

http://bootstrap3.cyberlab.info/components/thumbnails.html

メディア・オブジェクト

http://bootstrap3.cyberlab.info/components/mediaObject.html

レスポンシブな埋め込み

http://bootstrap3.cyberlab.info/components/responsiveEmbed.html

埋め込み効果

http://bootstrap3.cyberlab.info/components/wells.html

参考


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-03-30 (木) 21:40:33 (1337d)