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


Posted in Javascript onMarch 06, 2017

本文实例为大家分享了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范围:

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

xs范围之外:

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

本文系列教程整理到:Bootstrap基础教程 专题中,欢迎点击学习。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
网上应用的一个不错common.js脚本
Aug 08 Javascript
将函数的实际参数转换成数组的方法
Jan 25 Javascript
Javascript 函数中的参数使用分析
Mar 27 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
js获取对象为null的解决方法
Nov 21 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
Layui点击图片弹框预览的实现方法
Sep 16 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 #Javascript
Bootstrap导航中表单简单实现代码
Mar 06 #Javascript
基于JS实现仿百度百家主页的轮播图效果
Mar 06 #Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
Mar 06 #Javascript
Bootstrap导航简单实现代码
Mar 06 #Javascript
Bootstrap栅格系统简单实现代码
Mar 06 #Javascript
javascript DOM的详解及实例代码
Mar 06 #Javascript
You might like
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
laravel框架实现为 Blade 模板引擎添加新文件扩展名操作示例
2020/01/25 PHP
用 JSON 处理缓存
2007/04/27 Javascript
js 加载时自动调整图片大小
2008/05/28 Javascript
IE JS编程需注意的内存释放问题
2009/06/23 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
javascript之Partial Application学习
2013/01/10 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
JavaScript之AOP编程实例
2015/07/17 Javascript
详细解读JavaScript的跨浏览器事件处理
2015/08/12 Javascript
web 前端常用组件之Layer弹出层组件
2016/09/22 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
任意Json转成无序列表的方法示例
2016/12/09 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
搭建element-ui的Vue前端工程操作实例
2018/02/23 Javascript
实现vuex与组件data之间的数据同步更新方式
2019/11/12 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
详解Python中contextlib上下文管理模块的用法
2016/06/28 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Python selenium的基本使用方法分析
2019/12/21 Python
python连接mysql数据库并读取数据的实现
2020/09/25 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
怎么写好自荐信
2013/10/30 职场文书
大学生个人推荐信范文
2013/11/25 职场文书
光荣入党自我鉴定
2014/01/22 职场文书
运动会入场词50字
2014/02/20 职场文书
公司周年庆典标语
2014/10/07 职场文书
党员争先创优承诺书
2015/01/20 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
2019年干货:自我鉴定
2019/03/25 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
python实现商品进销存管理系统
2022/05/30 Python