訪問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>