ホームページ > 記事 > ウェブフロントエンド > ブートストラップで div を非表示にする方法
ブートストラップで div を非表示にする方法
- WBOYオリジナル
- 2022-05-07 15:57:172792ブラウズ
ブートストラップでは、div のクラス名を使用して div を非表示にできます。div 要素を非表示にするには、非表示のクラス名を使用します。非表示の div を表示するには、show クラス名を使用します。構文は次のとおりです。 "
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 ファイルを開いて効果を確認します。
出力結果:
概要:
1. リンク タグを使用して、bootstrap.min.css ファイルを読み込みます。
2. div タグ内で、div を使用して 2 行のテキストを作成します。
3. 2 つの div に class 属性を追加し、クラスを通じてスタイルを設定します。このうち、テスト対象のクラスが設定された div は非表示になり、表示されません。
4.hidden クラス名を使用して子 div 要素を非表示にし、show クラス名を使用してクラス テストを持つ div を非表示から表示にします。
5. ブラウザで test.html ファイルを開いて効果を確認します。
関連する推奨事項: ブートストラップ チュートリアル
以上がブートストラップで div を非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。