Bootstrap

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

文档章节
(1)脚手架:
全局性的样式文件,用于重置背景、链接样式、栅格系统等,并包含两个简单的布局结构。
(2)基本CSS样式:
常见的HTML元素 -- 如排版、代码、表格、表单、和按钮的样式。还包括 Glyphicons, 一个非常棒的图标集。
(3)组件:
常见界面组件 -- 如标签、pill、导航、警告、页面标题的基本样式,JavaScript插件
(4)JavaScript插件
和组件类似,这些Javascript插件用来实现提示(tooltip)、弹出框(popover)、模态对话框(modal)等具有交互性的组件。
(5)组件列表
组件库 和 JavaScript插件集 一同提供了以下组件元素:
按钮组
    按钮下拉菜单、用于导航的标签、pill、列表、导航条、 Labels、 Badges、Page headers and hero unit、缩略图、警告对话框、 进度条、模态对话框(Modals)、下拉菜单(Dropdowns)、Tooltips、Accordion、Popovers、Carousel、Typeahead
3、基本的HTML模版
现在, 这里展示一个典型的HTML文件:
<!DOCTYPE html>
    <html>
    <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
    <h1>Hello, world!</h1>
    <script src="http://code.jquery.com/jquery.js"></script>
    </body>
    </html>
使用了Less的Bootstrap具备如下优点:
1、Bootstrap实现起来依旧很简单,使用也很简单,把Bootstrap.css拖入你的代码即可。编译less文件可以用less.js,Less.app或Node.js等多种方案实现。
2、一旦编译,Bootstrap框架仅包含CSS文件,这意味着没有多余的图片、Flash或Javascript,只有用于Web应用开发的简洁而强大的CSS样式
兼容性:
目前Bootstrap的最新版本是2.0,支持几乎所有的主流浏览器,包括Safari、Chrome,Firefox、IE7.0及以上,最新版本还支持智能手机WebUI。
2.0的新特性:
Bootstrap的版本更新很快,2011年11月刚发布了1.4,2012年2月份就再次放出新版本2.0,而且有了大幅改进。
2.0版本采用了更灵活也更受欢迎的12栏网格布局,并以此来实现其各种布局框架。增加了响应式设计,以适
应各种移动终端的需求。
完善和改进原有样式库,并提供更丰富的新样式,包括样式繁多的图标(icon),漂亮易用的进度条等。
改进和增加了自定义jQuery插件,完善文档,修复bug,同时还提供了很多基于Bootstrap构建的网站样例。
Less CSS 是一个使用广泛的 CSS 预处理器,通过简单的语法和变量对 CSS 进行扩展,可减少很多 CSS 的代码量。LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js).
个人觉得Bootstrap 的网站简洁大方,很少用到图片,但是效果确实很炫(大家有没有注意到里面的小三角是纯css写的哦)。唯一的缺憾就Bootstrap里面也有很多html5和css3,而ie尤其是ie6对它支持太烂了。
关于less,关于一下嵌套,可以运算相对于css比较强大。除此之外我没有发现less特别强的地方。而且它需要依赖js。鉴于本人也是菜鸟,水平有限,在此仅举一些入门级例子和大家一起相互交流学习,感兴趣的童鞋可以自己研究一下哈。





你可能感兴趣的:(UI,XHTML)