发布于 2015-01-08 10:02:07 | 625 次阅读 | 评论: 0 | 来源: PHPERZ

这里有新鲜出炉的Bootstrap v3教程,程序狗速度看过来!

Bootstrap Web前端CSS框架

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。


今天在在群里聊天的时候看到一只程序员发了一张用Bootstrap做的界面,感觉挺好看,然后去官网看了下组件,发现都挺漂亮的,然后看到了路径导航栏,刚好要做这个东西,然后就下了Bootstrap的源码看了看。

一,源码文件简介

下载完源码之后,我们肯定是想着先把源码中的Demo先运行下看看,但是,看着这么多英文的东西还是很迷茫,所以,从整体上熟悉下都有什么东西还是很有必要的。

将下载的文件解压之后就可以看到如下的文件结构:

这就是Bootstrap的基本结构:编译后的文件可以快速应用于任何web项目。我们提供了编译版的css和js文件(bootstrap.*),也同时提供了编译并压缩之后的css和js文件(bootstrap.min.*)。图片文件是使用imageOptim工具进行压缩的。这个工具是Mac 平台上用于压缩PNG文件的一个app。

请注意,所有的javascript插件都依赖jquery库。

二,如何引入的问题

现在很多UI框架都是基于Jquery的,所以,在使用之前,如果需要,一定要先引入jquery文件,然后是框架的JS文件,css文件等,之前用过EasyUI,相比EasyUI的使用,bootstrap还是挺简单的,只需简单引入三个文件就好了。

三,路径导航栏示例

因为只是为了使用路径导航栏这一个控件,所以,为了脱离Bootstrap的使用环境,我需要把路径导航栏这个控件的CSS和JS文件抽出来,我们在整体的CSS和JS的文件夹中:

找到图中两个文件,然后烤出使用到的样式段,因为做的这个路径导航栏只用到了CSS文件,所以,我们只需抽出用到的这段CSS文件,把它单独拿出来,放到我们系统的CSS元件库就ok了。

四,效果预览



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务