码迷,mamicode.com
首页 > 其他好文 > 详细

Bootstrap入门(二)栅格

时间:2016-12-08 23:46:40      阅读:196      评论:0      收藏:0      [点我收藏+]

标签:屏幕   不同的   排序   平板   开始   页面布局   blog   参数   全局   

Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) container 容器,栅格系统是依赖容器存在的
...
Bootstrap 提供的栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。参数: 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示器 (≥992px) 大屏幕 大桌面显示器 (≥1200px) 栅格系统行为 总是水平排列 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C 开始是堆叠在一起的,当大于这些阈值时将变为水平排列C .container 最大宽度 None (自动) 750px 970px 1170px 类前缀 .col-xs- .col-sm- .col-md- .col-lg- 代码操作 为方便查看栅格效果,为栅格添加一组样式 复制代码 复制代码 先创建一个class为container的div
...
然后添加13个小栅格 复制代码
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
复制代码 第13个自动换行,确实一行最多12份,效果: 再添加两组div 复制代码
col-md-3
col-md-3
col-md-3
col-md-3
col-md-3
col-md-3
col-md-3
复制代码 发现少了的,是不会有任何显示的,效果: 添加其中一个栅格的内容量,发现自动换行,效果: 添加两组带偏移效果的div(“col-md-offset-X”属性 X为将分成12份后,偏移多少的位置) 复制代码        
col-md-4 col-md-offset-1
col-md-4 col-md-offset-4
复制代码 效果: 嵌套使用 复制代码
col-sm-9
col-xs-8
col-xs-4
复制代码 效果: 列排序(“col-md-push- ”、“col-md-pull- ”属性改变列的排序,“col-md-push- X” 向后移动X个单位,“col-md-pull- X”向前移动X个单位) 复制代码
col-md-9
col-md-3
col-md-9 col-md-push-3
col-md-3 col-md-pull-9
复制代码 效果: 此文章转载-转载自:http://www.cnblogs.com/hnnydxgjj/p/5847646.html

Bootstrap入门(二)栅格

标签:屏幕   不同的   排序   平板   开始   页面布局   blog   参数   全局   

原文地址:http://www.cnblogs.com/nield-bky/p/6147181.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!