そこで、私はTwitter Bootstrap の Web サイトをいじってみました。ブラウザー ウィンドウを縮小すると、上部のナビゲーション バーがどのように折りたたまれて別のレイアウトになるのか興味をそそられました。
展開するとこんな感じ。
そして折りたたむとこんな感じ。
これはどのように行われていますか?
そこで、私はTwitter Bootstrap の Web サイトをいじってみました。ブラウザー ウィンドウを縮小すると、上部のナビゲーション バーがどのように折りたたまれて別のレイアウトになるのか興味をそそられました。
展開するとこんな感じ。
そして折りたたむとこんな感じ。
これはどのように行われていますか?
メディアクエリによる変更を行います。CSS3は、メディア(ビューポート?)ごとにメディアに依存するスタイルシートを許可し、幅/高さなどを検出します
メディアクエリの詳細:https ://developer.mozilla.org/en/CSS/Media_queries 私は彼らのcssを一瞥しましたが、ページcssソースでヒントを得ることができます:bootstrap- response.css
ブートストラップは、ツールキットでもレスポンシブデザインを促進すると思います。お役に立てれば。