Maison > Article > interface Web > Comment masquer div dans bootstrap
Comment masquer div dans bootstrap
- WBOYoriginal
- 2022-05-07 15:57:172780parcourir
Dans bootstrap, vous pouvez utiliser le nom de classe du div pour masquer le div. Utilisez le nom de classe caché pour rendre l'élément div invisible. Utilisez le nom de classe show pour rendre le div caché visible. class ="caché">contenu de div".
L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3
Comment masquer div dans bootstrap
Dans bootstrap, le nom de la classe pour afficher ou masquer les éléments est fourni, ce qui peut être très pratique pour afficher ou masquer un élément.
Créez un nouveau fichier html nommé test.html pour expliquer comment afficher ou masquer le contenu dans bootstrap. Utilisez la balise link pour charger le fichier bootstrap.min.css.
À l'intérieur de la balise div, utilisez div pour créer deux lignes de texte. Ajoutez l'attribut class aux deux div et définissez leurs styles via la classe. Parmi eux, le div avec la classe définie à tester est masqué et invisible.
Utilisez le nom de classe caché pour rendre l'élément div enfant invisible et utilisez le nom de classe show pour rendre le div avec test de classe de caché à visible.
<!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>Ouvrez le fichier test.html dans le navigateur pour voir l'effet.
Résultat de sortie :
Résumé :
1. Utilisez la balise link pour charger le fichier bootstrap.min.css.
2. Dans la balise div, utilisez div pour créer deux lignes de texte.
3. Ajoutez l'attribut class aux deux div et définissez leurs styles via la classe. Parmi eux, le div avec la classe définie à tester est masqué et invisible.
4. Utilisez le nom de classe caché pour rendre les éléments div enfants invisibles et utilisez le nom de classe show pour rendre le div avec test de classe de caché à visible.
5. Ouvrez le fichier test.html dans le navigateur pour vérifier l'effet.
Recommandations associées : Tutoriel bootstrap
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!