移动端主流的css框架

html-css047

移动端主流的css框架,第1张

1、bootstrap: http://www.bootcss.com/ 响应式布局

jquery weui https://jqweui.cn/components#form

jquery weui开发经验总结

2、css3 动画

http://www.haorooms.com/uploads/example/Animatecss/

更多框架

http://nec.netease.com/framework

3、icon字体

http://fontawesome.io/

http://www.iconfont.cn/

4、css的 SASS 和Less框架

vonic 框架

https://wangdahoo.github.io/vonic/docs/#/

精致的 CSS UI 框架：

1、Bootstrap – 最流行的Web前端UI框架

2、jQuery UI - 基于jQuery的开源Javascript框架

3、jQuery UI Bootstrap

4、BootMetro - Metro风格的CSS框架

5、Flat UI - 扁平风格 UI 工具包

6、网易CSS框架 NEC

7、Alloy UI – 功能强大的CSS UI框架

8、Cardinal – 移动端的CSS UI框架

9、快速开发CSS的框架 CSScaffold

10、后台UI开发框架 MuseUI

一个专为移动应用程序设计的UI框架，带有丰富UI组件、遵循原生iOS和Android设计标准，即时实现功能、免费使用，在iOS和Android呈现不同的风格。

①引入相关CSS、JS 文件

原生/JQuery框架

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">

    <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">

    <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>

vue框架

  安装插件包

    npm install onsenui vue-onsenui

  main.js中引入

    import 'onsenui/css/onsenui.css'

    import 'onsenui/css/onsen-css-components.css'

    import Vue from 'vue'

    import VueOnsen from 'vue-onsenui'

    Vue.use(VueOnsen)

②html 结构中使用相关组件，格式为ons-**,<ons-button>按钮</ons-button>  <ons-navigator></ons-navigator><ons-input></ons-input>

或者使用CSS写法 <button class="button">按钮</button><input type="text" class="text-input" placeholder="请输入">

vue中标签写法略有区别 v-ons-**  <v-ons-button @click="clickFun">按钮</v-ons-button>

同大部分UI框架一样，也可以给标签添加不同的class控制同一种标签的不同风格

按钮ons-input,

输入框ons-button,

导航栏ons-navbar,

底部导航栏ons-toolbar,

tab切换 ons-tabbar,ons-tab

列表 ons-list,ons-list-item,ons-list-headerlist-item__thumbnail,list-item__title,list-item__subtitle(Class)

卡片 ons-card

网格布局 ons-row，ons-col，

弹框 ons-dialog,ons-modal,ons-popover