BootStrap学习从现在开始003.pdfVIP

2014年4月11日 Bootstrap3.0学习第三轮(栅格系统案例) - aehyok - 博客园 /aehyok/p/3404725.html 1/9 aehyok 信自己没有什么不可以！ 博客园 首页 博问 闪存 订阅 管理 随笔- 252 文章- 0 评论- 1441 Bootstrap3.0学习第三轮(栅格系统案例) 前言 　　在前面的一篇文章当中/aehyok/p/3400499.html主要学习了栅格系 统的基本原理，以及通过简单案例进行对原理的实践。通过今天对中文网/ 的进一步了解，决定将原来的《Bootstrap3.0学习第三轮（布局）》修改成了《Bootstrap3.0学习 第三轮（栅格系统原理）》，也是希望能够跟随Bootstrap网站上介绍的名词吧。 　　那么本文的主要内容将主要分为以下几个部分 　　　　1.栅格选项 　　　　2.从堆叠到水平排列 　　　　3.移动设备和桌面 　　　　4.Responsive column resets 　　　　5.列偏移 　　　　6.嵌套列 　　　　7.列排序 　　　　8.总结 栅格选项 　　通过下面的截图可以比较清楚的来查看Bootstrap的栅格系统是如何在多种不同的移动设备上面 进行工作的。 　　 从上面的截图可以看出来，Bootstrap针对不同尺寸的屏幕（包括手机、平板、PC等等）设置了 不同的样式类，这样让开发人员在开发时可以有更多的选择。根据我的理解：如果在一个元素上使用多 个不同的上面的样式类，那么元素会根据在不同尺寸选择最合适（匹配最理想的）的样式类。简单的举 例进行说明：比如在一个元素上我们使用了两个样式类：.col-md-和.col-lg。可以对照上面的截图来 看 　　第一种情况：尺寸》=1200px;那么会选择.col-lg。 　　第二种情况：尺寸》=992px 并且尺寸《=1200px;那么会选择.col-md。 　　第三种情况如果尺寸《992px;那么这两个样式类都将不会作用于元素上。 友情链接 JavaScript中文网 昵称：aehyok 园龄：1年11个月 粉丝：745 关注：76 +加关注 2014年4月 日 一 二 三 四 五 六 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 1 2 3 4 5 6 7 8 9 10 我的标签 BootStrap前端设计(28) JavaScript(23) Knockoutjs(20) Asp.Net Web API 2(20) MVC项目开发中那些用到的知识点(1 7) C#设计模式(16) ExtJs Mvc(15) Entity FrameWork浅析(14) 项目拓展(12) Linq To Sql(11) 更多 随笔档案(253) 2014年4月 (7) 2014年3月 (11) 15 0 (请您对文章做出评价) 2014年4月11日 Bootstrap3.0学习第三轮(栅格系统案例) - aehyok - 博客园 /aehyok/p/3404725.html 2/9 从堆叠到水平排列 　　栅格选项中的四个样式类的使用都是依附于.row类的基础上，而.row类通常都会在.container的 里进行。 div class=container div class=row div class=col-md-1/div /div /div 就是在合适的容器中使用合适的样式类。 使用单一的一组.col-md-*栅格class，你就可以创建一个基本的栅格系统，在手机和平板设备上一开始 是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。将列(col -*-*)放置于任何.row内即可。 div class=container div class=header h1案例:从堆叠到水平排列/h1 /div 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-