So verstecken Sie div im Bootstrap-Front-End-Fragen und Antworten-php.cn

So verstecken Sie div im Bootstrap

WBOY

Freigeben： 2022-05-07 15:57:17

Original

2811 Leute haben es durchsucht

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".

So verstecken Sie div im Bootstrap

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>

Nach dem Login kopieren

Öffnen Sie die Datei test.html im Browser, um den Effekt zu sehen.

Ausgabeergebnis:

So verstecken Sie div im Bootstrap

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!