Amaze uI / Bootstrap

关键点：栅格布局、响应式布局

Bootstrap:

 http://getbootstrap.com/

http://www.runoob.com/bootstrap/bootstrap-css-overview.html

Amaze uI:

 http://amazeui.org/getting-started

一、Bootstrap：

Bootstrap 的优点很明显，包含丰富的Web组件，可定制自己的框架代码等。但这款产品产品在国内也有几个水土不服，比如对中文的支持不够友好，对国内高占有率浏览器，比如搜狗、360的支持不够全面。

Bootstrap的核心就是基于Less框架构建的CSS。所以谈到Bootstrap，就必须得说说Less。

关于Less

Less是一个动态CSS语言框架，Less扩展了CSS的动态特性，相对于传统的CSS，Less提供了更为强大的功能和灵活性。基于Less，我们可以在编写CSS时使用嵌入式申明、变量、混合模式、运算和颜色编辑功能函数等。简单来说就是Less可以让你像编程一样编写CSS，把程序存储在后缀为less的文件中，Less提供了框架将其编译为标准的css文件。举个简单的例子，如果你想为多个样式设置同一个颜色，可以这样写：

@ color :  #FFFFFF ;
h 1  {
color : @color;
}
# sub {
color : @color;
}

编译后的css就是：

h 1  {
  color :  #ffffff ;
}
# sub  {
  color :  #ffffff ;
}

以上代码只是Less的最简应用。除了变量，还可以在CSS进行数学运算、传参、文件相互引用、规则嵌套等等。可以想象，这种编写CSS的方式会为前端开发带来多大的改变。无论是从灵活性、扩展性和可维护性上，Less都让CSS开发有了大幅提升，动态性增强了。

Less的官方网站是http://lesscss.org/，很奇怪这样的网站会被我党封掉，需要FQ才能访问。

编译Less的方式很简单，有两种方式，一种是在使用时编译。下载less.js，在样式中引用：

<link rel="stylesheet/less" type="text/css" href="less/mystyles.less">

<script src="js/less.js" type="text/javascript"></script>

注意要把样式文件放到js文件申明的前面。

还有一种方式是使用前编译好，可以通过服务器端的Node.js进行编译，也可以到这个网站http://incident57.com/less/下载Less.app，提供了GUI方式编译less文件，目前只支持Mac OS X。

关于Less的使用，似乎需要写另一篇文章进行介绍，这里就不做更多的描述了。

基于Less编译的Bootstrap

使用了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构建的网站样例。

已经使用1.4的开发者也不用担心，Bootstrap专门提供了从1.4升级到2.0的手工向导可以参考。

功能集合 

Bootstrap2.0把现有框架进行了清晰的功能划分，主要分为框架（Scaffolding），基础CSS，构件库和jQuery插件库。

Scaffolding主要提供基于网格的各种布局，包括普通网格系统、嵌入式网格，固定布局、自适应布局，同时可以对网格和布局进行自定义。Bootstrap2.0提供了响应式设计，可以通过单个文件支持各种手持设备，自适应不同的设备和屏幕变化。

基础CSS包括各种排版样式（标题、段落、引用块、列表、内联标签等），代码展示方面提供了基于code标签的内嵌代码，基于pre的块代码和基于Google Prettify的代码样式。同时提供各种表格、表单、按钮、图标的展示方式。

构件库提供了基于按钮、导航、标签、排版、警告、进度栏、图像网格等控件。

jQuery插件库则提供了十几种插件实现动态效果，例如Modal、Dropdown、Tab、Tooltip、Popover、Carousel等，开发者可以根据自己的业务需求使用不同的插件实现各种动态效果。

重点：栅格化布局

 //居中

<div class="container"> 

 //栅格化布局的关键

<div class="row"> 

   <div class="col-sm-9"></div>

  <div class="col-sm-3"></div>

</div>

//页面较小时显示

<p class="pull-right visible-xs">

  <button class="btn-xs btn btn-primary" >Toggle</button>

</p>

二、 Amaze uI

1． Amaze UI  以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。

2． Amaze UI 含近 20 个 CSS 组件、10 个 JS 组件，更有 17 款包含近 60 个主题的 Widgets，可快速构建界面出色、体验优秀的跨屏页面，大幅度提升你的开发效率。

3． 相比国外的前端框架，Amaze UI 专注解决中文排版优化问题，根据操作系统调整字体，实现最佳中文排版效果；针对国内主流浏览器及 App 内置浏览器提供更好的兼容性支持，为你节省大量兼容性调试时间。

4． Amaze UI 非常注重性能，基于轻量的 Zepto.js 开发，并使用 CSS3 来做动画交互，平滑、高效，更适合移动设备，让你的 Web 应用可以高速载入。