Bootstrap的初体验-2
这一篇从最基础的知识来了解Bootstrap. 虽然V4版本已经出来，但还是拿V3来做演示，因为V4我也没用过 ~~
官方中文文档 ，写的很详细，但作为入门来说，我感觉不太友好 https://v3.bootcss.com/
可视化布局，可以方便的拿来官方文档的例子，复制粘贴大法好 Bootstrap可视化布局系统
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 <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> 8 <title>Bootstrap 101 Template</title> 9 10 <!-- Bootstrap --> 11 <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 12 13 <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 --> 14 <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> 15 <!--[if lt IE 9]> 16 <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> 17 <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> 18 <![endif]--> 19 </head> 20 <body> 21 <h1>你好，世界！</h1> 22 <div class="container"> 23 <div class="row"> 24 <div class="col-xs-3 col-sm-4 col-md-6">left</div> 25 <div class="col-xs-3 col-sm-8 col-md-6"> 26 <div class="col-xs-3 col-sm-4 col-md-6">1</div> 27 <div class="col-xs-3 col-sm-8 col-md-6">2</div> 28 </div> 29 </div> 30 </div> 31 32 <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --> 33 <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> 34 <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --> 35 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 36 </body> 37 </html>
保存html用浏览器打开，用浏览器调整页面的宽度，模拟在手机、平板、显示器等不同的浏览设备上，布局都会发生一些变化，就叫做栅格化。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。 也就是说，不论显示器的尺寸，都会自动将整个屏幕分为12列，即.col-xx-2 后面的2要加上.col-xx-10 才能凑够铺满屏幕。这样也就分成了左右布局 左2右10的比例分配。
实例：从堆叠到水平排列 使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。 <div class="row"> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> <div class="col-md-1">.col-md-1</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div>
上面这个是官方的例子，非常的清晰，多看一下就理解了。链接：https://v3.bootcss.com/css/#grid-example-fluid
好，了解了bootstrap ,我们自己就可以按照设计图来分配布局了。
这些仅仅是博主的知识分享，而且博主仅仅看了两天的官方文档，东拼西凑的写出了还算满意的静态页面，而且无法共享给大家，所以没有实例代码。
我总结了一下自己学习Bootstrap从0入门，最大的障碍是不确定自己能不能学会，我肯定的告诉你，很简单！多看一下官方文档，善用搜索引擎，总是可以找到解决方法。不要神话任何的框架代码，它们都是一步一步的完善出来的，而且都是基础知识拼起来，更好的为我们提供服务。对于一个方便的工具，你要消去不存在的敬畏，拿着它玩来玩去，玩坏了就重新下载个，东搞搞西搞搞，才能总结出来自己的知识体系。以此与君共勉！
上一篇： jQuery 选择器
下一篇： 基于JQuery的前端form表单操作