1、Framework7
2024-08-31 23:28:38
一、
<!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>
最新文章
- react-native-vector-icons的简单使用,图片,按钮,标签视图,导航条
- JS--轻松设置获取表单数据
- Javascript数组学习
- bzoj1057: [ZJOI2007]棋盘制作--最大子矩阵
- JS学习之路
- iOS 使用Block进行逆传值
- php框架laravel：数据库建立：artisan
- 将pdf文件通过itunes直接拖到ipad的ibooks里面
- 使用ssh协议挂载远程文件目录
- Eclipse中文语言包下载
- AS3: Socket 数据包 收 发
- Android开发技巧——实现底部图标文字的导航栏（已更新）
- 《java入门第一季》之类String类小案例
- 5.JAVA-内部类实例
- Hi3519V101+IMX274开发板调试经验
- 【设计经验】1、Verilog中如何规范的处理inout信号
- c# 导出表格 api
- Java 生成三位随机数
- VSCode代码修改后跑起来没反应，打开本地文件，代码没变化
- Winform 多线程--解决界面卡死问题