Bootstrap教程:[4]栅格系统详解
2015-09-22 13:22
691 查看
http://jingyan.baidu.com/article/6f2f55a1852aa1b5b83e6c5a.html
们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
col-xs类,用法是<div class="col-xs-*">。它星号代表1--12的数字。我们知道栅格系统总共有12列,我们在这里使用数字几就代表着该div占用几列的宽度。假如我们在给超级小屏幕开发界面,那么我们使用该类,该类没有任何行为,不管屏幕小到多少,都不会改变div的布局。
col-sm类,用法是<div class="col-sm-*">。数字的意义同上,但是该类适合屏幕宽度为750的设备,如果在屏幕宽度小于750的设别上,该div就会水平堆叠。这是在超过750屏幕上的样式:
这是在低于750屏幕上的样式:
col-md类:该类适合970像素以上屏幕。通上面讲的道理一样,假如使用屏幕尺寸小于970像素的设备查看网页,div就会垂直堆叠。这是大于970像素的设备:
这是小于970像素的设备:
col-lg的行为也是一样的,这里就不演示了
下面说一下如何组合使用这几个类。我们使用<div class="col-sm-10 col-md-8">这样的方式来表示:在中等屏幕设备上该div占用8列的宽度;在小屏幕上该div占用10列的宽度。
们都知道bootstrap3.0使用了四种栅格选项来形成栅格系统,这四种选项在官网上的介绍如下图,很多人不理解,这里跟大家详解一下四种栅格选项之间的区别,其实区别只有一条就是适合不同尺寸的屏幕设备。我们看class前缀这一项,我们姑且以前缀命名这四种栅格选项,他们分别是col-xs ,col-sm,col-md,col-lg,我们懂英文的就知道,lg是large的缩写,md是mid的缩写,sm是small的缩写,xs是***的缩写。这样命名就体现了这几种class适应的屏幕宽度不同。下面我们分别介绍这几种class的特点。
col-xs类,用法是<div class="col-xs-*">。它星号代表1--12的数字。我们知道栅格系统总共有12列,我们在这里使用数字几就代表着该div占用几列的宽度。假如我们在给超级小屏幕开发界面,那么我们使用该类,该类没有任何行为,不管屏幕小到多少,都不会改变div的布局。
col-sm类,用法是<div class="col-sm-*">。数字的意义同上,但是该类适合屏幕宽度为750的设备,如果在屏幕宽度小于750的设别上,该div就会水平堆叠。这是在超过750屏幕上的样式:
这是在低于750屏幕上的样式:
col-md类:该类适合970像素以上屏幕。通上面讲的道理一样,假如使用屏幕尺寸小于970像素的设备查看网页,div就会垂直堆叠。这是大于970像素的设备:
这是小于970像素的设备:
col-lg的行为也是一样的,这里就不演示了
下面说一下如何组合使用这几个类。我们使用<div class="col-sm-10 col-md-8">这样的方式来表示:在中等屏幕设备上该div占用8列的宽度;在小屏幕上该div占用10列的宽度。
相关文章推荐
- 【Bootstrap】兼容IE8、谷歌和其他主流浏览器的观众IMAX风格的页面
- bootstrap table自动换行
- bootstrap精简教程
- jfinal与bootstrap的登录跳转实战演习
- jfinal与bootstrap的登录跳转实战演习
- 解决Bootstrap不兼容IE8及以下版本的问题
- bootstrap 学习
- MVC5 + EF6 + Bootstrap3 (16) 客户端验证
- MVC5 + EF6 + Bootstrap3 (15) 应用ModelState和Data Annotation做服务器端数据验证
- 项目____因为引用Bootstrap导致的格式被覆盖
- MVC5 + EF6 + Bootstrap3 (12) 新建数据
- Bootstrap碎语
- Bootstrap (Web前端CSS框架)
- MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
- Bootstrap3.0支持IE8的方法
- 垂直伸缩菜单——bootstrap手风琴嵌套
- bootstrap 提示框插件 bootstrap-growl 和bootstrap-notify用法简介
- 基于bootstrap的简单分页
- 如何让Bootstap的轮播图片居中
- bootstrap学习教程