编程 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:;与javascript:void(0)使用介绍

Jun 05 Javascript

jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后

Sep 29 Javascript

jQuery中children()方法用法实例

Jan 07 Javascript

推荐一个自己用的封装好的javascript插件

Jan 29 Javascript

js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问

Sep 14 Javascript

AngularJS基础 ng-keypress 指令简单示例

Aug 02 Javascript

jQuery获取file控件中图片的宽高与大小

Aug 04 Javascript

jQuery插件MovingBoxes实现左右滑动中间放大图片效果

Feb 28 Javascript

js的函数的按值传递参数(实例讲解)

Nov 16 Javascript

在layui.use 中自定义 function 的正确方法

Sep 16 Javascript

layui将table转化表单显示的方法(即table.render转为表单展示)

Sep 24 Javascript

vue elementUI 表单校验的实现代码（多层嵌套）

Nov 06 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

人大复印资料处理程序_输入篇

2006/10/09 PHP

基于php split()函数的用法详解

2013/06/05 PHP

解析php中var_dump,var_export,print_r三个函数的区别

2013/06/21 PHP

浅析php原型模式

2014/11/25 PHP

php约瑟夫问题解决关于处死犯人的算法

2015/03/23 PHP

prototype.js的Ajax对象

2006/09/23 Javascript

js直接编辑当前cookie的脚本

2008/09/14 Javascript

js中的如何定位固定层的位置

2014/06/15 Javascript

通过JS判断联网类型和连接状态的实现代码

2015/04/01 Javascript

详解AngularJS实现表单验证

2015/12/10 Javascript

百度坐标（BD09）、国测局坐标（火星坐标，GCJ02）、和WGS84坐标系之间的转换

2016/02/19 Javascript

jquery自定义插件——window的实现【示例代码】

2016/05/06 Javascript

JS构造函数与原型prototype的区别介绍

2016/07/04 Javascript

使用JavaScript解决网页图片拉伸问题(推荐)

2016/11/25 Javascript

jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例

2017/10/19 jQuery

深入理解JavaScript 中的执行上下文和执行栈

2018/10/23 Javascript

webpack4.x CommonJS模块化浅析

2018/11/09 Javascript

vue2.0结合Element-ui实战案例

2019/03/06 Javascript

JS常见面试试题总结【去重、遍历、闭包、继承等】

2019/08/27 Javascript

vue 翻页组件vue-flip-page效果

2020/02/05 Javascript

如何HttpServletRequest文件对象并储存

2020/08/14 Javascript

[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛

2014/07/08 DOTA

在pandas中一次性删除dataframe的多个列方法

2018/04/10 Python

Pycharm 创建 Django admin 用户名和密码的实例

2018/05/30 Python

python实现俄罗斯方块

2018/06/26 Python

Python正则匹配判断手机号是否合法的方法

2020/12/09 Python

Python 隐藏输入密码时屏幕回显的实例

2019/02/19 Python

python 利用toapi库自动生成api

2020/10/19 Python

机电专业毕业生推荐信

2013/11/10 职场文书

会计岗位描述

2014/02/22 职场文书

学校党委副书记个人对照检查材料思想汇报

2014/09/28 职场文书

个人合伙协议书范本

2014/10/14 职场文书

单位工作证明范本

2015/06/15 职场文书

python入门之算法学习

2021/04/22 Python

浅谈Python 中的复数问题

2021/05/19 Python

vue-treeselect的基本用法以及解决点击无法出现拉下菜单

2022/04/30 Vue.js