Bootstrap3 - 10.隐藏与显示的响应式工具类
2018-01-03 本文已影响3人
廖马儿
显示：visible-xs （visible-sm以及后面的就不用列举了）
隐藏：hidden-xs （hidden-sm以及后面就不列举）
代码：
<!doctypoe html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-9">
<h1 class="page-header">title</h1>
<p class="visible-xs alert alert-info">我们在ios平台有下载链接</p>
<p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
</div>
<div class="col-md-3">
<h1 class="page-header">sidebar</h1>
<p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
</div>
</div>
</div>
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
效果：
只有在xs设备上面才可以显示出来：
图片.png
<div class="container">
<div class="row">
<div class="col-md-9">
<h1 class="page-header">title</h1>
<p class="visible-xs alert alert-info">我们在ios平台有下载链接</p>
<p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
</div>
<div class="col-md-3 hidden-xs">
<h1 class="page-header">sidebar</h1>
<p>retcvgbjhknlm234567890-kjhgfdsasdfghjklezsxfdgezrxtcyvgbhnjk</p>
</div>
</div>
</div>
加了hidden-xs的效果：
图片.png
