如何使用雅虎Pure CSS网格系统

html-css010

如何使用雅虎Pure CSS网格系统,第1张

从默认网格入门

让我们先从一个基本的 HTML 开始，看看如何在上面应用默认网格。

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"media="screen">

</head>

<body>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

Bootstrap 使用 CSS 的 class "row" 来创建水平行，使用 CSS 的 class "spanx"（x 的值从 1 到 12）来创建垂直列。通过这两个就可以创建一个三列的网格（每一列包含一些文本内容），HTML 如下所示

<!DOCTYPE html>

<html>

<head>

<title>Fixed layout example with Bootstrap</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Bootstrap -->

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"media="screen">

</head>

<body>

<div class="container">

<div class="row">

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

<div class="span4"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. Nullam enim leo, egestas id, condimentum at, laoreet mattis, massa. Sed eleifend nonummy diam. Praesent mauris ante, elementum et, bibendum at, posuere sit amet, nibh. Duis tincidunt lectus quis dui viverra vestibulum. Suspendisse vulputate aliquam dui. Nulla elementum dui ut augue. Aliquam vehicula mi at mauris. Maecenas placerat, nisl at consequat rhoncus, sem nunc gravida justo, quis eleifend arcu velit quis lacus. Morbi magna magna, tincidunt a, mattis non, imperdiet vitae, tellus. Sed odio est, auctor ac, sollicitudin in, consequat vitae, orci. Fusce id felis. Vivamus sollicitudin metus eget eros.</p></div>

</div>

</div>

<script src="http://code.jquery.com/jquery.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

下面是网格系统的图形表示

这样，我们就通过对每个列使用 "span4" class，创建好了一个三列网格。"container" class 是用来保存整个结构的。您可以在这里查看在线实例。从这一点，我们可以推导出用于创建给定数量列的 CSS class 的一般语法。

创建网格的一般语法：

<div class="row">

<div class="spanx">

inline elements like span, block level elements like p, div.

</div>

repeat <div class="spanx">y times.

其中 y 是您想要创建的列数以及 x 等于 12（这是您可以创建的最大的列数）的总和。x 必须是正整数，且值必须从 1 到 12。

例如，如果您有三个等宽的列，每个列都是 class="span4"，但是如果您想让第一个列比其他两个更大一些，第一个列可以使用 class="span6"，其他两个列使用 class="span3"。

如何在固定网格中创建行

接下来，在我们继续其他实例之前，先来看看在固定网格中用来创建行和列的 CSS 规则。

row class 如下所示

.row {

margin-left: -20px

*zoom: 1

}

设置左边距为负的 20px，且设置 "*zoom: 1"。这里的 "*" 表示所有元素的 zoom 属性都设置为 1，用来修复 IE6/7 的 bug。设置 zoom 属性为 1，即设置了一个名为 hasLayout 的内部属性，用于修复 IE6/7 的许多缩放/渲染问题。

.row:before,

.row:after {

display: table

line-height: 0

content: ""

}

Bootstrap 使用前面的 CSS 代码来创建行。它使用 ":before" 和 ":after" 的 CSS 属性。这两个是伪元素。":before" 用于在目标元素之前插入一些内容，":after" 用于在目标元素之后插入一些内容。"display:table" 使得元素以表格形式呈现。通过设置 "line-height: 0" 来确保每个行没有自己的行高，通过使用 'content: ""' 来确保元素前后没有内容被插入。

浏览器里都有一个默认的margin和padding值，不同的浏览器值不相同，所以按照自己写的CSS计算宽度不对，在CSS样式开始的时候设置*{margin:0padding:0}；初始化所有元素的margin和padding为0，这样计算 的时候宽度就是设置的width，border，padding，margin值的和。你可以在CSS中加入*{padding:0margin:0}就会正常了。