Heim > Artikel > Web-Frontend > So verstecken Sie div im Bootstrap
So verstecken Sie div im Bootstrap
- WBOYOriginal
- 2022-05-07 15:57:172795Durchsuche
Im Bootstrap können Sie den Klassennamen des Div verwenden, um das Div-Element auszublenden. Verwenden Sie den Klassennamen show, um das ausgeblendete Div sichtbar zu machen Klasse ="versteckt">Inhalt von div".
Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer
So verstecken Sie div in Bootstrap
In Bootstrap wird der Klassenname zum Anzeigen oder Ausblenden von Elementen bereitgestellt. Dies kann sehr praktisch sein, um ein Element anzuzeigen oder auszublenden.
Erstellen Sie eine neue HTML-Datei mit dem Namen test.html, um zu erklären, wie Inhalte im Bootstrap angezeigt oder ausgeblendet werden. Verwenden Sie das Link-Tag, um die Datei „bootstrap.min.css“ zu laden.
Verwenden Sie im div-Tag div, um zwei Textzeilen zu erstellen. Fügen Sie den beiden Divs das Klassenattribut hinzu und legen Sie ihre Stile über die Klasse fest. Unter ihnen ist das Div mit der auf test eingestellten Klasse ausgeblendet und unsichtbar.
Verwenden Sie den versteckten Klassennamen, um das untergeordnete div-Element unsichtbar zu machen, und verwenden Sie den show-Klassennamen, um das div mit Klassentest von versteckt auf sichtbar zu machen.
<!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>Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.
Ausgabeergebnis:
Zusammenfassung:
1 Verwenden Sie das Link-Tag, um die Datei „bootstrap.min.css“ zu laden.
2. Verwenden Sie innerhalb des div-Tags div, um zwei Textzeilen zu erstellen.
3. Fügen Sie den beiden Divs das Klassenattribut hinzu und legen Sie ihre Stile über die Klasse fest. Unter ihnen ist das Div mit der auf test eingestellten Klasse ausgeblendet und unsichtbar.
4. Verwenden Sie den Namen der versteckten Klasse, um die untergeordneten Div-Elemente unsichtbar zu machen, und verwenden Sie den Namen der Show-Klasse, um das Div mit Klassentest von „versteckt“ auf „sichtbar“ zu machen.
5. Öffnen Sie die Datei test.html im Browser, um den Effekt zu überprüfen.
Verwandte Empfehlungen: Bootstrap-Tutorial
Das obige ist der detaillierte Inhalt vonSo verstecken Sie div im Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!