cari

Rumah >hujung hadapan web >Tutorial Bootstrap >bootstrap如何实现显示隐藏

bootstrap如何实现显示隐藏

藏色散人
藏色散人asal
2020-11-09 10:52:054844semak imbas
bootstrap实现显示隐藏的方法：首先创建一个HTML示例文件；然后通过“81c3ce2a6799d4068fb541cf2aafe505show94b3e26ee717c64999d7867364b1b4a3”实现显示；最后通过“f2364836faf45fd670e56a4506471052hide94b3e26ee717c64999d7867364b1b4a3”实现隐藏即可。

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范围之外：

Atas ialah kandungan terperinci bootstrap如何实现显示隐藏. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何解决bootstrap table乱码问题Artikel seterusnya：bootstrap well是什么

Artikel berkaitan

Lihat lagi