一、

<!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. sqli-libs(7)

    导出文件GET字符型注入 0x01介绍 导出到文件就是可以将查询结果导出到一个文件中,如常见的将一句话木马导出到一个php文件中,sqlmap中也有导出一句话和一个文件上传的页面 常用的语句是:  s ...

  2. 安装mariadb报错： Job for mariadb.service failed because the control process exited with error code. See "systemctl status mariadb.service" and "journalctl -xe" for details.

    卸载和删除都使用过了,没有起到效果,然后用了如下的方案,进行解决: CentOS 从 Yum 源安装配置 Mariadb 2017.03.01 WangYan 学习笔记  热度 7℃ 一.安装 Mar ...

  3. leetcode-easy-array-66 .plus one

    mycode 主要在计算商和余数的时候一定要用还没更新的商和余数哦 class Solution(object): def plusOne(self, digits): ""&qu ...

  4. node_modules .bin文件夹下的文件

    node_modues/.bin文件夹下,对于一个npm包,有两个可执行文件,没有后缀名的是是对应unix系的shell脚本,.cmd文件对应的是windows bat脚本,内容都是用node执行一个 ...

  5. k8s集群上线web静态网站

    环境准备 一台部署节点,一台master节点,还有两台节点node1,node2 完好的k8s集群环境 思路1: 在node1和node2节点上通过宿主机与容器之间目录映射和端口映射上线静态网站(或动 ...

  6. 查看dll中的函数（方法）

    https://jingyan.baidu.com/article/5553fa82b953b365a23934b7.html 查看dll中的函数(方法) 听语音 | 浏览:2004 | 更新:201 ...

  7. 【Spring】---属性注入

    一.Spring注入属性(有参构造和[set方法]) 注意:在Spring框架中只支持set方法.有参构造方法这两种方法. 使用有参数构造方法注入属性(用的不多,但需要知道): 实体类 package ...

  8. 【Spring】---【IOC】

    Spring 2017-08-15 08:25:57 [IOC] 分享几篇好文 谈谈对Spring IOC的理解 Spring的IOC原理(转载) java框架篇---spring IOC 实现原理 ...

  9. flutter 处理dialog点击事件回调

    flutter 处理dialog点击事件回调 import 'package:flutter/material.dart'; import 'package:scoped_model/scoped_m ...

  10. java基础/数据加解密(Mooc)

    一.消息摘要算法 常用摘要算法: 以下 (HEX)内容:bc指Bouncy Castle  |  cc指:Apache commons Codec 1.消息摘要算法MD5及MD族(MD2,MD4) 消 ...