bootstrap响应式工具使用详解
更新时间：2017年11月29日 09:04:14 作者：看五分钟佩奇的小姑姑
这篇文章主要介绍了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:本来是显示内容的，当使用打印功能的时候会隐藏内容
-->
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在javascript中的一些选择语句，其实jf语句就是一种，下面举几个不错的示例为大家介绍下，希望对大家学习有所帮助2013-11-11
javascript 新闻切换技术...2007-12-12
延时重复执行函数 lLoopRun.js...2007-05-05
这篇文章主要介绍了JS如何实现距离上次刷新已过多少秒,需要的朋友可以参考下2014-05-05
这篇文章主要介绍了javascript关于继承的用法,实例汇总了常见的javascript关于继承的用法,具有一定的参考借鉴价值,需要的朋友可以参考下2014-12-12
本文主要介绍了JS自动跳转手机移动网页的实现方法,可以通过检查 navigator.userAgent 属性来识别用户代理字符串中包含的设备信息,下面就详细的来介绍一下具体用法,感兴趣的可以了解一下2024-03-03
Bootstrap每天必学之前端开发框架，今天这篇文章就带着大家了解认识当下最流行的前端开发框架Bootstrap，bootstrap深受大家喜爱的原因到底是什么呢，我们一探究竟。2015-11-11
JavaScript每天必学之基础知识,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
现在微博都有一个不错的效果就是会实时的动态滚动并显示最新的信息了，下面我来给大家介绍仿新浪微博大厅首页滚动效果,希望此方法对大家会有帮助。2015-10-10
下面小编就为大家带来一篇兼容浏览器的js事件绑定函数(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
最新评论