ブートストラップで div を非表示にする方法-フロントエンドQ&A-php.cn

ブートストラップで div を非表示にする方法

WBOY

リリース： 2022-05-07 15:57:17

オリジナル

2835 人が閲覧しました

ブートストラップでは、div のクラス名を使用して div を非表示にできます。div 要素を非表示にするには、非表示のクラス名を使用します。非表示の div を表示するには、show クラス名を使用します。構文は次のとおりです。 "

div の内容
"。

ブートストラップで div を非表示にする方法

このチュートリアルの動作環境: Windows 10 システム、ブートストラップバージョン 3.3.7、DELL G3 コンピューター

ブートストラップで div を非表示にする方法

ブートストラップでは、要素を表示または非表示にするためのクラス名が提供されており、要素を表示または非表示にする場合に非常に便利です。

test.html という名前の新しい HTML ファイルを作成して、ブートストラップでコンテンツを表示または非表示にする方法を説明します。リンクタグを使用して、bootstrap.min.css ファイルを読み込みます。

div タグ内で、div を使用して 2 行のテキストを作成します。 2 つの div に class 属性を追加し、class を通じてスタイルを設定します。このうち、テストするクラスが設定された div は非表示になり、表示されません。

hidden クラス名を使用して子 div 要素を非表示にし、show クラス名を使用してクラステストを持つ div を非表示から表示にします。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="js/bootstrap.min.css">
</head>
<body>
    <style>
        .mydiv{
            width:400px;
            height:50px;
            background:#ccc;
        }
    .mydiv.test{
        display:none;
    }
    </style>
    <div class="mydiv">
        <div class="hidden">这是测试的内容1</div>
        <div class="test show">这是测试的内容2</div>
    </div>
</body>
</html>

ログイン後にコピー

ブラウザで test.html ファイルを開いて効果を確認します。

出力結果:

ブートストラップで div を非表示にする方法