优秀CSS框架BlueTrip使用指南

注：如果你己看过本站
http://bardo.iteye.com/blog/930601
这篇文章，那么，以下内容就更容读懂了。CSS框架，所有人都想定制，但如果你发现一款CSS框架，让你放弃定制。你一定很开心！
BlueTrip 就是一款这样的框架！

选择BlueTrip 的理由：
目前，最为流行的CSS框架，不下于20种。而在这众多的CSS框架之中，为什么要选择它？

这是因为：
第一：
BlueTrip 是一个想要整合以下优点的CSS 框架：
•它集成了BluePrint & Tripoli 框架的做好的部分；
 所以，它的名字定名为：BlueTrip (Tripoli 开发者现在已开始做相册程序了。Tripoli 官方网站现在下载不到新的版本的Tripoli 。)
•Hartija 的打印样式；
•960.gs的简洁；
•Elements 图标
作者想以此为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了。

其次：
BlueTrip的一些特性:
•24列网格（这是来源于BluePrint框架的）
•形象的布局样式（BluePrint 中的 源CSS单词做了修改，更符合语义 ）
•简洁的表单样式
•一个打印样式
•一个空的开始样式表
•时髦按钮
•状态信息样式

第三：
BlueTrip所缺的就是模块module，部件，比如tab，
但这实际并不是框架的主体。
比如，OOCSS中有模块module，使用中用户不得不对此进行修改。
BlueTrip正因为如此，成为CSS框架的后起之秀。它目前，有超过OOCSS,BluePrint,960.gs等老牌CSS框架的势头。
目前，Dropal 使用BlueTrip发布了大量的CSS主题模板。Dropal 使用无疑是给普通用户增加了十足的信心。
BlueTrip目前也有大量的使用此框架的页面截图，不亚于BluePrint 官方网站的热闹。
BlueTrip使用的Reset是最经典的Reset，你不需要做任何更改。因而，它能保证兼容所有浏览器。
BlueTrip网格是定宽列的。同时，提供了可变宽列的网格插件可以使用。

第四：
整个设计，使用了OO CSS的理念，即是完全面象对象的CSS，你在使用时，只需要对现有的类扩展，实际上，真正要扩展的就是模块，而模块这个CSS样式，则是与网站风格或页面样式主题关链密切的。所以，框架将此留给了你。你可以直接用普通的DIV，也可以从span类扩展。
最为重要的：代码精简易懂，上手非常快！几乎没有学习的成本！

如何使用：
直接在页面中添加：
  <link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />
  <link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
  <!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" />
  <![endif]-->
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />
当然，有可能需要修改路径。
可以看出，BlueTrip只有四个文件，如果你不需要支持打印，那么，
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
都不需要加上。

文件结构：

screen.css中包含了全部：即reset部分，typography排板部分，grid(layout)网格布局部分等。以下是详细列表：
/*** MEYER RESET v1.0 ***/   重置样式
/*** BASIC TYPOGRAPHY ***/   基本排板
/*** QUOTES ***/    引用样式
/*** FORMS ***/     表单样式
/*** BASE SIZES ***/    基本标题
/*** LISTS ***/    列表样式
/*** TABLES ***/    表格样式
/*** MARGINS & PADDINGS ***/   边空与边距
/*** COLORS ***/    链接与代码色彩
/*** 24 COLUMN GRID ***/   网格布局

/*** FANCY SERIF ***/
/*** SMALL CAPS ***/  以上两项：特殊标题样式

/*** NO LINK ICON (use class="noicon" to remove the link icon from a specific link) ***/
/*** LINK PADDING FOR ICONS ***/
/*** EXTERNAL LINK ICONS ***/
/*** FILE LINK ICONS ***/
/*** MISCELLANEOUS LINK ICONS ***/ 以上五个，定义各类通用的链接(alink)

/*** TEXT CLASSES ***/  文本类样式，包括.error, .notice, .success状态文本。

/*** STYLES FOR BUTTONS ***/
/*** STANDARD BUTTONS ***/
/*** POSITIVE (LIGHT BACKGROUND) ***/
/*** NEGATIVE (DARK BACKGROUND)***/ 以上四个，各种类型的漂亮的按钮

style.css实际是一个空文件，其中写好了注解，告诉你，你自己的定制如何填空到其中。
此外，它没有JS，相对于那些，通过JS进一步调整样式的的框架，显得更加简洁。
至于 ie.css 和 print.css我们不用多说了。

排板样式：
这一点，直接查看框架中的index.htm，不用多说。就是在使用时，最好添加中文字体，其它无需修改。足够使用。
此外，对于英文网站，页面默认是有顶空的。所以，我们可以修改一下 body的定义。

网格系统简介：
这一部分，大部分在其index.htm这个演示页面中也有示例。是入门的好帮手。
网格系统完全引用了BluePrint的24单元格。完全是以DIV分隔。从左到右排时，最右侧一个单元格，一定要加上类：last，这样，右侧的这个没有边空。也不会超宽。
并且，加上last之后，你不需要手工添加Clear Div . 给设计带来了相当大的方便。

container是页面的容器。页面所有内容均在其中。它的宽度是950像素。这是兼容所有现行分辩率与浏览器的页面宽度。

网格内部没有边距(padding)所以，如果要给网格加边距，最好内部嵌入div类为mod打头的，即module.
BlueTrip未提供module. 因为它完全是只完成框架这一块，即最基本的东西，从而给了你所有自由发挥的空间。
形象的布局样式（BluePrint 中的 源CSS单词做了修改，更符合语义 ）
prefix 前缀，意为前面，即左空格式，suffix 后缀，意为后面，即右空格式。
这样，左边或右边留出空干什么？因为，很多时候我们要图文混排，而这种混排我们并不想让文字成为文本流。
这样，一般我们是三个DIV，图片用一个DIV专用一列。用这个方式就不需要了
prefix 左面有空以后，pull可以把你要的图拉到左边。只要对IMG的CLASS中加对应的pull。
suffix 右面有空以后，push可以把你要的图拉到右边。只要对IMG的CLASS中加对应的push。
这可都是一个DIV做出两列的布局！！
另外，我们有时，就是在知道宽度的情况下，要让某一些内容在某一行的左，中，右侧显示，那么，使用prefix ，suffix 就是不错的选择。
prefix suffix 与网格主类.span系列并列使用，实现居中，比如：span-14 prefix-5 suffix-5 last 一起用，这就是整行的居中。
当然，整行居中，也可以直接用：span-24 last center

网格有一个Border类，此类是在右边的边空的正中加一条线。因此，这样的网格，只有中间的分隔线。
如果各列都是等高的，直接用Border类做分隔线是一个不错的选择。
但如果出现左短右长时，将分隔线交给模块完成才是一个不错的选择。因为，你可以强制模块等高。
或者，手工定义一个扩展类，让其与右侧等高。

网格有还一个colborder，但用此类后，会给单元格加宽，因此，本来24单元格，就会不够使用。
这算是此框架中的一个不足之处，但未对这一点处理，却有一个很多的好处，那就是网格CSS相当简洁。这却又成了它的优势。

其它：
如果使用jquery-ui,那么，所有界面组件不用再定义。
唯一要设计的，就是模块，还有各种需要美化的list
官方网站：http://bluetrip.org/

 

 

评论

1 楼 pairan1 2012-03-22