成都web前端培训
成都达内金融街中心

18328393564

热门课程

响应式CSS网格系统分享

  • 时间:2016-06-28 18:12
  • 发布:达内杨老师
  • 来源:达内

成都达内分享——pills.css是一款简单实用的响应式12列CSS网格系统。该网格系统的特点是使用人们易于记忆的英文单词来作为设置网格列的class名称。

安装

可以通过bower或npm来安装该CSS网格系统插件。

bower install pills

npm install pills               

使用方法

使用该CSS网格额系统需要在页面中引入pills.css文件。

<link type="text/css" rel="stylesheet" href="css/pills.css">           

HTML结构

在页面的<head>中添加下面的<meta>标签,设置视口的宽度为设备的宽度。该标签可以确保视口在移动设计或平板电脑上不被缩放。

<meta ame="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>          
上一篇:模态窗口插件(JavaScript)分享
下一篇:炫酷汉堡包导航菜单代码
选择城市和中心
贵州省

广西省

海南省