首頁 > 文章 > web前端 > bootstrap如何實作顯示隱藏

bootstrap如何實作顯示隱藏

藏色散人原創: 2020-11-09 10:52:054742瀏覽

bootstrap實作顯示隱藏的方法：先建立一個HTML範例檔；然後透過「6c7919b34a8ee505d01b1d266d93eb9fshow94b3e26ee717c64999d7867364b1b4a3」實作顯示；最後透過「0c43bf8396e393302f63c0465beb804ehide94b3e26ee717c64999d7867364b1b4a3」實作隱藏即可。

bootstrap如何實作顯示隱藏

推薦：《bootstrap教學》

bootstrap顯示隱藏的具體程式碼：

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css" rel="external nofollow" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
</head>
<body>
<!-- 显示 -->
<p class="show bg-warning">show</p>
<!-- 隐藏 -->
<p class="hidden">hide</p>
<!-- 隐藏文字 -->
<p class="text-hide bg-warning">hide</p>
<!-- xs范围内显示 -->
<p class="visible-xs-block">visible</p>
<!-- xs范围外显示 -->
<p class="hidden-xs">hide</p>
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script>
</body>
</html>

xs範圍：

xs範圍外：

以上是bootstrap如何實作顯示隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何解決bootstrap table亂碼問題下一篇：如何解決bootstrap table亂碼問題

看更多