Home > Article > Web Front-end > How to implement display and hide in bootstrap

How to implement display and hide in bootstrap

藏色散人Original: 2020-11-09 10:52:054745browse

Bootstrap implements display and hiding methods: first create an HTML sample file; then display it through "6c7919b34a8ee505d01b1d266d93eb9fshow94b3e26ee717c64999d7867364b1b4a3"; finally through "0c43bf8396e393302f63c0465beb804ehide94b3e26ee717c64999d7867364b1b4a3" can be used to hide it.

Recommendation: "bootstrap tutorial"

bootstrap shows hidden specific code:

<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 range:

Outside the xs range:

The above is the detailed content of How to implement display and hide in bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to solve the garbled problem of bootstrap tableNext article：How to solve the garbled problem of bootstrap table

See more

How to implement display and hide in bootstrap

Related articles