下載鏈接：http://www.bootcss.com/p/flat-ui/ 一、什麼是Flat UI？ Flat UI 是一種漂亮的Boostrap主題。我們重新設計了它的很多組件，使得其看起來扁平化。 其中的大部分組件，都是用起來很簡單的。但是，為了確保其中一些組件外觀和我們想要的一樣，我們最終 ...
下載鏈接：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.
四、附加
（暫未翻譯）
External dependencies are managed quickly and easily with Bower. Simply:
- Add a dependency to
bower.json. - Run
bower install. - Add references within your HTML, and you are all set.
Note: If required, run npm install -g bower first to install bower.
Development is quick and easy thanks to Grunt. Simply:
- Run
gruntto build the project with your updates included, or - Run
grunt serverto build the project, watch for changes, and provide a local server with source maps and live reload as you hack away.
Note: If required, run npm install first to install grunt with grunt packages.
