脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → bootstrap显示隐藏

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个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

您可能感兴趣的文章:

相关文章

  • ES6新特性之解构、参数、模块和记号用法示例

    ES6新特性之解构、参数、模块和记号用法示例

    这篇文章主要介绍了ES6新特性之解构、参数、模块和记号用法,结合实例形式分析了解构、参数、模块和记号的功能、用法及相关使用注意事项,需要的朋友可以参考下
    2017-04-04
  • JavaScript中的new的使用方法与注意事项

    JavaScript中的new的使用方法与注意事项

    JavaScript中的new的使用方法与注意事项...
    2007-05-05
  • js实现移动端轮播图

    js实现移动端轮播图

    这篇文章主要为大家详细介绍了js实现移动端轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-12-12
  • H5移动端适配 Flexible方案

    H5移动端适配 Flexible方案

    这篇文章主要为大家详细介绍了H5移动端适配，Flexible方案,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • JavaScript中判断数据类型的方法总结

    JavaScript中判断数据类型的方法总结

    比如要判断一个变量是否是数组类型,PHP中有is_array()函数可以直接判断,然而js中我们需要...-- well,下面我们就来详细看一下JavaScript中判断数据类型的方法总结
    2016-05-05
  • 利用JavaScript如何查询某个值是否数组内

    利用JavaScript如何查询某个值是否数组内

    这篇文章主要给大家介绍了关于利用JavaScript如何查询某个值是否数组内的相关资料，文中通过示例代码分别介绍了实现该问题的一些解决方法是否可行，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。
    2017-07-07
  • JS学习之表格的排序简单实例

    JS学习之表格的排序简单实例

    下面小编就为大家带来一篇JS学习之表格的排序简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-05-05
  • JavaScript的防抖和节流一起来了解下

    JavaScript的防抖和节流一起来了解下

    这篇文章主要为大家详细介绍了JavaScript的防抖和节流，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • 使用Fuse.js实现高效的模糊搜索功能

    使用Fuse.js实现高效的模糊搜索功能

    在现代 Web 应用程序中,实现高效的搜索功能是至关重要的,Fuse.js 是一个强大的 JavaScript 库,它提供了灵活的模糊搜索和文本匹配功能,使您能够轻松实现出色的搜索体验,文中代码示例讲解的非常详细,需要的朋友可以参考下
    2024-01-01
  • JavaScript实现邮箱后缀提示功能的示例代码

    JavaScript实现邮箱后缀提示功能的示例代码

    这篇文章主要介绍了JavaScript实现邮箱后缀提示功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论