bootstrap学习笔记(一)网络系统

注：我是根据自己理解写的有参考http://www.w3cschool.cc/bootstrap该教程。

bootstrap目前有两种默认的网络（格）系统：一个是940px,另一个是12列。

我们先从12列入手看看：

1.Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。

以一个DIV为例创建网络：

1 <div class="container">
2      <div   class="row">
3             <div class="span*"></div>//*取值1到12
4             <div class="span*"></div>
5             <div class="span*"></div>
6             .....
7      </div>
8 </div>

Example1

2.如何在固定的网络中创建行和列（css规则）

 1 .row {
 2   margin-left: -20px;
 3   *zoom: 1;
 4  }
 5 //设置 "*zoom: 1;"。这里的 "*" 表示所有元素的 zoom 属性都设置为 1，用来修复 IE6/7 的 bug。设置 zoom 属性为 1，即设置了一个名为 hasLayout 的内部属性，用于修复 IE6/7 的许多缩放/渲染问题。
 6 
 7 .row:before,
 8 .row:after {
 9   display: table;
10   line-height: 0;
11   content: "";
12 }
13 //两个是伪元素。":before" 用于在目标元素之前插入一些内容，":after" 用于在目标元素之后插入一些内容。"display:table;" 使得元素以表格形式呈现。通过设置 "line-height: 0;" 来确保每个行没有自己的行高，通过使用 'content: ""' 来确保元素前后没有内容被插入。
14 
15 .row:after {
16   clear: both;
17 }// 此规则 保证给定元素的左右两侧没有浮动元素。

row规则

1 [class*="span"] {
2   float: left;
3   min-height: 1px;
4   margin-left: 20px;
5 }
6 //'[class*="span"]' 选择了 class 属性值以 'span' 开始的所有元素。现在使用 "float: left;" 来定位每个列彼此相邻。使用 "min-height: 1px" 来让所有的列有一个最小的高度为 1px，使用 "margin-left: 20px;"设置左边距为 20px。

span规则

单独的 CSS 规则来设置列宽:

.span12 {width: 940px;}	如果该行有一个单一的列，列宽为 940px。
.span11 {width: 860px;}	如果该行有一个由 11 列合并的列，列宽为 860px。
.span10 {width: 780px;}	如果该行有一个由 10 列合并的列，列宽为 780px
.span9 {width: 700px;}	如果该行有一个由 9列合并的列，列宽为 700px
.span8 {width: 620px;}	如果该行有一个由 8 列合并的列，列宽为 620px
.span7 {width: 540px;}	如果该行有一个由 7列合并的列，列宽为 540px
.span6{width: 460px;}	如果该行有一个由 6列合并的列，列宽为 460px
.span5 {width: 380px;}	如果该行有一个由 5列合并的列，列宽为 380px
.span4 {width: 300px;}	如果该行有一个由 4 列合并的列，列宽为 300px
.span3 { width: 220px;}	如果该行有一个由 3列合并的列，列宽为 220px
.span2 { width: 140px;}	如果该行有一个由 2列合并的列，列宽为 140px
.span1 { width: 60px;}	单列宽为 60px

3.偏移列

通过使用偏移，您可以把列移动它原始位置的右侧。这是通过向列添加左边距来实现的。通过 Bootstrap，您可以使用 "offsetx"（其中 x 的值是一个正整数） class 和 class "spany"（其中 y 的值是一个正整数）。取决于 'offestx' 中 'x' 的值，相关的列向右移动 'x' 个列的宽度。偏移的宽度是在 Bootstrap CSS 中定义的。offset12 的最高左边距是 980px，offset1 的最低左边距是 100px。由于默认网格系统是基于像素的，当应用偏移时，您必须知道您要用于偏移的像素和要用于列的像素。这两个加在一起必须不超过您的水平视口的像素数。

简单的意思就是追加类名，比如 <div class=" span2 offset4">

4.嵌套列

您只需要简单地在列中创建一个行，并创建您想要在行中嵌套的列数。与此同时，您必须记住用来嵌套其他列的列的总列数，确保不能超过您创建父列时所提到的列数。

posted on 2014-04-18 16:15 Aaronfay 阅读(357) 评论(0) 编辑收藏举报