读书频道 > 网站 > 网页设计 > Bootstrap实战
3.2.4 响应式Bootstrap栅格系统
2013-11-02 15:49:22     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

本书由国内资深前端工程师撰写,是目前内容最为全面和深入的Bootstrap专著。它不仅系统讲解了Bootstrap的各项功能和使用方法,详细讲解了Bootstrap的组件、插件和扩展技术,而且深度解析了Bootstrap的内核源代码  立即去当当网订购

在默认情况下,Bootstrap没有启用响应式布局特性。如果加入响应式布局CSS文件(bootstrap-responsive.css),栅格系统会自动根据可视窗口的宽度从724px到1170px进行动态调整。在可视窗口低于767px宽的情况下,列将不再固定并且会在垂直方向堆叠。

响应式(即流式)栅格与固定式栅格的区别在于,每列的宽度是按照百分比来计算外围包裹的宽度的,看一下下面的源码
row-fluid {
    width: 100%;
    *zoom: 1;
}
.row-fluid:before,
.row-fluid:after {
     display: table;
     line-height: 0;
     content: "";
}
.row-fluid:after {
     clear: both;
}

定义容器的宽度完全填充包裹外围容器的宽度。
.row-fluid [class*="span"]:first-child {
     margin-left: 0;
}

清空第一列前面的边距,与固定式中的margin-left: -20px效果是一样的。
.row-fluid [class*="span"] {
   display: block;
   float: left;
   width: 100%;
   min-height: 30px;
   margin-left: 2.127659574468085%;
   *margin-left: 2.074468085106383%;
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
}

这里只关注与宽度有关的代码。上面代码中margin-left: 2.127659574468085%以百分比设置列的左边距(margin-left),约等于2.12%。以上面固定式中的940px为例来算下大约是多少像素:2.12%×940=19.928,与20px很接近。

下面的代码用来设置列的宽度(width),其中百分比也是按照固定式中的原则算得的。
.row-fluid .span12 { width: 100%;   *width: 99.94680851063829%;}
.row-fluid .span11 { width: 91.48936170212765%; *width: 91.43617021276594%;}
.row-fluid .span10 { width: 82.97872340425532%; *width: 82.92553191489361%;}
.row-fluid .span9 { width: 74.46808510638297%; *width: 74.41489361702126%;}
.row-fluid .span8 { width: 65.95744680851064%; *width: 65.90425531914893%;}
.row-fluid .span7 { width: 57.44680851063829%; *width: 57.39361702127659%;}
.row-fluid .span6 { width: 48.93617021276595%; *width: 48.88297872340425%;}
.row-fluid .span5 { width: 40.42553191489362%; *width: 40.37234042553192%;}
.row-fluid .span4 { width: 31.914893617021278% *width: 31.861702127659576%;}
.row-fluid .span3 { width: 23.404255319148934%; *width: 23.351063829787233%;}
.row-fluid .span2 { width: 14.893617021276595%; *width: 14.840425531914894%;}
.row-fluid .span1 { width: 6.382978723404255%; *width: 6.329787234042553%;}

基本的流式栅格HTML代码与固定宽度栅格系统用法大致相同,只需要将.row替换为.row-fluid就能让任何一行流动起来。应用于每一列的类不用改变,这样能方便地在流式与固定栅格之间切换。
<div class="row-fluid">
     <div class="span3">3</div>
     <div class="span6">6</div> 
     <div class="span3">3</div>
</div>

定义流式栅格的偏移方式与固定网格系统相同:给任何想要偏移的列添加.offset*即可。例如,设计如下结构的效果如图3-15所示。
<div class="row-fluid">
     <div class="span4">4</div>
     <div class="span4 offset4">4 offset 4</div>
</div>

 

例如,针对3.2.3节的模式示例,可以把它很轻松地转换为流式布局,代码如下,演示效果如图3-16所示。
<div class="container-fluid">
     <div class="hero-unit"></div>
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span7"></div>
          <div class="span3"></div>
     </div>
     <footer></footer>
</div>

 

不管是固定式栅格,还是流式栅格,它们都可以实现嵌套设计。但是,与固定栅格的嵌套有一点不同,流式栅格要求被嵌套的列数之和等于12。这是因为流式栅格使用百分比来设置每列的宽度。

例如,在下面的HTML结构中,通过流式栅格设计三层嵌套的布局效果,如图3-17所示。
<div class="container-fluid text-center">
     <div class="row-fluid">
          <div class="span12"> Fluid 12
               <div class="row-fluid">
                    <div class="span6"> Fluid 6
                         <div class="row-fluid">
                              <div class="span6">Fluid 6</div>
                              <div class="span6">Fluid 6</div>
                     </div>
               </div>
          <div class="span6">Fluid 6</div>
        </div>
     </div>
   </div>
</div>

 

在固定式布局里,栅格里套栅格的逻辑很简单,只需照着它们固定宽度来设计即可。在流式布局里,栅格里套栅格的逻辑就稍微复杂一点,不照固定宽度来计算,而照宽度百分比来计算。因此,在实际项目中,同样的栅格套栅格,流式布局里的栅格宽度会比固定式布局的宽一点。

在3.2.3节中我们介绍过,Bootstrap允许通过修改variables.less的参数值来自定义栅格系统,流式栅格系统同样可以进行类似的修改。修改后并重新编译Bootstrap来实现自定义栅格系统。如果添加新的列,需要同时修改grid.less,同样需要修改responsive.less来获得多设备兼容。

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

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