Twitter Bootstrapで端末サイズ毎にHTML要素の表示・非表示を切り替え

Twitter Bootstrap3 でデバイス端末のサイズごとに、HTML要素の表示・非表示を切り替えて設定する方法です。今日初めて知ってちょっと恥ずかしくなったのですけど、これ超絶便利ですね!

スポンサーリンク

Bootstrap の Responsive utilities

CSS・Bootstrap -> Responsive utilities -> Available classes

詳細は上記ページの、Available classes の表を見ると一目瞭然。

スクリーンショット 2014-09-28 21.56.39

緑の Visible のマスが要素を表示、白の Hidden のマスが要素を非表示となります。

要素の class にvisible-xs, hidden-xs などを指定

例えば、以下のように div ブロック要素の class に visible-xs を指定した場合…

モバイル(768px未満)の場合にのみ、mobile-menu がページ上に表示されます。768px以上のデバイス(通常のデスクトップなど)では mobile-menu はページ上には表示されません。ただし HTML ソース上には出力されており、おそらく CSS の display か visibility プロパティを用いて、block/none, visible/hidden などの値でコントロールされているのかな?

逆に以下のように hidden-xs を指定すると、今度はモバイル(768px未満)の場合にのみ、要素を非表示にします。

desktop-menu は、768px以上のデバイスの場合に表示される。

超簡単にデバイスのサイズでブロック要素の表示・非表示を切り替えられます。これは便利。

スポンサーリンク
私は CSS がちょっと苦手なので勉強せねば...
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!