bootstrap响应式工具使用详解
作者：看五分钟佩奇的小姑姑 发布时间：2023-08-07 18:14:35
标签：bootstrap,响应式工具
本文实例为大家分享了bootstrap响应式工具的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式工具</title>
<link rel="stylesheet" type="text/css" href="../CSS/bootstrap.css" rel="external nofollow" >
<script src="../JS/jquery-3.2.1.min.js"></script>
<script src="../JS/bootstrap.js"></script>
<style type="text/css">
.tips1{width: 30px;height: 300px;background: black}
.tips2{width: 30px;height: 200px;background: #ddd}
</style>
</head>
<body style="height: 800px;">
<!-- <div class="container">
<div class="row">
只有在lg分辨率以上的才会显示，否则是不会显示的
<div class="col-lg-6 visible-lg-inline-block">col-lg-6</div>
<div class="hidden-sm hidden-xs">aaaaaaa</div>
</div>
</div>
-->
<div class="container-fluid">
<div class="row"><!-- 消除最右边的空隙 -->
<div class="tips1 pull-right visible-lg-block"></div>
<!-- pull-right:右浮动 pull-left:左浮动-->
<div class="tips2 hidden-lg affix"></div><!-- affix固定定位 -->
</div>
</div>
</body>
</html>
<!--
响应式工具：针对不同的设备展示或隐藏页面的内容
可见类：
visible-[lg/md/sm/xs]-[inline/block/inline-block]
隐藏类：
hidden-[lg/md/sm/xs]
浮动：[pull/push]-[right/left]
固定定位：affix
打印类：
visible-print-[block/inline]:只有在使用打印功能的时候才会显示
hidden-print:本来是显示内容的，当使用打印功能的时候会隐藏内容
-->
来源：http://blog.csdn.net/Aloe_904/article/details/78506481
0
投稿猜你喜欢
书 名：细节决定交互设计的成败国际书号：ISBN 978-7-121-08232-0作 &nb- 兼容IE6的第一步就是单独对IE进行兼容，你针对IE6所写的代码只影响IE6；有几种方法可以区分开IE6：IE特有条件注释、CSS选择器、J
- RegExp对象的语义和使用：检查字符串匹配获取字符串中的部分内容在原字符串的基础上构建一个新的字符串（包括添加、删除和修改）构建一个Reg
- 在开发中有些敏感接口，例如用户余额提现接口，需要考虑在并 * 况下接口是否会发生问题。如果用户将自己的多条提现请求同时发送到服务器，代码能否扛
- 也许有人会说我火星了，但我的确是第一次知道，欢迎我从火星归来吧。在 Yahoo! 首页上隐藏着这样一个小秘密，大家到 www.yahoo.c
- 有些朋友看到这个标题可能会有疑问，难道在视图中使用*符号还有何要注意的地方吗？对于这个问题，我们先不必回答，先看一下例子吧。 我这里，使用的
- 原理 采集程序实际上是通过了XML中的XMLHTTP组件调用其它网站上的网页。比如新闻采集程序，很多都是调用了sina的新闻网页，并且对其中
- 1.如何在网页中插入空格 我们在用Dreamweaver的所见即所得编辑模式下编辑中文网页时，往往需要
- 在整个产品设计的过程中，视觉设计与交互设计的“工序”非常紧密，两者关系也是相辅相成，互相影响。而视觉界面作为最直接与用户交流的层面，如何把交
- 如果是感应触发.就选onmouseover如果是点击触发.就选onclick [把它们两互相替换,就可随时变为感应
- 在PyTorch中，torch.Tensor类是存储和变换数据的重要工具，相比于Numpy，Tensor提供GPU计算和自动求梯度等更多功能
- 一、Python中的对象Python中一切皆是对象。————Guido van Rossum(1989)这句话只要你学过python，你就很
- 下载并选择MySQL的安装包由于MySQL一直在升级，所以当您阅读本文时，或许在其官方网站上已提供了新的正式版供你下载，因此，以下提供的链接
- 今天写了一个放迅雷焦点广告的效果，还请大家多多指正，先附上效果图一张：相关文章：迅雷首页新闻图片轮播效果js源码首先是JS代码部分，之前一定
- 加上设置字符编码的方法：response.setHeader("charset","gb2312")
- 2009年 6月6日,空间4岁啦！与此同时Qzone月登录用户2亿，同时在线用户也突破了1000万。这是让人欢欣雀跃的数字，在空间同事眼里，
- 本文实例讲述了php利用cookies实现购物车的方法。分享给大家供大家参考。具体分析如下：php购物车是在电子商务网站会用到的,一种像超市
- Console 对象提供对浏览器控制台的接入（如：Firefox 的 Web Console）。不同浏览器上它的工作方式是不一样的，但这里会
- 有这么一个题目，说bt其实也不bt，为了重点突出其中的意图，特意加上了括号：var a = (++Math.P
- 对于更完整的代码可以参考，这个是支持数据库的版本。经过测试Asp+Ajax仿google搜索提示效果 数据库版google搜索提示.rar
