一、

<!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. mysql 优化之索引的使用

    mysql 优化之索引的使用 1:MySQL 索引简介: MySQL索引的建立对于MySQL的高效运行是很重要的,索引可以大大提高MySQL的检索速度. 打个比方,如果合理的设计且使用索引的MySQL ...

  2. postman通过引入外部文件实现参数化

    postman可通过引入外部文件进行参数化 目录 1.准备好接口信息 2.设置 1.准备好接口信息 这里的usr和psw是要参数化的对象 2.设置 文件准备 添加文件,并设置好循环次数即可

  3. django.core.exceptions.AppRegistryNotReady: Models aren't loaded yet.的解决办法

    如题,这个错误的解决办法如下: 在代码文件的最上方添加以下代码: import os,django os.environ.setdefault("DJANGO_SETTINGS_MODULE ...

  4. Spring的应用上下文ApplicationContext

    HttpServletRequest request = ((ServletRequestAttributes) RequestContextHolder.getRequestAttributes() ...

  5. Django 实现分库

    网站后端的数据库随着业务的不断扩大,用户的累积,数据库的压力会逐渐增大.一种办法是优化使用方法,也就是的优化 SQL 语句啦,添加缓存以达到减少存取的目的:另外一种办法是修改使用架构,在数据库层面上「 ...

  6. Grass Planting

    大致题意: 维护一棵树,支持两种操作: P x y x到y路径上的每条边的值+1:Q x y 询问x到y路径上所有边的值的和.Input第一行两个正整数,N,M表示点数和操作数:接下来N-1行每行两个 ...

  7. 卷积神经网络应用于MNIST数据集分类

    先贴代码 import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_data mnist = inpu ...

  8. Hive-生成一个大文件（小文件合并）

    set hive.execution.engine=mr; --在 map-reduce 作业结束时合并小文件.如启用,将创建 map-only 作业以合并目标表/分区中的文件. set hive.m ...

  9. Centos7 搭建pptp服务器

    1.检查是否支持pptp 返回ok即表示支持 modprobe ppp-compress-18 && echo ok 2.安装ppp yum install -y ppp 3.安装pp ...

  10. iview报错[Vue warn]: Error in render: "TypeError: ctx.injections.tableRoot.$scopedSlots[ctx.props.column.slot] is not a function"

    原因是我使用了iview的<Table>组件,我给Table组件的columns中定义了4个含有slot的列,但是实际在<Table>中只使用了其中3个,导致的报错. 也就是说 ...