首页 > 网页教程 > CSS > GOLD Bootstrap:支付黄金比例排版的CSS框架

GOLD Bootstrap:支付黄金比例排版的CSS框架

时间:2015-09-26    来源:设计达人

Gold Bootstrap 与官方 Bootstrap 框架不同之处是,它按黄金比例来排版布局,比如行距、字号比例以及常用的栅格系统都以黄多比例了制作,追求完美的比例布局,让Bootstrap更美。

Bootstrap教程 Bootstrap学习 黄金比例分割

黄金分割具有严格的比例性、艺术性、和谐性,蕴藏着丰富的美学价值,而且呈现于不少动物和植物的外观。现今很多工业产品、电子产品、建筑物或艺术品均普遍应用黄金分割,展现其功能性与美观性。

Gold Bootstrap 也跟随这些特征,把BS的所有组件都按黄金分割比例1.618来编写。

Bootstrap教程 Bootstrap学习 黄金比例分割

黄金比例的标题

从h1 – h6标签都以黄金比来处理。

Bootstrap教程 Bootstrap学习 黄金比例分割

黄金比便的栅格系统

连栅格布局都用这个比例,使用的时候只添加对应的Class名称,如: .col-gold-lg 和.col-gold-sm,这样就能实现黄金比布局。

Bootstrap教程 Bootstrap学习 黄金比例分割

除了以上这些,Gold bootstrap 已经把所有组件按黄金比例来处理了,包括表格、表单、Tab选项卡、菜单等等。

Bootstrap教程 Bootstrap学习 黄金比例分割

总结

可以看出开发者还是改动了很多组件,都按黄金比例来进行编写,对于喜欢使用Bootstrap框架的用户来说,不妨试试这个Gold BS Framework.

相关推荐
Bootstrap:知名的开源前端框架中文翻译版上线
Web前端开发框架Twitter BootStrap推荐
前端开发框架Bootstrap3.0新手入门学习系列教程
前端开发框架Bootstrap3.0学习教程之入门篇
前端开发框架Bootstrap3.0学习教程之栅格系统原理
前端开发框架Bootstrap3.0学习教程之栅格系统案例
教你用20分钟建立自己的Bootstrap站点
三款CSS框架介绍:YAML、Blueprintcss、Elements
27款优秀的CSS框架推荐
CSS框架到底有那些优点与缺点?
20个免费CSS框架推荐 网页设计web开发必备
8个超棒的创建响应式网页设计框架推荐
20款设计师和web开发人员最爱的开源CSS框架推荐
TopCoat:一套免费的CSS开源UI元素类库推荐
CSS工具之SASS样式开发指南
10款提升工作效率的响应式页面设计工具推荐
14款响应式布局的前端开发框架推荐
7个精致实用的的web UI框架 开源CSS框架推荐
2015年最受欢迎开源前端框架盘点TOP 20

分类导航

教程推荐

热门特效

热门教程