溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“bootstrap如何讓div隱藏”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“bootstrap如何讓div隱藏”吧！
在bootstrap中，可以利用設置div的類名來讓div隱藏，使用hidden類名可以讓div元素隱藏不可見，使用show類名可以讓隱藏的div變成可見，語法為“<div class="hidden">div的內容</div>”。
本教程操作環境：Windows10系統、bootstrap3.3.7版、DELL G3電腦
在bootstrap中，提供了顯示或隱藏元素的類名，可以非常方便顯示或隱藏一個元素。
新建一個html文件，命名為test.html，用于講解bootstrap中如何顯示或隱藏內容。使用link標簽加載bootstrap.min.css文件。
在div標簽內，再使用div創建兩行文字。給兩個div添加class屬性，并通過class設置它們的樣式，其中，設置class為test的div隱藏不可見。
使用hidden類名讓子div元素隱藏不可見，使用show類名讓class為test的div由隱藏變為可見。
<!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>在瀏覽器打開test.html文件，查看實現的效果。
輸出結果：
感謝各位的閱讀，以上就是“bootstrap如何讓div隱藏”的內容了，經過本文的學習后，相信大家對bootstrap如何讓div隱藏這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
