编程 Javascript

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

xs范围之外：

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

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

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

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

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

- Author -

deepquiet

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

初学JavaScript第二章

Sep 30 Javascript

YUI的Tab切换实现代码

Apr 11 Javascript

document.createElement()用法

Mar 13 Javascript

flash调用js中的方法,让js传递变量给flash的办法及思路

Aug 07 Javascript

display和visibility的区别示例介绍

Feb 26 Javascript

html文本框提示效果的示例代码

Jun 28 Javascript

jQuery给指定的table动态添加删除行的操作方法

Oct 12 Javascript

用JavaScript实现让浏览器停止载入页面的方法

Jan 19 Javascript

详解React 16 中的异常处理

Jul 28 Javascript

深入理解vue中slot与slot-scope的具体使用

Jan 26 Javascript

浅谈vue异步数据影响页面渲染

Oct 29 Javascript

react基本安装与测试示例

Apr 27 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设计模式注册表模式

2012/02/05 PHP

PHP数组无限分级数据的层级化处理代码

2012/12/29 PHP

PHP实现自动识别Restful API的返回内容类型

2015/02/07 PHP

PHP5.5.15+Apache2.4.10+MySQL5.6.20配置方法分享

2016/05/06 PHP

深入理解PHP 数组之count 函数

2016/06/13 PHP

Laravel框架自定义验证过程实例分析

2019/02/01 PHP

JS backgroundImage控制

2009/05/19 Javascript

javascript制作坦克大战全纪录（2）

2014/11/27 Javascript

基于javascript实现全屏漂浮广告

2016/03/31 Javascript

javascript特殊文本输入框网页特效

2016/09/13 Javascript

jQuery的Cookie封装,与PHP交互的简单实现

2016/10/05 Javascript

js实现表单提交后不重新刷新当前页面

2016/11/30 Javascript

微信小程序 textarea 组件详解及简单实例

2017/01/10 Javascript

自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结

2017/08/18 Javascript

完美解决linux下node.js全局模块找不到的情况

2018/05/16 Javascript

解决Mac node版本升级失败的问题

2018/05/16 Javascript

小程序实现列表展开收起效果

2020/07/29 Javascript

[10:05]DOTA2-DPC中国联赛正赛 iG vs PSG.LGD 选手采访

2021/03/11 DOTA

Python读写文件方法总结

2015/06/09 Python

Python实现复杂对象转JSON的方法示例

2017/06/22 Python

python项目对接钉钉SDK的实现

2019/07/15 Python

Python手绘可视化工具cutecharts使用实例

2019/12/05 Python

Python 2种方法求某个范围内的所有素数(质数)

2020/01/31 Python

完美解决python针对hdfs上传和下载的问题

2020/06/05 Python

HTML5是什么 HTML5是什么意思 HTML5简介

2012/10/26 HTML / CSS

html5中canvas图表实现柱状图的示例

2017/11/13 HTML / CSS

意大利在线药房：Saninforma

2021/02/11 全球购物

白酒市场开发计划书

2014/01/09 职场文书

初中数学教学反思

2014/01/16 职场文书

社区工作者先进事迹

2014/01/18 职场文书

冰淇淋店的创业计划书

2014/02/07 职场文书

学校端午节活动方案

2014/08/23 职场文书

教师思想作风整顿个人剖析材料

2014/10/10 职场文书

工作收入证明模板

2015/06/12 职场文书

校友会致辞

2015/07/30 职场文书

药品销售员2015年终工作总结

2015/10/22 职场文书