一、

<!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. C++学习一二

    为了更深入的学习程序编写,以及进行相关算法的编写.决定每天花点时间学习C++:以下是每天的学习笔记. 一.std代表命名空间,可以用using来省略. 二.std:endl.输出一个换行符,并且“刷新 ...

  2. matplotlib画图——条形图

    一.单条 import numpy as np import matplotlib.pyplot as plt N = 5 y1 = [20, 10, 30, 25, 15] y2 = [15, 14 ...

  3. learning webrtc 使用node.js

    第二章 有使用node.js创建静态服务器的步骤 不过不够详细 下面以Windows为例 1.到官方网站下载安装包 然后安装 2.用管理员权限启动命令行 3.命令行窗口执行npm config set ...

  4. 使用foreach进行批量更新

    public void addEmps(@Param("emps")List<Employee> emps); 2映射文件配置 <!-- 批量保存 --> ...

  5. 【mysql】一对一关系的理解，以及Navicat Premium怎么设置字段的唯一性（UNIQUE）？

    背景:一对一关系设计方法: 设计2张表:customer表,student表 学生表中通过字段customer_id与customer表产生关系. student表中的customer_id与cust ...

  6. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_3 mybatis连接池的分类

    2.mybatis中的连接池     mybatis连接池提供了3种方式的配置:         配置的位置:             主配置文件SqlMapConfig.xml中的dataSourc ...

  7. Java ——补充：构造方法 super()与构造方法 无参 有参构造方法 this()与构造方法

    参考文章: https://blog.csdn.net/qq_33322074/article/details/86030836 https://blog.csdn.net/HD243608836/a ...

  8. 【ABAP系列】SAP ABAP 取两个内表的交集 比较两个内表的不同

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 取两个内表的交 ...

  9. LeetCode.867-转置矩阵（Transpose Matrix）

    这是悦乐书的第332次更新,第356篇原创 01看题和准备 今天介绍的是LeetCode算法题中Easy级别的第202题(顺位题号是867).给定矩阵A,返回A的转置. 矩阵的转置是在其主对角线上翻转 ...

  10. Discrete Mathematics and Its Applications | 1 CHAPTER The Foundations: Logic and Proofs | 1.2 Applications of Propositional Logic

    Translating English Sentences System Specifications Boolean Searches Logic Puzzles Logic Circuits