bootstrap如何讓div隱藏

發(fā)布時(shí)間：2022-05-11 15:58:20 來(lái)源：億速云閱讀：501 作者：iii 欄目：web開(kāi)發(fā)

這篇文章主要講解了“bootstrap如何讓div隱藏”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“bootstrap如何讓div隱藏”吧！

在bootstrap中，可以利用設(shè)置div的類(lèi)名來(lái)讓div隱藏，使用hidden類(lèi)名可以讓div元素隱藏不可見(jiàn)，使用show類(lèi)名可以讓隱藏的div變成可見(jiàn)，語(yǔ)法為“<div class="hidden">div的內(nèi)容</div>”。

本教程操作環(huán)境：Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦

bootstrap怎么讓div隱藏

在bootstrap中，提供了顯示或隱藏元素的類(lèi)名，可以非常方便顯示或隱藏一個(gè)元素。

新建一個(gè)html文件，命名為test.html，用于講解bootstrap中如何顯示或隱藏內(nèi)容。使用link標(biāo)簽加載bootstrap.min.css文件。

在div標(biāo)簽內(nèi)，再使用div創(chuàng)建兩行文字。給兩個(gè)div添加class屬性，并通過(guò)class設(shè)置它們的樣式，其中，設(shè)置class為test的div隱藏不可見(jiàn)。

使用hidden類(lèi)名讓子div元素隱藏不可見(jiàn)，使用show類(lèi)名讓class為test的div由隱藏變?yōu)榭梢?jiàn)。

<!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">這是測(cè)試的內(nèi)容1</div>
        <div class="test show">這是測(cè)試的內(nèi)容2</div>
    </div>
</body>
</html>

在瀏覽器打開(kāi)test.html文件，查看實(shí)現(xiàn)的效果。

輸出結(jié)果：

bootstrap如何讓div隱藏

感謝各位的閱讀，以上就是“bootstrap如何讓div隱藏”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)bootstrap如何讓div隱藏這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

向AI問(wèn)一下細(xì)節(jié)

bootstrap如何讓div隱藏

bootstrap怎么讓div隱藏

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽