Bootstrap 応答性の高いユーティリティ

Bootstrap 响应式实用工具

この記事では、Bootstrap フレームワークで提供される応答性ユーティリティについて説明します。これらのユーティリティを使用すると、さまざまな画面サイズに応じてページ要素を非表示にしたり、表示したりして、さまざまなデバイスに適応する応答性の高い Web ページを作成できます。

一、はじめに

レスポンシブデザインとは、PC、タブレット、スマートフォンなど、さまざまなデバイスで快適に閲覧できるように、Webサイトのレイアウトや表示を最適化する設計手法です。Bootstrap のレスポンシブユーティリティは、このレスポンシブデザインを実現するために役立つツールです。

visible-* と hidden-* クラスは、特定の画面サイズで要素を表示または非表示にするために使用します。 * は、以下のブレークポイントのサフィックスを表します。

これらのクラスを使用すると、要素の表示状態を簡単に制御できます。たとえば、 visible-md-up クラスを適用した要素は、中画面サイズ以上でのみ表示されます。


<div class="visible-xs">この要素は、エクストラスモール画面サイズでのみ表示されます。</div>
<div class="hidden-sm">この要素は、スモール画面サイズでは非表示になります。</div>

上記の例では、最初の div 要素は visible-xs クラスが適用されているため、エクストラスモール画面サイズでのみ表示されます。 2 番目の div 要素は hidden-sm クラスが適用されているため、スモール画面サイズでは非表示になります。

visible-print-* と hidden-print-* クラスは、印刷時に要素を表示または非表示にするために使用します。これらのクラスは、画面上の表示には影響しません。


<p class="hidden-print">この段落は、画面上でのみ表示され、印刷時には非表示になります。</p>
<p class="visible-print-block">この段落は、印刷時にのみ表示され、画面上では非表示になります。</p>

上記の例では、最初の p 要素は hidden-print クラスが適用されているため、印刷時には非表示になります。 2 番目の p 要素は visible-print-block クラスが適用されているため、印刷時にのみ表示されます。

この記事では、Bootstrap のレスポンシブユーティリティについて解説しました。これらのユーティリティを使用することで、さまざまな画面サイズや印刷時に要素の表示状態を簡単に制御できます。レスポンシブな Web サイトを作成する際には、ぜひこれらのユーティリティを活用してください。