1、Flat UI Getting started(文档翻译)
2016-12-17 11:45
393 查看
下载链接: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页面中包含它:
使用CSS就是这样简单。
2.如果你想在你的项目中修改/扩展Flat UI,就用的上Less。它的搭建和Bootstrap类似,你不会发现太大的差异。
最简单的开始方法是使用我们的start-up模板(在/dist/folder目录下),所有的文件在其中已经被包含并可以使用(包含了JS插件,但没有初始化,你可在需要的时候初始化它们)。
三、文件结构
Flat UI具有以下结构:
让我们来遍历一下该列表。
dist/——编译过的Flat UI模板。如果你喜欢每一个模板,并且不想改变我们组件的外观,最好使用原版。这是使用Flat UI最简单的方式。
——组件实例和说明文档
fonts/——Lato和字体图标的本地版本。当整合它们到你的项目时,得确保正确地复制了所有的字体文件。你也许想改变/添加几个符号,如果是这样的话,打开IcoMoon进入selection.json(在/fonts/glyphicons/目录中),然后编辑所有的符号。
![](https://images2015.cnblogs.com/blog/899412/201612/899412-20161217114522245-1626969620.jpg)
js/——我们已经努力尝试确保我们所有的组件看起来真正“扁平化”。为此我们得使用一些JS插件。它们中的大多数很出名的,但也有一些不是。最JS-ified的组件是表单组件(checkboxes, radios, switches, selects…),因为它们在所有浏览器中的风格不可能一样。参考docs/assets/js/application.js中的例子整合。
less/——是用来定位我们所有样式表(没有预处理)。
四、附加
(暂未翻译)
External dependencies are managed quickly and easily with Bower. Simply:
Add a dependency to
Run
Add references within your HTML, and you are all set.
Note: If required, run
Development is quick and easy thanks to Grunt. Simply:
Run
Run
Note: If required, run
一、什么是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/目录中),然后编辑所有的符号。
![](https://images2015.cnblogs.com/blog/899412/201612/899412-20161217114522245-1626969620.jpg)
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 bowerfirst 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 installfirst to install grunt with grunt packages.
相关文章推荐
- Unity3D说明文档翻译-UI
- UIApplicationShortcutItems 官方文档翻译
- android 在UI线程之外处理Bitmap - 开发文档翻译
- 翻译qmake文档(二) Getting Started
- [Unity官方文档翻译]Getting Started开始unity项目
- android 在你的UI中显示Bitmap - 开发文档翻译
- JNI官方文档翻译2-Getting Started
- 【DocFX文档翻译】DocFX 入门 (Getting Started with DocFX)
- jquery.ui中文文档翻译----draggable
- 【DocFX文档翻译】DocFX 入门 (Getting Started with DocFX)
- Boost Getting Started 安装文档(翻译1.33版本)
- android 在UI线程之外处理Bitmap - 开发文档翻译
- Displaying Bitmaps in Your UI在你的UI上展示Bitmaps(Android官方文档翻译——五)
- 基本控件文档-UISegment属性----iOS-Apple苹果官方文档翻译
- FmodEX 编程人门(转)-- Fmod文档中GETTING STARTED的翻译
- HBase 参考文档翻译之 Getting Started
- Android官方文档翻译 一 Getting Started
- Apple Watch 人机交互指南 界面元素 ---- Menu Icons (官方文档翻译)(UI设计层面)
- Processing Bitmaps Off the UI Thread不在UI线程中处理Bitmaps(Android官方翻译文档2)
- jquery.ui.draggable中文文档(原文翻译)