Flat UI简介
Flat UI简介
一、简介
Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一
二、如何评价Bootstrap和Flat UI
先来说Bootstrap吧。Bootstrap是基于HTML5和CSS3开发的，对于非前端人员来说可以非常方便的构建一个漂亮的网站界面。但是纵观所有基于Bootstrap
构建的网站，你会发现所有的网站风格都差不太多。我们可以通过（Bootstrap优站精选）来看一些它的网站实例。
总得来说，Bootstrap是我们这些非前端程序员一个非常称手的前端工具。我曾经用过Bootstrap为客户开发过一套考试平台界面，当时我的手头没有找到合适的美工来帮助我。当时我利用一天的时间去看它的文档，然后就投入到我的应用中。我没有特别深入的去研究它，因为我的理念是够用就OK。
我的评价是：简单，方便，非前端程序员的好帮手。
再说来说说Flat UI，“Flat UI是基于Bootstrap做的Metro化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！”这是Bootstrap官方对Flat UI定义。Flat UI它有自已的一套CSS,JS,图标，字体等等一些素材。Flat UI可以做出扁平化站点的风格，因为前几年扁平化风格很火。我对Flat UI不作评价，因为没用过。
最后说一下，我认为如果把Bootstrap研究的通一点的话，自已也可以基于Bootstrap开一个自已风格的样式。
三、开始文档
下载链接：http://www.bootcss.com/p/flat-ui/
一、什么是Flat UI？
Flat UI 是一种漂亮的Boostrap主题。我们重新设计了它的很多组件，使得其看起来扁平化。
其中的大部分组件，都是用起来很简单的。但是，为了确保其中一些组件外观和我们想要的一样，我们最终使用了一些JS插件。这意味着，需要一点努力来将它们整合到你的项目中去。
二、如何使用Flat UI？
由于Flat UI是建立在Bootstrap上层的一个主题，你可以在你的Bootstrap3项目中使用它。我们没有修改任何一行Bootstrap代码，因此你能在正在开发的项目中安全地使用Flat UI（除非你自己砍掉了它的代码！）:)
我们为你提供了CSS和Less资源。
1.将flat-ui.css放入到你的工程文件夹中，并且在你的模板/html页面中包含它：
<link href="dist/css/flat-ui.css" rel="stylesheet">
使用CSS就是这样简单。
2.如果你想在你的项目中修改/扩展Flat UI，就用的上Less。它的搭建和Bootstrap类似，你不会发现太大的差异。
最简单的开始方法是使用我们的start-up模板（在/dist/folder目录下），所有的文件在其中已经被包含并可以使用（包含了JS插件，但没有初始化，你可在需要的时候初始化它们）。
三、文件结构
Flat UI具有以下结构：
flat-ui/
├── dist/
| ├── css/
| | ├── vendors/
│ | ├── flat-ui.css
│ | └── flat-ui.min.css
| ├── js/
| | ├── vendors/
│ | ├── flat-ui.js
│ | └── flat-ui.min.js
| ├── fonts/
| | ├── lato/
| | └── glyphicons/
| | ├── flat-ui-icons-regular.eot
| | ├── flat-ui-icons-regular.svg
| | ├── flat-ui-icons-regular.ttf
| | ├── flat-ui-icons-regular.woff
| | └── selection.json
| ├── img/
| └── index.html
├── docs/
| ├── examples/
| ├── components.html
| ├── getting-started.html
| └── template.html
├── fonts/
├── img/
├── js/
└── less/
├── mixins/
├── modules/
├── flat-ui.less
├── mixins.less
└── variables.less
让我们来遍历一下该列表。
dist/——编译过的Flat UI模板。如果你喜欢每一个模板，并且不想改变我们组件的外观，最好使用原版。这是使用Flat UI最简单的方式。
——组件实例和说明文档
fonts/——Lato和字体图标的本地版本。当整合它们到你的项目时，得确保正确地复制了所有的字体文件。你也许想改变/添加几个符号，如果是这样的话，打开IcoMoon进入selection.json（在/fonts/glyphicons/目录中），然后编辑所有的符号。
js/——我们已经努力尝试确保我们所有的组件看起来真正“扁平化”。为此我们得使用一些JS插件。它们中的大多数很出名的，但也有一些不是。最JS-ified的组件是表单组件（checkboxes, radios, switches, selects…），因为它们在所有浏览器中的风格不可能一样。参考docs/assets/js/application.js中的例子整合。
less/——是用来定位我们所有样式表（没有预处理）。
modules/ is where the components themselves are. mixins/ useful utilities. flat-ui.less links everything into one single bundle. mixins.less helps automate things. variables.less is where all the default variables are.
