布局框架
pills - 简单响应式12列CSS网格系统
PetitQ
pills.css 是一款简单实用的响应式 12 列 CSS 网格系统。该网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的 class 名称。
使用方法
使用该 CSS 网格额系统需要在页面中引入 pills.css 文件。
也想出现在这里？联系我们吧
<link type="text/css" rel="stylesheet" href="css/pills.css">
HTML 结构
在页面的
中添加下面的<meta>标签，设置视口的宽度为设备的宽度。该标签可以确保视口在移动设计或平板电脑上不被缩放。<meta name="viewport" content="width=device-width,initial-scale=1">
12 列网格系统
pills.css 使用.row class 类来作为行包裹元素，使用.columns 来标注列，由于 pills.css 是 12 列的网格系统，如果你需要一行占满 12 列，相应的 class 为 twelve columns。
<div class="row">
<div class="twelve columns">
</div>
</div>
下面是一行中有 2 列，它们分别占 4 个网格和 8 个网格。
<div class="row">
<div class="four columns">
</div>
<div class="eight columns">
</div>
</div>
你也可以在 columns 中嵌套.row。
<div class="row">
<div class="four columns">
</div>
<div class="eight columns">
<div class="row">
<div class="six columns">
</div>
<div class="six columns">
</div>
</div>
</div>
</div>
要进行列偏移，可以执行下边的代码：
<div class="row">
<div class="eight columns offset by-four">
</div>
百分比网格系统模式
pills.css 还有另外一种百分比网格系统模式。这种模式中一行用.whole 表示，1/2 行用.half 表示。你可以将一行等分为 5 分，每一份用.one-fifth 表示，则.two-fifths 表示 2/5 份，以此类推。也可以将一行等分为 4 份，每一份用.one-quarter 表示，或将一行等分为 3 份，每一份用.one-third 表示。
网格占据一行：
<div class="row">
<div class="column whole">
</div>
</div>
2 个网格等分：
<div class="row">
<div class="column half">
</div>
<div class="column half">
</div>
</div>
<div class="row">
<div class="column one-fourth">
</div>
<div class="column three-fourths">
<div class="row">
<div class="column two-fifths">
</div>
<div class="column three-fifths">
</div>
</div>
</div>
</div>
偏移网格：
<div class="row">
<div class="column two-thirds offset by-one-third">
</div>
pills.css 12 列响应式网格系统插件的 github 地址为：https://github.com/rohitkrai03/pills
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
