读书频道 > 网站 > 网页设计 > Bootstrap实战
3.3.1 固定式布局
2013-11-02 16:03:05     我来说两句 
收藏    我要投稿   

本文所属图书 > Bootstrap实战

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

首先,读者需要分辨3个概念:

(1)Fix(固定式布局)

对于固定式布局而言,无论浏览器是放大还是缩小,内容位置都不会因受挤压而改变,而且整个布局居中。

(2)Fluid(流式布局)

流式布局要设置布局的最大宽度和最小宽度。如果浏览器的宽度大于布局的最大宽度,那么不管浏览器大小怎么调整,布局里面的内容位置都不受挤压改变。如果浏览器的宽度小于布局的最大宽度,大于最小宽度,那么布局里的内容位置会随着浏览器的大小调整而改变。如果浏览器的宽度小于布局的最小宽度,布局里的内容位置也不会改变。

(3)Responsive(响应式布局)

准确来说,没有响应式布局,只有响应式设计。当浏览器的宽度小于某个值时,整个页面呈现另外一种布局。注意,固定式布局和流式布局都包含响应式设计。

先看下面的示例:
<div class="container">
     <div class="row">
          <div class="span4"> span4</div>
          <div class="span8"> span8</div>
     </div>
     <div class="row">
          <div class="span4"> span4</div>
          <div class="span6"> span6</div>
          <div class="span2"> span2</div>
     </div>
</div>

在上面结构中,<div class="container">就是上面所说的容器,其中包含两行栅格(<div class="row">)。

Bootstrap中规定固定容器的总宽度为940px,具体源码定义如下:
.container{
     width: 940px;
}

定义这个容器在页面中居中显示,源码如下:
.container {
     margin-right: auto;
     margin-left: auto;
     *zoom: 1;
}

这里有个技巧,为了让<div>在各种浏览器下产生同样的居中效果,将margin-left和margin-right的值设置为auto,这是最简单的方式。*zoom这个CSS Hack是为了兼容IE6和IE7。

同时,使用了CSS伪元素选择器,在这个类里面清空了前后的内容,并且在后面清除浮动:
.container:before,
.container:after {
     display: table;
     line-height: 0;
     content: "";
}
.container:after {
     clear: both;
}

接着,使用span进行整页布局:无论是做几列的布局,一定要保证在一行内各个span的名字加起来正好是12,例如,span4+span8等于12,也可以是一个单独的span12,还可以是span6+span6或span4+span4+span4等。每行内的span加起来总和为12,这样就可以保证完整的页面布局。

提示 虽然容器的宽度为940px,每个span的宽度都是默认值,但在实际开发中用户可以适当重写。

Bootstrap采用的是12列布局格式,即在页面一行之内最多可以布置12列。当然在局部栏目中不会使用12列,通常侧栏使用2列或3列,最多不会超过4列,主栏可以使用6列、7列或8列。

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

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