• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > Bootstrap显示与隐藏简单实现代码

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

作者:deepquiet 字体:[增加 减小] 来源:互联网 时间:2017-05-11

deepquiet通过本文主要向大家介绍了Bootstrap显示与隐藏简单实现代码等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

</div>

xs范围:

xs范围之外:

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

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

Bootstrap学习教程

Bootstrap实战教程

Bootstrap Table使用教程

Bootstrap插件使用教程

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11基于JS实现仿百度百家主页的轮播图效果
  • 2017-05-11jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
  • 2017-05-11node操作mysql数据库实例详解
  • 2017-05-11vuejs绑定class和style样式
  • 2017-05-11AngularJS学习第二篇 AngularJS依赖注入
  • 2017-05-11JS正则表达式验证账号、手机号、电话和邮箱是否合法
  • 2017-05-11谈谈Vue.js——vue-resource全攻略
  • 2017-05-11鼠标经过出现气泡框的简单实例
  • 2017-05-11Bootstrap页面缩小变形的快速解决办法
  • 2017-05-11微信小程序 使用canvas制作K线实例详解

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • NodeJS处理Express中异步错误
    • Canvas + JavaScript 制作图片粒子效果
    • 防止重复发送 Ajax 请求
    • Web开发中客户端的跳转与服务器端的跳转的区别
    • 微信小程序 详解页面跳转与返回并回传数据
    • 函数四种调用模式以及其中的this指向
    • 原生JS和jQuery操作DOM对比总结
    • 浅析Angular2子模块以及异步加载
    • 使用BootStrap实现标签切换原理解析
    • jQuery图片瀑布流的简单实现代码

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有