编程网站

当前位置:首页 > 站长导航 > 编程网站 >

Blueprint

时间:2020-05-31|栏目:编程网站|点击:

Blueprint是当前互联网上最流行的CSS框架,它的缩写是BP。Blueprint框架是为了节约开发时间而设计的,用户可以在Blueprint框架的基础上构建我们的CSS。对于每个页面都有独特设计的网站,Blueprint框架最为适用。通过学习Blueprint框架源代码包tests目录下网页的源代码,用户可以快速掌握Blueprint的特性。和一般意义上的框架不同,Blueprint不会告诉用户应该如何组织或编写CSS,它更像一个工具箱,我们可以根据需要选用。

Blueprint框架有三个组成部分:首先是重置CSS,移除了不同Web浏览器设置的CSS默认规则;二是排版规则,提供良好的默认排版效果和颜色;三是栅格,提供了用于创建栅格布局的CSS类。除此之外,Blueprint框架还提供了两个脚本Compressor和Validator。Compressor脚本用于压缩和定制Blueprint源文件。Validator脚本用于校验Blueprint核心文件。这两个脚本都是用Ruby编写的。作为一个 CSS 框架,Blueprint可以让你用很整洁的代码来将页面划分成很复杂的网格结构。从一定意义上说,Blueprint 提供了真正的所见即所得的网页设计,因为您的原型将使用与最终站点相同的代码。

使用Blueprint框架的第一步,是在网页中包含screen.css、print.css和ie.css这3个文件。screen.css提供了显示器、投影机显示所需的CSS,print.css提供了打印所需的CSS,ie.css提供了针对IE浏览器的补丁。注意,不要修改Blueprint框架的源代码,当需要改变HTML元素的CSS时,用户应该在自己的CSS文件中编写或修改。这样,当Blueprint框架有新版本推出时,你就可以无痛升级了。实际上,由于 Blueprint 提供了强大的 CSS,因此你可以在 HTML 中设计网页,而不必使用图像设计程序来模拟最终页面

Blueprint提供下面这些类,用于定制排版效果:让元素文本显示得更小;让元素文本显示得更大;隐藏元素;柔化元素文本的颜色;让元素文本显示为黑色等。通过Blueprint框架提供的栅格CSS类,用户以建立任何一种栅格布局的网站。默认的栅格有24列,每一列宽30px,列与列之间的margin是10px,总的宽度是950px。默认的栅格在1024×768分辨率下显示效果良好。除了页头和页尾外,具有3栏布局,两个边栏的宽度是中间内容的1/4。需要注意的是,Blueprint框架要求把所有页面内容都放在之间,也就是说正文内就应该是这个div。其次,除宽度为24列的栏(使用.span-24类)外,每一行的最后一栏必须带有.last类。

Blueprint网址:http://www.blueprintcss.org 访问网站

上一篇:GCC

栏    目:编程网站

下一篇:OpenGL

本文标题:Blueprint

本文地址:http://www.yunfuwuqi.com/site/786.html

您可能感兴趣的文章

广告投放 | 联系我们 | 人才招聘 | 企业邮箱 | 网盘登录 | 网站收录 | 网址大全

© 本网站所有内容均来自互联网