一、

<!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. [CSP-S模拟测试]:彩球问题（记忆化搜索）

    题目传送门(内部题91) 输入格式 第一行一个正整数$N$,表示颜色种类数. 第二行$N$个正整数$k[i],k[i]$表示第$i$种颜色的数量$(1\leqslant k[i]\leqslant 3 ...

  2. git强行覆盖master分支

    目录 我遇到的场景 需要注意的预备操作 操作步骤 我遇到的场景 1.master分支只为护较早的版本 2.由于业务不稳定,新业务和功能都在dev 分支上,dev的开发周期很长,一直变更迭代 3.从de ...

  3. visudo编辑sudoers

    [root@b ~ ]# visudo   #编辑配置文件 相当于vim /etc/sudoers文件 root用户名(谁) ALL任何主机(哪里)=(ALL) 以什么身份(可以切换到所有用户下) a ...

  4. HTML和JS完成页面点击四个角弹出管理页面

    实现方法1: HTML代码: <div class="top-left-corner"></div> <div class="top-rig ...

  5. 简要介绍一下MD5加密的书写

    大家应该多清楚数据的重要性,可以假设一下:一个非常大的企业,因为一个程序员的疏忽大意,没有使用MD5加密,那么可以说这个企业的数据库是非常不安全的,可以轻而易举的的访问你的数据库,并执行任何操作. 下 ...

  6. symbol,iterator,generator

    1.symbol是在ES6中引入的一种基本数据类型,因为symbol是不重复.唯一的数据特性,symbol设计是被用来表示对象内部的私有属性的.     symbol.for与symbol.keyfo ...

  7. 移动端自动化==>什么是Appium

    转自:http://www.imdsx.cn/ 手机App分为两大类,原生App(Native App)和混合APP(Hybrid App) 原生App(Native App) 原生App实际就是我们 ...

  8. 跨 Appdomain 对象共享

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  9. 在GAE中用Python编写webapp进行Post数据采集

    #!/usr/bin/env python # -*- coding: cp936 -*- # # Copyright 2007 Google Inc. # # Licensed under the ...

  10. 【MM系列】SAP MRKO如何操作

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP MRKO如何操作   前言部 ...