Bootstrap显示与隐藏简单实现代码

更新时间：2017年03月06日 09:22:05 作者：deepquiet

这篇文章主要为大家详细介绍了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>
<!-- 显示 -->
<div class="show bg-warning">show</div>
<!-- 隐藏 -->
<div class="hidden">hide</div>
<!-- 隐藏文字 -->
<div class="text-hide bg-warning">hide</div>
<!-- xs范围内显示 -->
<div class="visible-xs-block">visible</div>
<!-- xs范围外显示 -->
<div class="hidden-xs">hide</div>
<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基础教程专题中，欢迎点击学习。

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

javascript中SetInterval与setTimeout的定时器用法
Javascript的setTimeOut和setInterval函数应用非常广泛，它们都用来处理延时和定时任务，比如打开网页一段时间后弹出一个登录框，页面每隔一段时间发送异步请求获取最新数据等，本文文章通过代码示例给大家介绍javascript中SetInterval与setTimeout的定时器用法
2015-08-08
基于JS代码实现导航条弹出式悬浮菜单
这篇文章主要介绍了基于JS代码实现导航条弹出式悬浮菜单的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-06-06
js点击button按钮跳转到另一个新页面
点击按钮怎么跳转到另外一个页面呢？点击图片要跳转到新的页面时，怎么做到呢？可以使用onclick=window.location=新页面来实现
2014-10-10
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
iframe在ie8 、谷歌浏览器4.0和 firefox3.5.3均成功自适应高度.
2009-11-11
javascript浅层克隆、深度克隆对比及实例解析
这篇文章主要介绍了javascript浅层克隆、深度克隆对比及实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-02-02
用JS实现贪吃蛇游戏
这篇文章主要为大家详细介绍了用JS实现贪吃蛇游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS调用打印方法设置页眉页脚的实例
一个网页打印相关功能的扩展演示特效，在实现了打印功能外，还实现了打印预览、打印前的页眉页脚设置，直接打印等功能，以前对JS打印前设置页脚见的不多，所以这一个也算是挺有价值的，希望闲暇时参阅
2013-05-05
可插入图片的TEXT文本框
这篇文章主要介绍了可插入图片的TEXT文本框，有需要的朋友可以参考一下
2013-12-12
JS简单去除数组中重复项的方法
这篇文章主要介绍了JS简单去除数组中重复项的方法,涉及javascript针对数组的遍历、判断与运算相关操作技巧,需要的朋友可以参考下
2016-09-09
js隐藏与显示回到顶部按钮及window.onscroll事件应用
现在大多数网站都会添加这种功能：当滚动条滚动到页面的下方时，页面的右下角会显示出来一个“回到顶部”的按钮或连接;那么，如何控制“回到顶部”按钮的显示或隐藏呢;本文介绍详细实现方法，感兴趣的你可不要走开哦
2013-01-01