情報アイランド

「情報を制する者は世界を制す」をモットーに様々な情報を提供することを目指すブログです。現在はプログラミング関連情報が多めですが、投資関連情報も取り扱っていきたいです。

Bootstrap4でコンテンツの表示/非表示を切り替える

Bootstrap4で画面の幅(ブラウザのドキュメント表示部分の幅)に応じてコンテンツの表示/非表示を切り替えるにはコンテンツを表す要素に表示されたりされなかったりする基準の幅と表示か非表示かとコンテンツを表す要素をインライン要素とするかブロック要素とするかインラインブロック要素とするかに応じて下のようなクラスを指定します。

  • 0px以上で非表示・・・d-none
  • 0px以上で表示(インライン要素)・・・d-inline
  • 0px以上で表示(ブロック要素)・・・d-block
  • 0px以上で表示(インラインブロック要素)・・・d-inline-block
  • 576px以上で非表示・・・d-sm-none
  • 576px以上で表示(インライン要素)・・・d-sm-inline
  • 576px以上で表示(ブロック要素)・・・d-sm-block
  • 576px以上で表示(インラインブロック要素)・・・d-sm-inline-block
  • 768px以上で非表示・・・d-md-none
  • 768px以上で表示(インライン要素)・・・d-md-inline
  • 768px以上で表示(ブロック要素)・・・d-md-block
  • 768px以上で表示(インラインブロック要素)・・・d-md-inline-block
  • 992px以上で非表示・・・d-lg-none
  • 992px以上で表示(インライン要素)・・・d-lg-inline
  • 992px以上で表示(ブロック要素)・・・d-lg-block
  • 992px以上で表示(インラインブロック要素)・・・d-lg-inline-block
  • 1200px以上で非表示・・・d-xl-none
  • 1200px以上で表示(インライン要素)・・・d-xl-inline
  • 1200px以上で表示(ブロック要素)・・・d-xl-block
  • 1200px以上で表示(インラインブロック要素)・・・d-xl-inline-block

ただし、コンテンツを表す要素をフレックスとする場合にはインライン要素のフレックスとする場合にはクラスの名称のinlineの部分をinline-flexとし、ブロック要素のフレックスとする場合にはblockの部分をflexとします。

画面の幅に応じて<div>要素の表示/非表示が切り替わるHTMLドキュメントの例です。ただし、最初の<div>要素は画面の幅をコンテンツとする普通の<div>要素です。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title></title>
  <link href="/asset/lib/bootstrap-4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    div {
      margin: 4px 0px;
    }
  </style>
</head>
<body>
  <script src="/asset/lib/jquery-3.2.1/jquery-3.2.1.min.js"></script>
  <script src="/asset/lib/popper-1.0.1/popper.min.js"></script>
  <script src="/asset/lib/bootstrap-4.0.0/js/bootstrap.min.js"></script>
  <script>
    $(function() {
      $('#width').text($('#width').width());
      $(window).resize(function () {
        $('#width').text($('#width').width());
      });
    });
  </script>

  <div id="width"></div>

  <div class="d-block">d-block</div>
  <div class="d-none d-sm-block d-md-none d-lg-block d-xl-none">d-none d-sm-block d-md-none d-lg-block d-xl-none</div>
  <div class="d-none d-md-block d-lg-none d-xl-block">d-none d-md-block d-lg-none d-xl-block</div>
  <div class="d-none d-lg-block d-xl-none">d-none d-lg-block d-xl-none</div>
  <div class="d-none d-xl-block">d-none d-xl-block</div>
</html>

このHTMLドキュメントはブラウザで表示すると画面の幅によって表示が下のように変化します。

pizyumi
プログラミング歴19年のベテランプログラマー。業務システム全般何でも作れます。現在はWeb系の技術を勉強中。
スポンサーリンク

-bootstrap