移动端框架—OnsenUI

1简介

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

2使用方法及注意事项

①引入相关CSS、JS 文件

原生/JQuery框架
   
   
   

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-**,按钮 
或者使用CSS写法 按钮
vue中标签写法略有区别 v-ons-**  按钮
同大部分UI框架一样，也可以给标签添加不同的class控制同一种标签的不同风格

3常用标签(类)

按钮ons-input,
输入框ons-button,
导航栏ons-navbar,
底部导航栏ons-toolbar,
tab切换 ons-tabbar,ons-tab
列表 ons-list,ons-list-item,ons-list-header; list-item__thumbnail,list-item__title,list-item__subtitle(Class)
卡片 ons-card
网格布局 ons-row，ons-col，
弹框 ons-dialog,ons-modal,ons-popover