bootstrap--模态框、下拉菜单、隐藏类

bootstrap 模态框

1、modal 声明一个模态框
2、modal-dialog 定义模态框尺寸
3、modal-lg 定义大尺寸模态框
4、modal-sm 定义小尺寸模态框
5、modal-header
6、modal-body
7、modal-footer 

bootstrap 下拉菜单

1、dropdown-toggle
2、dropdown-menu 

bootstrap 隐藏类

1、hidden-xs
2、hidden-sm
3、hidden-md
4、hidden-lg 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap模态框</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14     <script type="text/javascript">
15         $(function(){
16             $('#btn1').click(function(){
17                 $('#modal01').modal('show');   //modal('show')是jquery已写好的方法
18             })
19         })
20     </script>
21 
22 </head>
23 <body>
24     <div class="container">
25         <h1>模态框</h1>
26         <button class="btn btn-success" id="btn1">js控制弹出</button>
27         <button class="btn btn-primary" data-toggle="modal" data-target="#modal01">大模态框</button>
28         <button class="btn btn-primary" data-toggle="modal" data-target="#modal02">中模态框</button>
29         <button class="btn btn-primary" data-toggle="modal" data-target="#modal03">小模态框</button>
30     </div>
31 
32     <div class="modal fade" id="modal01">   <!--fade弹出时动画效果-->
33         <div class="modal-dialog modal-lg">  <!--modal-lg定义大尺寸模态框-->
34             <div class="modal-content">
35                 <div class="modal-header">
36                     弹框的标题
37                     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</button>  <!--关闭按钮-->
38                 </div>
39 
40                 <div class="modal-body">
41                     弹框主题<br><br>
42                     主体文字
43                 </div>
44 
45                 <div class="modal-footer">
46                     <button class="btn btn-primary">确定</button>
47                     <button class="btn btn-warning" data-dismiss="modal">取消</button>   <!--data-dismiss="modal"--隐藏模态框-->
48                 </div>
49             </div>
50         </div>
51     </div>
52 
53     <div class="modal fade" id="modal02">
54         <div class="modal-dialog">    <!--默认中模态框-->
55             <div class="modal-content">
56                 <div class="modal-header">
57                     弹框的标题
58                 </div>
59 
60                 <div class="modal-body">
61                     弹框主题<br><br>
62                     主体文字
63                 </div>
64 
65                 <div class="modal-footer">
66                     <button class="btn btn-primary">确定</button>
67                     <button class="btn btn-warning" data-dismiss="modal">取消</button>   <!--隐藏模态框-->
68                 </div>
69             </div>
70         </div>
71     </div>
72 
73     <div class="modal fade" id="modal03">
74         <div class="modal-dialog modal-sm">  <!--modal-sm定义小尺寸模态框-->
75             <div class="modal-content">
76                 <div class="modal-header">
77                     弹框的标题
78                 </div>
79 
80                 <div class="modal-body">
81                     弹框主题<br><br>
82                     主体文字
83                 </div>
84 
85                 <div class="modal-footer">
86                     <button class="btn btn-primary">确定</button>
87                     <button class="btn btn-warning" data-dismiss="modal">取消</button>   <!--隐藏模态框-->
88                 </div>
89             </div>
90         </div>
91     </div>
92 </body>
93 </html>

 

 

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>bootstrap下拉菜单</title>
 9 
10     <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
11     <script type="text/javascript" src="../js/bootstrap.min.js"></script>
12     <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
13 
14 </head>
15 <body>
16     <div class="container">
17             <h1>下拉菜单</h1>
18 
19             <div class="dropdown">
20                 <div class="btn btn-primary" data-toggle="dropdown">
21                     下拉菜单
22                     <span class="caret"></span>  <!--倒三角形脚标-->
23                 </div>
24 
25                 <ul class="dropdown-menu">
26                     <li><a href="#">菜单一</a></li>
27                     <li><a href="#">菜单二</a></li>
28                     <li><a href="#">菜单三</a></li>
29                 </ul>
30             </div>
31     </div>
32 </body>
33 </html>

 

 

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

posted on 2020-01-04 11:28  cherry_ning  阅读(524)  评论(0)    收藏  举报

导航