后使用快捷导航没有帐号？
只需一步，快速开始
查看: 1090|回复: 4
bootstrap栅格布局一些问题请教
UID620723在线时间 小时积分61帖子离线16921 天注册时间
初级会员, 积分 61, 距离下一级还需 139 积分
本帖最后由 dodogo 于
09:16 编辑
1.对于不是栅格整数倍的内容块,怎么写的?
2.这个col有个15px的左边距,有时候不需要,一般是怎么处理的
3.宽度设置的问题,我的网页除了头部,下面的主体内容的宽度是980,想让页面在小屏幕上按默认的显示,在大屏幕上保持不变
我这么写OK吗?
& & & & @media (min-width: 1200px) {
& && && && && & & & & & & & & & & & & & & & & & & & & & & & & && &.container {
& && && && && & & & & & & & & & & & & & & & & & & & & & & & & && &&&width:980
& && && && && & & & & & & & & & & & & & & & & & & & & & & & & && &}
& && && && && & & & & & & & & & & & & & & & & & & & & & & & & & }& &
本帖子中包含更多资源
才可以下载或查看，没有帐号？
UID578174在线时间 小时积分1456帖子离线16921 天注册时间
银牌会员, 积分 1456, 距离下一级还需 1544 积分
bootstrap的原理是什么,是全部float ,最后一个栅格block吗?
UID363567在线时间 小时积分5247帖子离线16921 天注册时间
栅格布局就是，把页面划分成一个个约定的格子进行布局
3个半栅格这种已经打破约定，无法使用本身框架
只能自己去处理，当然也没有了栅格的概念，就是个自定义宽度，然后处理各种屏幕下的展示
UID620723在线时间 小时积分61帖子离线16921 天注册时间
初级会员, 积分 61, 距离下一级还需 139 积分
第2个OK了.
给里面的内容添加margin-left:-15px
或者嵌套一个row,但是不要再写col,直接放内容到row下面.
UID539279在线时间 小时积分1814帖子离线16921 天注册时间
银牌会员, 积分 1814, 距离下一级还需 1186 积分
bootstrap真的有必要吗？ 大部分人拿来都几乎全部重写覆盖了框架本身提供的样式，而自己还需要花大量时间来了解其实现细节，有这个时间自己写完全可以来几遍了。。。
bootstrap类似的ui框架更加适合一些后台管理系统以及没有ui设计，需要快速搭建一个展示页面的情况
产品有自己的ui设计，用这些框架个人觉得反而是累赘
Powered by搞定bootstrap栅格(grid)系统 - 为程序员服务
搞定bootstrap栅格(grid)系统
这个系列会介绍一些 bootstrap 主要模块的源码，第一篇就介绍一些神奇的栅格系统。文章首发在
中可以了解，栅格系统已经有了非常长的历史。
1629年，法王路易十四命令成立一个管理印刷的皇家特别委员会，由数学家尼古拉斯·加宗（Nicolas Jaugeon）担任领导。委员会提出了新字体设计建议：以罗马体为基础，采用方格为设计依据，每个字体方格分为64个基本方格单位，每个方格单位再分成36小格，这样，一个印刷版面就由2304个小格组成。这是世上最早对字体和版面进行科学实验的活动。也是栅格系统的雏形。
在字体设计、版式设计最早使用，后来网页设计也开始使用栅格系统
网页栅格系统
960栅格系统
960栅格系统算是最有名的固定宽度的栅格系统，在1024是普遍分辨率的情况下，960栅格系统非常的好用。
现在用浏览器打开，如上图，当然是很挫了
&!--container宽度固定为960px，浏览器居中显示 container_12指默认有12列--&
&div class="container_12"&
Column Grid
&!--grid_12就会占一整行--&
&div class="grid_12"&
&!--每行使用 clear清除浮动--&
&div class="clear"&&/div&
&div class="grid_1"&
&div class="grid_11"&
&div class="clear"&&/div&
&div class="grid_2"&
&div class="grid_10"&
960grid实现非常简单
/*提供两种 container，固定宽度为960px,居中对齐*/
.container_12,
.container_16 {
margin-left:
margin-right:
width: 960
/*枚举所有grid，向左浮动*/
margin-left: 10
margin-right: 10
/*根据 container 设置固定大小*/
.container_12 .grid_1 {
在1024为主要分辨率的时代，960可以非常方便的解决网页的布局问题，但是随着屏幕分辨率越来越大，各种移动设备的普及，我们就需要新一代响应式的栅格系统了。
下面我们进入正题，讲一讲bootstrap 的栅格系统
bootstrap栅格系统
bootstrap的栅格系统是一个移动优先的栅格系统
固定大小的栅格系统(container)
bootstrap提供固定大小的栅格系统，但是和960grid 不同，bootstrap 提供的是一组。
bootstrap通过 Media Query，来设置不同级别的固定大小，如图下图所示
来个官方的 demo
&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 class="row"&
&div class="col-md-8"&.col-md-8&/div&
&div class="col-md-4"&.col-md-4&/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 class="row"&
&div class="col-md-6"&.col-md-6&/div&
&div class="col-md-6"&.col-md-6&/div&
结果如图所示
流式栅格系统(container-fluid)
bootstrap 除了提供 container 之外，还提供了 contaienr-fluid 类，这个会让容器的大小等于浏览器的大小，使用方法和container 一致。
如何来做响应式布局
上文已经可以了解到，行使用 row 来控制，列使用 col 来控制。
col根据分辨率不同，分为 col-xs-,col-sm-,col-md-,col-lg-四种类型，并且针对这些提供课可见类
&div class="row"&
&div class="col-xs-12 col-sm-6 col-md-8"&.col-xs-12 .col-sm-6 .col-md-8&/div&
&div class="col-xs-6 col-md-4"&.col-xs-6 .col-md-4&/div&
&div class="row"&
&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&
&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&
&!-- Optional: clear the XS cols if their content doesn't match in height --&
&div class="clearfix visible-xs-block"&&/div&
&div class="col-xs-6 col-sm-4"&.col-xs-6 .col-sm-4&/div&
在大于992px 的浏览器：
* 第一行是8/4分
在大于768小于992的浏览器：
* 第一行是6/6分
在小于768的浏览器：
* 第一行是12/0
从上面的例子基本可以了解响应式栅格系统的使用了，col 四种类型，是向上兼容的，也就是会优先显示大屏幕的类
bootstrap源码解析
等待下回分解
博客读写---努力做最好的多人技术博客
原文地址：, 感谢原作者分享。
您可能感兴趣的代码在去年的这个时候写过关于bootstrap的相关文章（见：），然后就搁置了，原因是因为当时对bootstrap的了解不深，并且当时v2版本对响应式设计的不是非常好。如今，bootstrap的v3版本很早就出来了，现在又拿出来老调重弹一次。
这次学习bootstrap，希望是一次比较深入的了解bootstrap，但愿能够在实际开发中运用的得心应手。学习的步骤大致根据bootstrap的中文翻译文档（见参考资料）来，但也有部分地方会深入或者浅出。
1、像素宽度分类
在bootstrap的v3版本中，已经将各种媒介分为4种像素宽度类型：
xs：extra small 特别窄屏幕，默认指浏览器像素宽度小于768px
sm：small 窄屏幕，默认指浏览器像素宽度大于等于768px
md：middle 中等宽度屏幕，默认值指浏览器像素宽度大于等于992px
lg：large 大屏幕，默认值指浏览器像素宽度大于等于1200px
这四种屏幕宽度对应的尺寸缩写死记硬背记住，对布局来说非常的重要。
2、布局栅格化
和v2一样，bootstrap将内容区域分为了12等分，平均每一等分都有相等的间距，左右无外边距。一个栅格宽度为栅格单位宽度，一个栅格的外边距为栅格的单位外边距。栅格的宽度和边距都是百分比计算，使之能够自适应各种宽度。栅格的class为col-*，栅格的外包class为row。每一个行可以有多个列组成的多行栅格，每一个行在形象意义上称为版块（模块、区域），是一个相对独立的部分。但一行有且只能一个行出现，不能出现多个。
结合屏幕宽度分别有：
xs：col-xs-1 ~ col-xs-12，多列始终在一行内。
sm：col-sm-1 ~ col-sm-12，多列在浏览器像素宽度大于等于768px时才在一行内。
md：col-md-1 ~ col-md-12，多列在浏览器像素宽度大于等于992px时才在一行内。
lg：col-lg-1 ~ col-lg-12，多列在浏览器像素宽度大于等于1200px时才在一行内。
&div class="row"&
&div class="col-xs-4"&&/div&
&div class="col-xs-4"&&/div&
&div class="col-xs-4"&&/div&
如上，xs宽度下，同行多列始终在一行内：
&div class="row"&
&div class="col-sm-4"&&/div&
&div class="col-sm-4"&&/div&
&div class="col-sm-4"&&/div&
如预期的一样，在大于等于768px的时候，多列是水平排列的，否则是垂直排列的：
对于md、lg和sm是同理的，惟独xs特殊。
在处理不同像素宽度的时候，大宽度的适配优先于窄宽度（即ls>md>sm>xs）。
&div class="row"&
&div class="col-sm-4 col-md-1"&&/div&
&div class="col-sm-4 col-md-10"&&/div&
&div class="col-sm-4 col-md-1"&&/div&
如上，md的优先级就高于sm，即：
在大于等于992px（md）的时候（即使此时也是大于等于768px（sm）的），该行多列是水平方向1:10:1栅格宽度排列的；
在小于992px并且大于等于768px的时候，该行多列遵循sm规则，在水平方向4:4:4栅格宽度排列；
在小于768px的时候，该行多列呈垂直方向排列（即水平方向12:12:12）。
简要说明：
// 遵循md规则
if( width &= 992 ) 1:10:1
// 遵循sm规则
else if( width & 992 && width &= 768 ) 4:4:4
// 普通规则
else 12:12:12
&div class="row"&
&div class="col-xs-4 col-sm-1 col-md-1 col-lg-5"&&/div&
&div class="col-xs-4 col-sm-3 col-md-10 col-lg-2"&&/div&
&div class="col-xs-4 col-sm-8 col-md-1 col-lg-5"&&/div&
如上，sm的优先级大于xs，md的优先级就高于xs，而lg的优先级又高于md，即：
在大于等于1200px的时候，呈水平5:2:2单位栅格宽度排列；
在大于等于992px并且小于1200px的时候，呈水平1:10:1单位栅格宽度排列；
在大于等于768px并且小于992px的时候，呈水平1:3:8单位栅格宽度排列；
其余遵守xs规则，呈水平4:4:4单位栅格宽度排列。
简要说明：
// 遵循lg规则
if( width &= 1200 ) 5:2:2
// 遵循md规则
else if( width & 1200 && width &= 992 ) 1:10:1
// 遵循sm规则
else if( width & 992 && width &= 768 ) 1:3:8
// 遵循xs规则
else 4:4:4
3、栅格偏移
理解了栅格化，那么栅格偏移也相对容易理解了。v3的偏移分别有以下几种：
offset：左外边距（margin-left）；
pull：右位移（right）；
push：左位移（left）。
其中offset使用的频率最高。不同的列宽度对应的外边距是不同的，所以每一种类型偏移都有四种，以offset为例（以下皆以offset为例）：
xs：col-xs-offset-0 ~ col-xs-offset-12
sm：col-sm-offset-0 ~ col-sm-offset-12
md：col-md-offset-0 ~ col-md-offset-12
lg：col-lg-offset-0 ~ col-lg-offset-12
&div class="row"&
&div class="col-xs-4"&&/div&
&div class="col-xs-4 col-xs-offset-4"&&/div&
结果如图：
&div class="row"&
&div class="
&div class="
col-xs-4 col-xs-offset-4
col-sm-1 col-sm-offset-10
col-md-1 col-md-offset-1
col-lg-1 col-lg-offset-5
结果如图：
另外push和pull主要用来调整列顺序的，比如视图情况需要内容区域在右边，侧边栏在左边，但源代码则必须内容在左边，侧边栏在右边，内容的代码在前面，对SEO据说有一点的好处。
&div class="row"&
&div class="col-md-9 col-md-push-3"&
源代码左边，但视图在右边
&div class="col-md-3 col-md-pull-9"&
源代码右边，但视图在右边
4、布局实例
例8，经典的左侧边栏+右内容栏：
例9，经典的单内容栏：
5、参考资料
bootstrap栅格系统：文章声明：文章正文已结束，感谢阅读。本文系作者原创，如需转载请注明文章来源（
），不胜感激。文章标题：
文章链接：
文章分享：
相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同标签：bootstrap相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然相同作者：云淡然353285237127124120114110977233281327572916195315578013746613336398142870388630080508172017281739174417541754175617571757175839353036221761996346223519178463461790188939使用栅格系统布局网页_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
使用栅格系统布局网页
||文档简介
课工场中关村软件学院，地处北京市中关村核...|
总评分0.0|
&&栅​格​系​统​是​B​o​o​t​s​t​r​a​p​ ​提​供​了​一​套​响​应​式​、​移​动​设​备​优​先​的​流​式​栅​格​系​统​,​随​着​屏​幕​或​视​口​(​v​i​e​w​p​o​r​t​)​尺​寸​的​增​加​,​系​统​会​自​动​分​为​最​多2​列​。​它​包​含​了​易​于​使​用​的​预​定​义​类​,​还​有​强​大​的​m​i​x​i​n​ ​用​于​生​成​更​具​语​义​的​布​局​。
阅读已结束，如果下载本文需要使用0下载券
想免费下载更多文档？
下载文档到电脑，查找使用更方便
还剩2页未读，继续阅读
你可能喜欢