1. 程式人生 > >bootstrap-顯示與隱藏

bootstrap-顯示與隱藏

顯示與隱藏:

<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap-theme.min.css"
rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- 顯示 --> <div class="show bg-warning">show</div> <!-- 隱藏 --> <div class="hidden">hide</div> <!-- 隱藏文字 --> <div class
="text-hide bg-warning">
hide</div> <!-- xs範圍內顯示 --> <div class="visible-xs-block">visible</div> <!-- xs範圍外顯示 --> <div class="hidden-xs">hide</div> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/bootstrap.min.js"
>
</script> <script src="http://cdn.bootcss.com/bootstrap/3.3.1/js/npm.js"></script> </body> </html>

xs範圍:
這裡寫圖片描述

xs範圍之外:
這裡寫圖片描述