bootstrap响应式工具使用方法分享
- PHPz原创
- 2018-01-05 13:30:301613浏览
本文主要介绍了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;">
<!-- <p class="container">
<p class="row">
只有在lg分辨率以上的才会显示，否则是不会显示的
<p class="col-lg-6 visible-lg-inline-block">col-lg-6</p>
<p class="hidden-sm hidden-xs">aaaaaaa</p>
</p>
</p>
-->
<p class="container-fluid">
<p class="row"><!-- 消除最右边的空隙 -->
<p class="tips1 pull-right visible-lg-block"></p>
<!-- pull-right:右浮动 pull-left:左浮动-->
<p class="tips2 hidden-lg affix"></p><!-- affix固定定位 -->
</p>
</p>
</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:本来是显示内容的，当使用打印功能的时候会隐藏内容
-->相关推荐：
BootStrap响应式导航条实例介绍_javascript技巧
以上是bootstrap响应式工具使用方法分享的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn