flat ui 教程

来源：福州天琥设计培训学校时间：2022/7/1 18:28:32

　　Flat UI 是一套基于 Twitter Bootstrap 实现的精美的扁平风格 UI 组件包，该组件包中既包含了UI常用组件库，还包含一些自实现的复杂的 UI 部件，例如：开关按钮、滑块等等。

　　Flat UI提供了常用的UI组件，如：按钮(Button), 菜单(Menu)，开关(Switcher), 输入组件(Input)等。Flat UI主色调10种，按深浅色差分共20种，方便开发者构建时尚、鲜艳的网站风格。Flat UI提供一些常用操作图标，很容易集成并应用与项目。

　　flat ui 教程

　　flat ui 教程，Git clone下来的Flat-UI 包含了以下一些重要东西：

　　bower.json

　　这个是bower要用到的依赖声明文件，可以看到里面依赖了jQuery，bower会自动下载指定版本的jQuery到bower_components目录之下，以备后用。全局安装bower：npm install -g bower，新项目也可以用bower init来生成。

　　package.json

　　工程说明文件，包括工程名，作者，版本，Grunt依赖包等一些信息。如果一个新的项目，可以用grunt init打开一个向导一步一步填写。

　　Gruntfile.js

　　这个是Grunt执行脚本，会从上面的文件中读取值，里面定义了一些处理事件，比如清理之前构建，测试，压缩CSS，JS，生成文档，复制等等，甚至可以起一个静态服务器来调试。无比强大，类似于Maven pom文件。

　　以上文件在Flat-UI工程目录中基本上不用修改，只需要在当前目录下执行bower install 下载依赖js包，grunt install 下载grunt工具，再执行grunt dist 就能在dist/目录下获得新的可发布版本了，将该目录文件复制到web工程中引用就好了。

　　关于less目录就包含了Flat-UI 所有CSS配置地方，主要修改的就是这里了，比如改变导航背景颜色等等。其中按模块归类的非常好，一眼就能看出该修改哪里，variables.less 定义了所用到的颜色，全局样式，排版，小图标，表格等等。修改起来非常容易，尤其还有一些联动的取色，通过一个基准色，计算出偏亮或者偏暗值，而不需要一个一个去查色板。修改完后只需要grunt dist 就能生成好CSS。

　　flat ui colors

　　扁平化设计并不局限于某种色彩基调，它可以使用任何色彩。但是大多数的设计师都倾向于使用大胆鲜艳的颜色。那么，如何让扁平化设计在色彩上与众不同呢?

　　设计师正在不断地增加色彩层次，将原本的一两个层次层加到三个、四个甚至更多。这些色彩的亮度和饱和度大都非常高。在进行扁平化设计时，传统的色彩法则就不适用了，转而以彩虹色这种流行色来进行配色。扁平化设计一般都有特定的设计法则，比如利用纯色，采用复古风格或是同类色。但并不是说这是罕有的的选择，而是这种方式已经成为一种流行的趋势，也更加受大家欢迎。

　　提到扁平化设计的色彩，纯色一定首当其冲地出现在我们脑海里，因为它带来了一种独特的感受。纯粹的亮色往往能够与明亮的或者灰暗的背景形成对比，以达到一种极富冲击力的视觉效果。所以说，在进行扁平化设计时，纯色是备受欢迎的色彩趋势。

　　FlatUIColors.com将扁平化设计中备受欢迎的色彩进行了一个整理，从宝蓝和草绿到明黄和橘黄色，这些色彩概括出了我们现在能够看到的色彩趋势。这个网站将是进行扁平化设计的步，因为你能够0元下载任何你看中的色彩。在扁平化设计中，三原色是很少见的，即正红、正蓝和正黄。简单起见，在一个扁平化设计方案中，如果你想的配色，那就选择相似的色调和饱和度。

　　flat ui pro

　　Flat UI Pro is Designmodo出品，适用于Twitter Bootstrap，含有去全套的PSD文件以方便定制。完全响应式设计。

　　Flat-UI 是一款基于Bootstrap扁平风格的UI工具包，个人觉得风格比较美观，简洁，控件齐全，加之扁平化趋势，故用在了花图影铺项目中。有0元版和Pro版($39)可供选择，Pro版多了PSD原件，也用不到，选择0元就可以。

尊重原创文章，转载请注明出处与链接：http://www.peixun360.com/2384/news/543053/违者必究！ 以上就是福州天琥设计培训学校 小编为您整理 flat ui 教程的全部内容。