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

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);
}

【設定】

【Bootstrap3.xとの変更箇所】

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