• Flat UI简介


    Flat UI简介

     一、简介

    Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架,他提供了动感、时尚的风格色调搭配,简洁、炫丽的功能组件,同时还提供了更为平滑的js交互动画,可以称得上前端扁平化设计框架的优秀代表之一

    二、如何评价Bootstrap和Flat UI

    先来说Bootstrap吧。Bootstrap是基于HTML5和CSS3开发的,对于非前端人员来说可以非常方便的构建一个漂亮的网站界面。但是纵观所有基于Bootstrap
    构建的网站,你会发现所有的网站风格都差不太多。我们可以通过(Bootstrap优站精选)来看一些它的网站实例。


    总得来说,Bootstrap是我们这些非前端程序员一个非常称手的前端工具。我曾经用过Bootstrap为客户开发过一套考试平台界面,当时我的手头没有找到合适的美工来帮助我。当时我利用一天的时间去看它的文档,然后就投入到我的应用中。我没有特别深入的去研究它,因为我的理念是够用就OK。


    我的评价是:简单,方便,非前端程序员的好帮手。


    再说来说说Flat UI,“Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。在此强烈推荐!”这是Bootstrap官方对Flat UI定义。Flat UI它有自已的一套CSS,JS,图标,字体等等一些素材。Flat UI可以做出扁平化站点的风格,因为前几年扁平化风格很火。我对Flat UI不作评价,因为没用过。


    最后说一下,我认为如果把Bootstrap研究的通一点的话,自已也可以基于Bootstrap开一个自已风格的样式。

    三、开始文档

    下载链接: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.
  • 相关阅读:
    程序员都遇到过哪些误解?
    云原生系列5 容器化日志之EFK
    云原生系列4 批量定时更新本地代码库
    云原生系列3 pod核心字段
    云原生系列2 部署你的第一个k8s应用
    云原生系列1 pod基础
    项目总结二:使用分布式存储读写分离功能应要注意的问题
    项目总结一:HttpClient DelegatingHandler管道扩展 生命周期问题
    Java 反编译工具的使用与对比分析
    如何使用 Github Actions 自动抓取每日必应壁纸?
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8939090.html
Copyright © 2020-2023  润新知