读书频道 > 网站 > 网页设计 > Bootstrap实战
3.3.2 流式布局
2013-11-02 16:12:20     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

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

流式布局是一种自适应屏幕的设计方法,即不固定块的宽度,而是以百分比为单位来确定每一块的宽度。这种布局非常适合一次编写,然后自适应各种不同大小的屏幕,如智能手机、平板电脑等设备。

流式布局与固定式布局的结构和用法相同。例如:
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
</div>

最外面包含容器是<div class="container-fluid">,定义container-fluid类,表明内容布局是流式布局,其主要作用是作为一个包含块来容纳流式布局内容。里面包含块的内容有 row-fluid类(非常重要),决定是不是流式布局。然后里面的内容块代码编写与网格系统一致,依然是从span1到span12,分别对应于不同的百分比。

<div class="container-fluid">是流式布局的容器,其源码如下:
.container-fluid {
     padding-right: 20px;
     padding-left: 20px;
     *zoom: 1;
}

容器左右各加了20px的内边距:
.container-fluid:before,
.container-fluid:after {
     display: table;
     line-height: 0;
     content: "";
}

清空了前后的内容,并且在后面清除了浮动:
.container-fluid:after {
     clear: both;
}

其实并非固定容器中只能配固定式栅格,流式容器只能配流式栅格,要视需要而定。例如,在下面的结构中,在流式栅格中插入了固定式布局。
<div class="container-fluid">
     <div class="row-fluid">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
     <div class="row">
          <div class="span2"></div>
          <div class="span10"></div>
     </div>
</div>

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

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