【Skeleton】布局

Skeleton 是一个轻量级的 CSS 栅格系统。

里面用了 400 行代码就把排版布局、按钮、表单和表格的装饰都定义好了。

用 Skeleton 布局，在理解上其实和用<table>布局差不多。

都是把网站的排版变得比较整齐。不过 Skeleton 很灵活。

Skeleton CDN地址

用 Skeleton 的方法就是和外链 CSS 样式一样。

<link rel="stylesheet" href="css/skeleton.css">

用过 bootstrap 的开发者都知道，在布局时，首先要有一个最外层的容器，然后再分成行和列。

在 Skeleton 中，一个容器就是一个类为 container 的 <div> 标签。

<div class="container"></div>

设置好容器之后，接下来是添加行

一个容器中有一个或多个行。行就是嵌套在容器里的 <div> 标签，类为 row

<div class="container">  <div class="row">  </div></div>

下面的代码是多行

<div class="container">	<div class="row">	</div>	<div class="row">	</div>	<div class="row">	</div>	<div class="row">	</div></div>

最后要添加的是每行里的单元格

Skeleton 使用分成 12 个单元的栅格，因此，添加到一行中的 <div> 标签，要么至少占用一个单元的宽度（很窄），要么占 12 个单元的宽度（最宽）。此外，如果有多列，总宽度必须正好等于 12 个单元的宽度。

例如，如果分成三列，可以都占 4 个单元的宽度，也可以一个占 2 个单元，另外 2 个各占 5 个单元的宽度。

把 <div> 标签设为列的方法：在 class 属性中添加 columns ，用 one 到 twelve ，设定列的宽度。用 1-12 对应的单词设置宽度。

<div class="container">  <div class="row">    <div class="four columns"></div>    <div class="four columns"></div>    <div class="four columns"></div>  </div>  <div class="row">    <div class="four columns"></div>    <div class="four columns"></div>    <div class="four columns"></div>  </div>  <div class="row">    <div class="four columns"></div>    <div class="four columns"></div>    <div class="four columns"></div>  </div></div>

这样，就设定好一个三行三列的布局。

最后再加上自己设定的样式

.row {  margin: 10px;}
.columns {  background: #1574A8;  height: 30px;}

可以看到如下效果

且支持响应式缩放，比如把浏览器缩小。

上图是用 Skeleton 布局的所有方式。

Skeleton 有个很好的功能：CSS 样式会自动计算多列所需的留白。

因此，我们无需自己计算要在两列之间放多少空白。如果一行里只有一列，Skeleton 不会添加留白；

如果一行里有两列，Skeleton 会在两列之间添加一个留白；

如果一行里面有六列，Skeleton 会添加五个留白。

所有这些都在 Skeleton 的 CSS 文件中计算好了。