1Flat UI Getting started（文档翻译）

Posted 2020-08-23

下载链接：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:

1. Add a dependency to bower.json.
2. Run bower install.
3. 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 grunt to build the project with your updates included, or
• Run grunt server to 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.