メインコンテンツへスキップ

Bootstrap4.xの使い方をBootstrap3.xからの変更箇所を交えて解説しています。

可視性ユーティリティ（Visibility） v4.0.0設定変更

可視性ユーティリティを使用して、要素の表示を変更せずに可視性を制御。

可視性ユーティリティで要素の visibility を設定。これらのユーティリティクラスは、 display の値を全く変更せず、レイアウトに影響を与えない。.invisible 要素はまだページ内にスペースを残す。コンテンツは、視覚的にも支援技術/スクリーンリーダーのユーザーにも表示しない。

必要に応じて .visible または .invisible を適用する。

見本

●表示：.visible v4.0.0名称変更

表示される

●非表示（領域自体は表示）：.invisible

設定例
表示<div class="visible">表示される</div>
非表示（領域自体は表示）<div class="invisible">表示されません</div>
Sassでの設定// クラス
.visible {
	visibility: visible !important;
}
.invisible {
	visibility: hidden !important;
}

// mixinとして使用
//警告：`invisible()` mixinはv4.3.0から非推奨。v5で完全に削除。
.element {
	@include invisible(visible);
}
.element {
	@include invisible(hidden);
}

【設定】

【変更履歴】

  • 【v4.0.0】
    • 表示：.show ⇒ .visible または .d-block を使用
    • 領域自体も非表示：.hidden ⇒ .d-none を使用
    • ※.hidden と .show は、jQueryの $(...).hide() と $(...).show() に干渉するため廃止。

ページ移動