bootstrap-day01

Adjust the width
 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="utf-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <title></title>
 8     <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
 9     <style>
10     .container{
11         background-color: blueviolet;
12         width: 100%;
13         height: 50px;
14         margin: 0 auto;
15     }
16 
17     /* 媒体查询，bootstrap里面的方法 */
18     @media screen and (max-width:768px){
19         .container{
20             width: 100%;
21         }
22     }
23     @media screen and (min-width:768px) and (max-width:992px){
24         .container{
25             width: 750px;
26         }
27     }
28     @media screen and (min-width:992px) and (max-width:1200px){
29         .container{
30             width: 970px;
31         }
32     }
33     @media screen and (min-width:1200px){
34         .container{
35             width: 1170px;
36         }
37     }
38 is      </ style>
 39 </ head>
 40  
41 is <body>
 42 is  
43 is <div class = " Container " > </ div>
 44 is  
45 <-! The virgin JS method, above that a method for bootstrap - ->
 46 is <! - 
 47 <Script>
 48      window.addEventListener ( " Load " , function () {
 49          // 1. Get constant 
50          the let = document.querySelector Container ( " .container " );
 51 is          the let clientW = 0 ;
52         // The following call can be provided in the form of the function, then this can directly call 
53 is          a resize ();
 54 is  
55          // 2. The size of the change in the listening window 
56 is          window.addEventListener ( " a resize " , a resize)
 57 is  
58          function a resize () {
 59              // 2.1 obtain the width of the changed 
60              clientW = window.innerWidth;
 61 is              the console.log (clientW);
 62 is  
63 is              // 2.2 Analyzing 
64              IF (clientW> = 1200 ) {
 65                  // large screen 
66                  Container = through .style.width "1170px " ;
 67              } the else  IF (clientW> = 992 ) {
 68                  // big screen 
69                  container.style.width = " 970px " ;
 70              } the else  IF (clientW> = 768 ) {
 71 is                  // small screen 
72                  container.style = .width " 750px " ;
 73 is              } the else {
 74                  // ultra small screen 
75                  container.style.width ="100%";
76             }
77         }
78     })
79 </script> -->
80 
81 
82 
83 <!-- jquery.js要写在bootstrap.js之前 -->
84 <script src="lib/jquery/jquery.js"></script>
85 <script src="lib/bootstrap/js/bootstrap.js"></script>
86 </body>
87 </html>
Guess you like
