第四十六节 jQuery之bootstrap隐藏类 

 1 <!-- bootstrap 隐藏类
 2         1、hidden-xs
 3         2、hidden-sm
 4         3、hidden-md
 5         4、hidden-lg -->
 6 <!DOCTYPE html>
 7 <html lang="en">
 8 <head>
 9     <meta charset="UTF-8">
10     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
11     <title>Document</title>
12     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
13     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
14     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
15     <style type="text/css">
16         div[class*='col-']{
17             height: 50px;
18             background-color: gold;
19             border: 1px solid #000;
20         }
21 
22     </style>
23 </head>
24 <body>
25     <div class="container">
26         <div class="row">
27             <div class="col-lg-3 col-lg-4">col-lg-3</div>
28             <div class="col-lg-3 col-lg-4">col-lg-3</div>
29             <div class="col-lg-3 col-lg-4">col-lg-3</div>
30             <div class="col-lg-3 col-lg-4 hidden-md">col-lg-3</div>
31         </div>
32     </div>
33 </body>
34 </html>

 

posted @ 2020-03-16 20:48  kog_maw  阅读(169)  评论(0)    收藏  举报