您的位置：首页 > Web前端 > BootStrap

bootstrap 响应式工具

2016-02-25 14:00 656 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 处理低版本IE 4.0不考虑IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口的设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="css/bootstrap.css">
<style>
.tips1{
width:30px;
height:300px;
background:black;
right:0;
}
.tips2{
width:30px;
height:100px;
background:blue;
right:0;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="tips1 visible-lg-block affix"></div>
<div class="tips2 hidden-lg affix"></div>
</div>
<div>aaaaaaaaaa</div>
</div>
</body>
<script>
/*
响应式工具
概念
-针对不同设备展示或隐藏页面内容
可见类
-visible*-*
》lg md sm xs
》block inline inline-block
-hidden-*
》lg md sm xs
打印类
-visible-print-*  hidden-print
实例：天猫侧边栏

*/

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航