Bagaimana untuk menyembunyikan div dalam bootstrap-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyembunyikan div dalam bootstrap

WBOY

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

asal

2811 orang telah melayarinya

Dalam bootstrap, anda boleh menggunakan nama kelas div untuk menyembunyikan div Gunakan nama kelas tersembunyi untuk menjadikan elemen div tidak kelihatan "

kandungan div
".

Bagaimana untuk menyembunyikan div dalam bootstrap

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Cara menyembunyikan div dalam bootstrap

Dalam bootstrap, nama kelas untuk memaparkan atau menyembunyikan elemen disediakan, yang boleh menjadi sangat mudah untuk memaparkan atau menyembunyikan elemen.

Buat fail html baharu, bernama test.html, untuk menerangkan cara untuk menunjukkan atau menyembunyikan kandungan dalam bootstrap. Gunakan teg pautan untuk memuatkan fail bootstrap.min.css.

Dalam teg div, gunakan div untuk mencipta dua baris teks. Tambahkan atribut kelas pada dua div dan tetapkan gaya mereka melalui kelas Antaranya, div dengan set kelas untuk diuji tersembunyi dan tidak kelihatan.

Gunakan nama kelas tersembunyi untuk menjadikan elemen div kanak-kanak tidak kelihatan dan gunakan nama kelas tunjukkan untuk menjadikan div dengan ujian kelas daripada tersembunyi kepada kelihatan.

<!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>

Salin selepas log masuk

Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.

Hasil keluaran:

Bagaimana untuk menyembunyikan div dalam bootstrap

Ringkasan:

1. Gunakan teg pautan untuk memuatkan fail bootstrap.min.css.

2 Dalam teg div, gunakan div untuk mencipta dua baris teks.

3. Tambahkan atribut kelas pada dua div dan tetapkan gaya mereka melalui kelas Antaranya, div dengan set kelas untuk diuji tersembunyi dan tidak kelihatan.

4. Gunakan nama kelas tersembunyi untuk menjadikan elemen div kanak-kanak tidak kelihatan, dan gunakan nama kelas tunjukkan untuk menjadikan div dengan ujian kelas daripada tersembunyi kepada kelihatan.

5. Buka fail test.html dalam penyemak imbas untuk menyemak kesannya.

Cadangan berkaitan: tutorial bootstrap

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan div dalam bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!