bootstrap

訪問Bootstrap中文網,下載bootstrap中文文檔,選擇用於生產環境的bootstrap。javascript

在官網使用ctrl+f查找想要的內容。css

這裏記一下Visual Studio Code軟件的用法:html

    能夠點擊  F1——sni——html打開html.json文件,裏面能夠配置經常使用的代碼,java

引入文檔:jquery

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>bootstrap入門</title>
 5         <meta charset="UTF-8">          <!--不能亂碼-->
 6         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 7         <!--手機設備能夠正常顯示-->
 8         <link rel="stylesheet" href="css/bootstrap.min.css"/>
 9         <!--引入bootstrap.min.css文件-->
10         <script src="js/jquery.min.js" type="text/javascript"></script>
11         <!--須要先引入jQuery,若是本地沒有jQuery,能夠在網上搜索一下,使用http在線的jQuery-->
12         <script src="js/bootstrap.min.js"></script>
13         <!--引入bootstrap.min.js文件-->
14         <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
15         <link rel="stylesheet" href="css/index.css"/>
16         <!--引入本身寫的css-->
17     </head>
18     <body>
19         <div class="container lie">
20             <div class="row">
21                 <div class="col-md-1">.col-md-1</div>
22                 <div class="col-md-1">.col-md-1</div>
23                 <div class="col-md-1">.col-md-1</div>
24                 <div class="col-md-1">.col-md-1</div>
25                 <div class="col-md-1">.col-md-1</div>
26                 <div class="col-md-1">.col-md-1</div>
27                 <div class="col-md-1">.col-md-1</div>
28                 <div class="col-md-1">.col-md-1</div>
29                 <div class="col-md-1">.col-md-1</div>
30                 <div class="col-md-1">.col-md-1</div>
31                 <div class="col-md-1">.col-md-1</div>
32                 <div class="col-md-1">.col-md-1</div>
33             </div>
34             <div class="row">
35                 <div class="col-md-8">.col-md-8</div>
36                 <div class="col-md-4">.col-md-4</div>
37             </div>
38             <div class="row">
39                 <div class="col-md-4">.col-md-4</div>
40                 <div class="col-md-4">.col-md-4</div>
41                 <div class="col-md-4">.col-md-4</div>
42             </div>
43             <div class="row">
44                 <div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 ">
45                     <div class="col-md-6 son">
46                         <h2>標題1</h2>
47                     </div>
48                 </div>
49                 <div class="col-lg-3 col-md-6 col-sm-8 col-xs-10 col-xs-push-1 col-sm-push-1">.col-md-6</div>
50             </div>
51         </div>
52     </body>
53 </html>
相關文章
相關標籤/搜索