bootstrap
访问Bootstrap中文网，下载bootstrap中文文档，选择用于生产环境的bootstrap。
在官网使用ctrl+f查找想要的内容。
这里记一下Visual Studio Code软件的用法：
可以点击 F1——sni——html打开html.json文件，里面可以配置常用的代码，
引入文档：
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>
浙公网安备 33010602011771号