Bootstrap1、Flat UI Getting started(文档翻译)

生充斥链接: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/目录中),然后编辑所有的标记。

Bootstrap 1

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.

相关文章