JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

Bootstrapで要素を非表示にする方法：hiddenクラスの使い方

Bootstrapで要素を非表示にする方法

BootstrapでHTML要素を非表示にしたい場合は、.hiddenクラスを使用します。このクラスを要素に適用すると、その要素は画面上から隠れ、表示されなくなります。

使用例

以下のコードを実行すると、hiddenクラスの動作を実際に確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Example</title>
      <link href = "/bootstrap/css/bootstrap.min.css" rel = "stylesheet">
      <script src = "/scripts/jquery.min.js"></script>
      <script src = "/bootstrap/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class = "row" style = "padding: 91px 100px 19px 50px;">
         <div class = "show" style = "left-margin:10px; width:300px; background-color:#ccc;">
            この要素は表示されます。
         </div>
         <div class = "hidden" style = "width:200px; background-color:#ccc;">
            これはhiddenクラスの使用例です。この要素は非表示になります。
         </div>
      </div>
   </body>
</html>

このコードでは、「show」クラスが適用された最初の要素は画面に表示されますが、「hidden」クラスが適用された2番目の要素は非表示になります。

補足：Bootstrap 4以降をご利用の場合

なお、.hiddenクラスはBootstrap 3で提供されていたユーティリティクラスです。Bootstrap 4以降では.d-noneクラスに置き換えられているため、最新バージョンのBootstrapを使用している場合は、.d-noneクラスを利用してください。

  1. C#のConsoleクラスとは？主要プロパティの使い方を実例付きで解説

    C#のConsoleクラスは、コンソールアプリケーションにおける標準入力・標準出力・標準エラー出力の各ストリームを表すクラスです。テキストの表示や入力の読み取りだけでなく、文字色や背景色の変更、カーソル位置やサイズの制御など、コンソール操作に関するさまざまな機能が提供されています。ここでは、Consoleクラスの代表的なプロパティの使い方を、サンプルコードと実行結果とあわせて解説します。Console.CursorLeftプロパティコンソール上のカーソル位置（左端から数えた列位置）を変更するには、Console.CursorLeftプロパティを使用します。サンプルコードusing System

  2. 【C#】Tuple<T1, T2, T3, T4, T5, T6>クラスの使い方を徹底解説

    C#のTuple<T1, T2, T3, T4, T5, T6>クラスとは Tuple<T1, T2, T3, T4, T5, T6> クラスは、6 つの要素を持つ「6 タプル」を表します。タプルとは、複数の要素を順序付けてひとまとめに格納できるデータ構造で、各要素にはそれぞれ異なる型を指定できます。 このクラスは、次のような場面で活用されます。 データセットへのシンプルなアクセス データセットの容易な操作 単一のデータセットとしての表現 メソッドから複数の値を返したい場合 メソッドに複数の値を渡したい場合 主要な6つのプロパティ Tuple<T1, T2,