ダウンロード

レスポンシブヘルパー

ビューポートの幅に応じてコンテンツを表示/非表示にする

表示 #

次のdisplayクラスのいずれかを使用できます

is-block
is-flex
is-inline
is-inline-block
is-inline-flex

たとえば、is-flexヘルパーの動作は次のとおりです

クラス	モバイル最大`768px`	タブレット `769px`〜`1023px`	デスクトップ `1024px`〜`1215px`	ワイドスクリーン `1216px`〜`1407px`	FullHD `1408px`以上
`is-flex-mobile`	Flex	変更なし	変更なし	変更なし	変更なし
`is-flex-tablet-only`	変更なし	Flex	変更なし	変更なし	変更なし
`is-flex-desktop-only`	変更なし	変更なし	Flex	変更なし	変更なし
`is-flex-widescreen-only`	変更なし	変更なし	変更なし	Flex	変更なし
特定のブレークポイントまでまたはから表示するクラス
`is-flex-touch`	Flex	Flex	変更なし	変更なし	変更なし
`is-flex-tablet`	変更なし	Flex	Flex	Flex	Flex
`is-flex-desktop`	変更なし	変更なし	Flex	Flex	Flex
`is-flex-widescreen`	変更なし	変更なし	変更なし	Flex	Flex
`is-flex-fullhd`	変更なし	変更なし	変更なし	変更なし	Flex

他の表示オプションについては、is-flexをis-block、is-inline、is-inline-blockまたはis-inline-flexに置き換えるだけです

非表示 #

クラス	モバイル最大`768px`	タブレット `769px`〜`1023px`	デスクトップ `1024px`〜`1215px`	ワイドスクリーン `1216px`〜`1407px`	FullHD `1408px`以上
`is-hidden-mobile`	非表示	表示	表示	表示	表示
`is-hidden-tablet-only`	表示	非表示	表示	表示	表示
`is-hidden-desktop-only`	表示	表示	非表示	表示	表示
`is-hidden-widescreen-only`	表示	表示	表示	非表示	表示
特定のブレークポイントまでまたはから非表示にするクラス
`is-hidden-touch`	非表示	非表示	表示	表示	表示
`is-hidden-tablet`	表示	非表示	非表示	非表示	非表示
`is-hidden-desktop`	表示	表示	非表示	非表示	非表示
`is-hidden-widescreen`	表示	表示	表示	非表示	非表示
`is-hidden-fullhd`	表示	表示	表示	表示	非表示

その他の可視性ヘルパー #

`is-invisible`	可視性 hidden を追加します
`is-hidden`	要素を非表示にします
`is-sr-only`	要素を視覚的に非表示にしますが、スクリーンリーダーでアナウンスできるように要素を保持します

Bulmaを支援する方法

#native_company# #native_desc#