后端最流行的前端框架
bootstrap现已经更新到4.1版本了，3.1版本有中文文档。构建响应式移动优先：手机、平板、智能电视、智能行车、广告电视。也适应于pc端。
可以构建响应式。媒体查询，如果你不做任何媒体查询的时候，就会显示pc优先，如果你不做任何媒体查询的时候显示移动端的话，就是移动端优先。而我们的bootstrap框架是移动优先。
一般我们可以根据页面的访问数量来决定优先权。
bootstrap2.0是pc端优先。现在我们常常使用的是版本3，支持ie9以上。版本4支持ie10以上。
如需使用可以去百度搜索bootstrap官方文档下载使用，中文文档也有。下载过后我们只需要使用bootstrap.css与bootstrap.min.css。使用方式和jQuery差不多，直接引入，但是bootstrap.js依赖于jQuery。注明：需要在bootstrap之前引入jQuery。
引入方式，jQuery.js、bootstrap.css、Popper.js、bootstrap.js。Popper.js主要是来做小弹框，bootstrap.js也依赖于Popper.js。
版本3中文文档连接：https://v3.bootcss.com/
版本4中文文档连接：https://v4.bootcss.com/
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <!--bootstrap要引入的文件：bootstrap.min.css,jquery.min.js,bootrap.min.js--> 8 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 9 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 10 <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量--> 11 <script src="js/popper.js" type="text/javascript" charset="utf-8"></script> 12 <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper--> 13 <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> 14 </head> 15 <body> 16 <!--首先要设置一个容器--> 17 <div class="container"> 18 <!--每一行用row来包裹--> 19 <!--仅设置col，等宽,可以使div平均分成相对应的份数--> 20 <!--boostrap网格系统，平均分成12份--> 21 <!--使用boostrap框架就是为了提高效率，省去设计师，也不需要精确到像素去实现页面，如果要像素级还原设计图稿，那么依然还需要大量的书写css--> 22 <!-- 23 超小<576px .col- 24 小≥576px .col-sm- 25 中等≥768px .col-md- 26 大≥992px .col-lg- 27 超大≥1200px .col-xl- 28 --> 29 <!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。--> 30 <!--网格里面还可以继续嵌套网格，所有的容器，都是12格进行划分--> 31 <div class="row"> 32 <div class="col-12 col-lg-2 col-xl-1 bg-danger order-3"> 33 第一部分内容 34 </div> 35 <div class="col-12 col-lg-2 col-xl-5 bg-info order-2"> 36 第二部分内容 37 </div> 38 <div class="col-12 col-lg-8 col-xl-6 bg-warning order-1"> 39 第三部分内容 40 </div> 41 </div> 42 <div class="row"> 43 <div class="col-12 col-lg-2 col-xl-1 bg-danger"> 44 第一部分内容 45 </div> 46 <!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。--> 47 <div class="col-12 col-lg-auto col-xl-5 bg-info"> 48 第二部分内容 49 </div> 50 <div class="col-12 col-lg-8 col-xl-6 bg-warning"> 51 <div class="row"> 52 <div class="col-3 bg-dark"> 53 3 54 </div> 55 <div class="col-9 bg-danger"> 56 9 57 </div> 58 </div> 59 60 </div> 61 </div> 62 <div class="row no-gutters"> 63 <div class="col">col</div> 64 <div class="col">col</div> 65 <div class="w-100"></div> 66 <div class="col">col</div> 67 <div class="col">col</div> 68 </div> 69 70 </div> 71 72 73 </body> 74 </html>
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <!--bootstrap要引入的文件：bootstrap.min.css,jquery.min.js,bootrap.min.js--> 8 <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/> 9 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 10 <!--要在bootstrap之前引入jquery,bootstrap依赖JQUERY,因为bootstrapJS里要使用$这个jquery变量--> 11 <script src="js/popper.js" type="text/javascript" charset="utf-8"></script> 12 <!--如果你要用bootstrap使用一些提示性的交互，那么就需要引入提示性的框架popper.js,因为bootstrap的提示就是依赖popper--> 13 <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script> 14 </head> 15 <body> 16 <!--首先要设置一个容器--> 17 <div class="container"> 18 <!--每一行用row来包裹--> 19 <!--仅设置col，等宽,可以使div平均分成相对应的份数--> 20 <!--boostrap网格系统，平均分成12份--> 21 <!--使用boostrap框架就是为了提高效率，省去设计师，也不需要精确到像素去实现页面，如果要像素级还原设计图稿，那么依然还需要大量的书写css--> 22 <!-- 23 超小<576px .col- 24 小≥576px .col-sm- 25 中等≥768px .col-md- 26 大≥992px .col-lg- 27 超大≥1200px .col-xl- 28 --> 29 <!--使用col-{breakpoint}-auto类根据内容的自然宽度调整列的大小。--> 30 <!--网格里面还可以继续嵌套网格，所有的容器，都是12格进行划分--> 31 <!--对容器进行偏移offset-6--> 32 <div class="row"> 33 <div class="offset-1 col-3 bg-danger order-3"> 34 第一部分内容 35 </div> 36 37 </div> 38 39 <div class="row"> 40 <div class="col-md-4">.col-md-4</div> 41 <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> 42 </div> 43 <div class="row"> 44 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> 45 <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> 46 </div> 47 <div class="row"> 48 <div class="col-auto mr-auto">.col-auto .mr-auto</div> 49 <div class="col-auto">.col-auto</div> 50 </div> 51 52 53 </div> 54 55 56 </body> 57 </html>