读书频道 > 网站 > 网页设计 > Bootstrap用户手册 : 设计响应式网站
1.6  流式网格系统
2013-08-16 16:46:58     我来说两句 
收藏    我要投稿   
Bootstrap 是Mark Otto 和Jacob Thornton 在Twitter 公司共同开发的一个网站开发框架,2011 年8 月发布至今已经成为Github 上最受关注的开源项目。从最初CSS 驱动的项目到目前内置很多JavaScript 插件...  立即去当当网订购

流式网格系统的列宽定义使用百分比,而不是像素。流式网格系统与固定网格系统一样都具有响应能力,可适应不同的屏幕和设备。只要把某一行的.row改为.row-fluid,这一行就会成为流式的。不改变列的类,是为了简化固定和流式网格的切换。想平移列?跟固定网格中一样,在要平移的列中添加.offset*类即可:<div class="row-fluid">

<div class="span4">...</div>

<div class="span8">...</div>

</div>

<div class="row-fluid">

<div class="span4">...</div>

<div class="span4 offset2">...</div>

</div>

流式网格中的嵌套有点不一样。原因是在使用百分比的情况下,每个.row都会把列数重置为12。举个例子,要想在一个.span8中嵌套两个等宽的列,不能使用两个.span4(尽管两个4平分8),而应该使用两个类为.span6的<div>(见图1-4)。这是为保证内容具有响应性,因为我们希望内容100%填满容器:

<div class="row-fluid">

<div class="span8">

<div class="row">

<div class="span6">...</div>

<div class="span6">...</div>

</div>

</div>

</div>

 
 

点击复制链接 与好友分享!回本站首页
分享到: 更多
您对本文章有什么意见或着疑问吗?请到论坛讨论您的关注和建议是我们前行的参考和动力  
上一篇:1.5.3  嵌套列
下一篇:1.7  容器布局
相关文章
图文推荐
JavaScript网页动画设
1.9 响应式
1.8 登陆页式
1.7 主题式
排行
热门
文章
下载
读书

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训
版权所有: 红黑联盟--致力于做最好的IT技术学习网站