Profound Grid:实现固定和流动布局的响应式网格系统

标签: profound grid 布局 | 发表时间:2013-01-16 18:46 | 作者:梦想天空(山边小溪)
出处:http://www.cnblogs.com/lhb25/

   Profound Grid 是一个实现固定和流动布局的网格系统。内置 SCSS,带给你灵活性和全面的控制。你可以让让个流动或者固定,还可以根据需要为每个媒体添加布局。更改列和间隔宽度,并根据需要删除或添加列。

您可能感兴趣的相关文章

 

  这个网格系统让您的的标记语义化,没有任何“grid_x”类。除非你想使用它们,在这种情况下,它们也可以包括在内。深刻的网格使用负外边距计算列。与其他网格系统不同,流体布局在每一个浏览器看起来几乎完全一样。

 

 

布局示例:

 

使用指南:

  设置网格的总宽度,流动布局设置为 100%:

$total-width: 960px; // px or %

  设置网格的总列数:

$total-colums: 12; // number

  设置网格列之间的间距:

$gutter_width: 1%; // px or %

  设置网格左右两侧的外边距:

$container_margin: 1%; // px or %

 

Github      官方主页      立即下载

 

您可能感兴趣的相关文章

 

本文链接: Profound Grid:固定和流动布局的响应式网格系统

编译来源: 梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文链接

相关 [profound grid 布局] 推荐:

Profound Grid:实现固定和流动布局的响应式网格系统

- - 博客园_梦想天空
Profound Grid 是一个实现固定和流动布局的网格系统. 内置 SCSS,带给你灵活性和全面的控制. 你可以让让个流动或者固定,还可以根据需要为每个媒体添加布局. 更改列和间隔宽度,并根据需要删除或添加列. 2012年最佳的15个 CSS3 教程推荐. 35个让人惊讶的 CSS3 动画效果演示.

js Grid - 列表插件

- Bloger - 博客园-首页原创精华区
     js Grid - 列表插件.     1)Sponsor Flip Wall With jQuery & CSS一个非常不错的显示数据到网格里的插件. 点击后,缩略图会翻转,然后显示更多信息.      2)TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单.

Selenium Grid简介与安装

- - CSDN博客互联网推荐文章
      很多敏捷团队已经使用了Selenium和Watir等 工具进行验收测试或用户接口测试. 这些工具通过驱动Web浏览器的方式反映用户体验,并且为测试那些使用DHTML和Ajax构建的动态接口提供强力支 持. 然而,随着更多的团队采纳类似的工具,他们发现,运行这一整套浏览器驱动的Web接口测试会花费很长时间,而导致构建太慢.

Fusion Garage宣布基于Android的Grid OS

- tinda - Solidot
JooJoo平板制造商Fusion Garage宣布了运行Grid OS的10英寸平板和4英寸智能手机. Grid OS是基于Android的移动操作系统,该公司声称能完全兼容Android应用. Grid-10平板显示屏10.1英寸,分辨率1366 x 768,处理器Nvidia Tegra 2,130万像素摄像头,16GB存储空间,WiFi版$499,3G +WiFi版$599.

jQuery.bsgrid 1.30 发布,简易 jQuery Grid 插件

- - 开源中国社区最新新闻
jQuery.bsgrid 简单易用的jQuery Grid插件. 一个简单易用的jQuery Grid插件,内置提供多套皮肤且非常容易扩展,支持分页或不分页,支持json、xml数据格式,对导出友好,扩展性友好. 本插件的目标是提供简洁实用、代码轻便、扩展性强的Grid功能. 本插件的早期及当前版本已在多个项目中使用.

TabCo 原来就是 Fusion Garage,发布 Grid 10 平板和 Grid 4 智能手机

- Rex - Engadget 中国版
经过几个月的铺垫,带有相当神秘感的 TabCo 终于揭晓:原来是曾经为我们带来 JooJoo 平板的 Fusion Garage 再度卷土重来,推出两台新设备 -- 10 寸的平板 Grid 10 和 4 寸的智能手机 Grid 4. 发布会由公司的 CEO Chandra Rathakrishnan 在台上(录像)发表,最大的特色就是采用 Android 做核心,但整个操作界面全改的 Grid OS 操作系统.

TabCo 原來就是 Fusion Garage,發表 Grid 10 平板和 Grid 4 智慧型手機

- SotongDJ - Engadget 中文版
經過幾個月的舖墊,帶有相當神祕感的 TabCo 正體終於揭曉:原來是曾經為我們帶來 JooJoo 平板的 Fusion Garage 再度捲土重來,推出兩台新裝置 -- 10 吋的平板 Grid 10 和 4 吋的智慧型手機 Grid 4. 發表會由公司的 CEO Chandra Rathakrishnan 在台上(錄影)發表,最大的特色就是跑採用 Android 做核心,但整個操作介面全改的 Grid OS 作業系統.

Photo Grid App: Android 也有好用的相片組合軟體

- - T客邦
拿起手機隨手拍照相當方便,不過有時候只靠一張照片,實在很難和朋友分享當時的喜悅,快利用「相片組合」透過各種不同的版型來將照片組合起來吧. 「 Wide 」模式可將照片以橫向的版型串起, 「 High 」就是以直式的方式將相片串起,很適合每張照片都是重點來套用. 適用平台:Android 1.6以上.

AJAX式資料清單的新選擇-Kendo UI Grid

- - 黑暗執行緒
這幾年在專案中,針對表格式資料的呈現,我多已摒棄PostBack寫法,改用AJAX動態提取方式處理換頁、排列、重新查詢等資料查詢需求,如此可避免傳統PostBack時畫面會閃一下的缺點,提供使用者較流暢的操作感受. 前陣子寫過一篇筆記: Telerik RadGrid AJAX更新範例,介紹的便是應用Telerik的RadControls for ASP.NET AJAX元件庫,實現純AJAX式資料來源的GridView.

Simple Grid:轻量级的响应式 CSS 网格系统

- - 我爱水煮鱼
使用网格进行网页设计已经是潮流,但是现在有很多 CSS 框架都提供网格功能,用来控制网页上每个元素的位置,但是这些 CSS 框架都是太多功能,而有时我们仅仅需要一个简单的网格系统. Simple Grid 就是一个这样的简洁的 CSS 框架,并且它还是基于响应式布局设计. 基于响应式设计的 Simple Grid,让你可以快速创建适应于手机和平板电脑的网站.