一、

<!DOCTYPE html>

<html>

  <head>

    <!-- 所需的Meta标签-->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 应用标题 -->

    <title>My App</title>

    <!-- IOS主题样式 -->

    <link href="https://cdn.bootcss.com/framework7/1.7.1/css/framework7.ios.min.css" rel="stylesheet">

    <!-- IOS皮肤颜色样式 -->

    <link href="https://cdn.bootcss.com/framework7/1.7.1/css/framework7.ios.colors.min.css" rel="stylesheet">

    <!-- 自定义应用样式-->

    <link rel="stylesheet" href="path/to/my-app.css">

  </head>

  <body>

    <!-- 全屏幕模式的状态栏(PhoneGap) -->

    <div class="statusbar-overlay"></div>

    <!-- 视图-->

    <div class="views">

      <!-- 主视图，必须有 "view-main" 类名 -->

      <div class="view view-main">

        <!-- 顶部导航栏-->

        <div class="navbar">

          <div class="navbar-inner">

            <!-- 标题内元素如果需要移入移出的动画效果，添加"sliding"类，通常情况下，返回箭头无需添加动画，标题可以选择性添加，如不添加效果为淡入淡出。-->

            <div class="center sliding">标题</div>

          </div>

        </div>

        <!-- 页面的容器，因为我们使用固定的导航栏和工具栏，需要添加"navbar-through"、"toolbar-through"类-->

        <div class="pages navbar-through toolbar-through">

          <!-- 页面, "data-page"包含了页面名，属性值里不能带横线"-"。-->

          <div data-page="index" class="page">

            <!-- 滚动页面内容 -->

            <div class="page-content">

              <p>Page content goes here</p>

              <!-- 链接到其他页，这里需要注意的是，framework7里面的a标签经过了特殊处理，如果是链接到外部页面，下载文件，或触发JS函数等，需要添加“external”类，已脱离框架默认设置-->

              <a href="about.html">About app</a>

            </div>

          </div>

        </div>

        <!-- 底部工具栏-->

        <div class="toolbar">

          <div class="toolbar-inner">

            <!-- 工具栏链接 -->

            <a href="#" class="link">Link 1</a>

            <a href="#" class="link">Link 2</a>

          </div>

        </div>

      </div>

    </div>

    <!-- Path to Framework7 Library JS-->

    <script src="https://cdn.bootcss.com/framework7/5.0.0-beta.12/js/framework7.min.js"></script>

    <!-- Path to your app js-->

    <script type="text/javascript" src="path/to/my-app.js"></script>

  </body>

</html>

1、Framework7的更多相关文章

  1. 新思想、新技术、新架构——更好更快的开发现代ASP.NET应用程序

    在博客园学习很长时间了,今天终于自己也开通了博客,准备分享一些感悟和经验.首先感谢博客园园主提供了这么好的程序员学习交流平台,也非常感谢张善友.dax.net.netfocus.司徒正美 等技术大牛的 ...

  2. html5+ plus和phoneGap、cordova的比较

    偶遇大神言论,摘录 phonegap出的早,自然用的人多.phonegap自己的定位是混合开发hybrid,用原生+js:HBuilder的定位是纯js搞定一切.5+ 和 phonegap在能力.性能 ...

  3. 使用.NET进行高效率互联网敏捷开发的思考和探索【一、概述】

    不知从什么时候开始,创业变得很廉价,谈什么都是互联网,动辄融资千万.这阵风好像也刮向了程序员中,有那么一大批开发者,数据结构不好好学习.数据库原理不扎实掌握,在github上发布几个项目,用nodej ...

  4. 前端学习笔记——移动前端UI选择

    一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平台统一的接口来兼容不同的移动平台,其特性包括: 1．简 ...

  5. 移动前端UI选择

    移动前端UI选择 目录 三.SUI Mobile   一.jQuery Mobile jQuery Mobile 是jQuery在移动设备上的版本,做为主要针对移动设备的框架来说,它提供一个移动设备平 ...

  6. web前端学习路线和步骤

    H5+全栈工程师  (学习下列技术可以加QQ: 1416 7596 61)第一阶段:初级入门阶段基本功 1.HTML入门 Windows概述.浏览器概述.HTML简介.HTML标签详解.前端开发工具概 ...

  7. MUI体验框架

    1.      mui简介 1.1  缘起 1.基于jq的jqmobile,性能低的无法忍受,且UI难看 2.bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的 ...

  8. 移动Web UI库（H5框架）

    1.Framework7 Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile a ...

  9. 移动Web UI库（H5框架）有哪些，看这里就够了

    前言 今年上半年,项目组在项目开发的过程中建立了一套风格统一,组件丰富完善,命名统一规范的PC端UI库,适用于做大型站点,该UI库也是应用到了整个平台的项目中,在各个项目组中进行推广.因为项目的保密性 ...

随机推荐

  1. JavaScript DOM位置尺寸API

    我们需要了解几个基础概念,每个HTML元素都有下列属性 offsetWidth clientWidth scrollWidth offsetHeight clientHeight scrollHeig ...

  2. Canvas 实现钟表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Java 实现日期 Date 的赋值

    关键的语句也就三句话: (1) SimpleDateFormat dateformat = new SimpleDateFormat("yyyy-MM-dd"); (2) Date ...

  4. 关于Tomcat重启和关闭后重启session变化

    ,当页面第一次访问,session的attribute还未赋值,为null 当页面第二次访问时,这时当前的session的attribute有值了! 到了本文章的点题时刻!! 如果我是直接点击serv ...

  5. easyhook源码分析二——注入

    EasyHook 中的注入方法. 函数原型 // EasyHook 中的命名比较有意思,Rh 代表的就是Remote Hook,此函数就是远程钩子的一个子过程----注入,前面的宏代表它是导出函数. ...

  6. Flask- celery (芹菜)

    一.什么是Celery? 中文名翻译为芹菜,是flask中处理异步定时周期任务的第三方组件 二.基本结构 1.需要跑的任务代码app 2.用管道broker与用于存储任务(就是个缓存)  工具一般用r ...

  7. C语言指令数组名和数组名取地址

    以下C语言指令:int a[5] = {1, 3, 5, 7, 9}; int *p = (int *)(&a + 1); printf("%d, %d", *(a + 1 ...

  8. delphi 进程通讯之WM_COPYDATA 发送程序（SendData.exe） 可用

    http://www.delphitop.com/html/wangluo/1529.html delphi 进程通讯之WM_COPYDATA 发送程序(SendData.exe) 作者:admin ...

  9. Django 过滤器 、日期格式化、数学运算

    Django 的模板中的数学运算前言 django模板只提供了加法的filter,没有提供专门的乘法和除法运算:django提供了widthratio的tag用来计算比率,可以变相用于乘法和除法的计算 ...

  10. Scratch少儿编程系列：（九）音乐高级技巧

    一.程序说明 本程序用来演奏音乐,相对于“Scratch少儿编程系列:(八)演奏简单音乐”而言,本节介绍的方法适用于复杂点的音乐. 二.程序流程图 为了更直观的描述上述过程,采用流程图的方式将猜数字的 ...