Comment masquer div dans bootstrap-Questions et réponses frontales-php.cn

Comment masquer div dans bootstrap

WBOY

Libérer： 2022-05-07 15:57:17

original

2797 Les gens l'ont consulté

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

Comment masquer div dans bootstrap

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>

Copier après la connexion

Ouvrez le fichier test.html dans le navigateur pour voir l'effet.

Résultat de sortie :

Comment masquer div dans bootstrap

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!