Framework7学习笔记之App基本布局

一：App基本布局

用Framework7搭建的app，一般在index.html中引入所需的样式文件与js文件，并且搭建起整体的基本视图框架。

二：跨平台、通用型布局

<!DOCTYPE html>
<html>
  <head>

    <!--1:4个meta标签，指定编码格式、界面宽高、app性质、状态栏颜色等参数-->
    <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, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- Color theme for statusbar -->
    <meta name="theme-color" content="#2196f3">

    <!-- 2:App标题 -->
    <title>应用标题</title>

    <!-- 3:引入Framework7样式文件 -->
    <link rel="stylesheet" href="path/to/framework7.min.css">

    <!-- 4:引入自己定义的样式文件-->
    <link rel="stylesheet" href="path/to/my-app.css">

  </head>

  <body>
    <!-- 5:app根元素 -->
    <div id="app">
      <!-- 6:创建app状态栏 -->
      <div class="statusbar"></div>

      <!-- 7:app的主视图，之后app的各个页面文件都加载到这个view中进行展示 -->
      <div class="view view-main">

        <!--1）定义一个页面（该div标签对包含页面定义内容） -->
        <div data-name="页面名称" class="page">
          <!-- 2）顶部导航栏 -->
          <div class="navbar">
            <div class="navbar-inner">
              <div class="title">页面标题</div>
            </div>
          </div>

          <!-- 3）底部工具栏 -->
          <div class="toolbar">
            <div class="toolbar-inner">
              <!--底部工具栏选项（控制跳转）-->
              <a href="#" class="link"></a>
              <a href="#" class="link"></a>
            </div>
          </div>

          <!-- 4）页面内容 -->
          <div class="page-content">
            ....
          </div>
        </div>
      </div>
    </div>

    <!--8:引入Framework7的JS文件-->
    <script type="text/javascript" src="path/to/framework7.min.js"></script>
    <!--9:引入自定义的JS文件-->
    <script type="text/javascript" src="path/to/my-app.js"></script>

  </body>
</html>

三：IOS主题的App布局文件

<!DOCTYPE html>
<html>
  <head>
    <!-- 1: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">

    <!-- 2:应用标题-->
    <title>My App</title>

    <!-- 3:引入IOS样式文件 -->
    <link rel="stylesheet" href="path/to/framework7.ios.min.css">
    <link rel="stylesheet" href="path/to/framework7.ios.colors.min.css">

    <!-- 4:引入自定义样式文件-->
    <link rel="stylesheet" href="path/to/my-app.css">

  </head>

  <body>
    <!-- 5:app状态栏 -->
    <div class="statusbar-overlay"></div>

    <!--6:创建视图 -->
    <div class="views">
      <!-- 7:App主视图 -->
      <div class="view view-main">
        <!-- 8:导航栏-->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center sliding">导航栏标题</div>
          </div>
        </div>
        <!--9:定义页面-->
        <div class="pages navbar-through toolbar-through">
          <!-- 1）页面名称 -->
          <div data-page="名称" class="page">
            <!-- 2）页面内容 -->
            <div class="page-content">
              ...
            </div>
          </div>
        </div>

        <!-- 10:底部工具栏-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- 工具栏选项卡-->
            <a href="跳转的page文件" class="link">选项1</a>
            <a href="跳转的page文件" class="link">选项2</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 11:引入Framework7的js文件-->
    <script type="text/javascript" src="path/to/framework7.min.js"></script>
    <!-- 12:引入自定义的样式文件-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

四：Android Material样式主题

<!DOCTYPE html>
<html>
  <head>
    <!-- 1: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">

    <!-- 2:应用标题-->
    <title>My App</title>

    <!-- 3:引入IOS样式文件 -->
    <link rel="stylesheet" href="path/to/framework7.material.min.css">
    <link rel="stylesheet" href="path/to/framework7.material.colors.min.css">

    <!-- 4:引入自定义样式文件-->
    <link rel="stylesheet" href="path/to/my-app.css">

  </head>

  <body>
    <!-- 5:app状态栏 -->
    <div class="statusbar-overlay"></div>

    <!--6:创建视图 -->
    <div class="views">
      <!-- 7:App主视图 -->
      <div class="view view-main">
        <!-- 8:导航栏-->
        <div class="navbar">
          <div class="navbar-inner">
            <div class="center sliding">导航栏标题</div>
          </div>
        </div>
        <!--9:定义页面-->
        <div class="pages navbar-through toolbar-through">
          <!-- 1）页面名称 -->
          <div data-page="名称" class="page">
            <!-- 2）页面内容 -->
            <div class="page-content">
              ...
            </div>
          </div>
        </div>

        <!-- 10:底部工具栏-->
        <div class="toolbar">
          <div class="toolbar-inner">
            <!-- 工具栏选项卡-->
            <a href="跳转的page文件" class="link">选项1</a>
            <a href="跳转的page文件" class="link">选项2</a>
          </div>
        </div>
      </div>
    </div>

    <!-- 11:引入Framework7的js文件-->
    <script type="text/javascript" src="path/to/framework7.min.js"></script>
    <!-- 12:引入自定义的样式文件-->
    <script type="text/javascript" src="path/to/my-app.js"></script>
  </body>
</html>

原文地址：https://www.cnblogs.com/ygj0930/p/8440777.html

时间： 2024-10-05 22:07:37

Framework7学习笔记之App基本布局的相关文章

WPF学习笔记系列之一 （布局详情）

布局:StackPanel  栈布局:控件不会拐弯且多出的不再显示.DockPanel   停靠布局 吸在上边下边或左右.WrapPanel    环绕布局   一行控件会拐弯Canvas  进行基于坐标的布局 Grid中若不指定Grid.Row属性及Grid.Column则默认为:0行,0列.RowDefinitions ColumnDefinitions ShowGridLines=true <ColumnDefinition Width="100"></Colu

学习笔记：APP切图那点事儿–详细介绍android和ios平台

学习笔记:APP切图那点事儿–详细介绍android和ios平台 转载自:http://www.woofeng.cn/articles/168.html   版权归原作者所有 作者:亚茹有李 原文地址:http://blog.boocss.com/app-android-ios/ 一.android版 在做android版本设计的时候,尺寸有很多种,这时我们要以一种尺寸为基准,那这个基准尺寸是480px*800px,设计图完成之后就开始切图了 需要注意的: A:android主要有3种屏,即:

Android学习笔记（九）——布局和控件的自定义

//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! View是 Android中一种最基本的 UI组件,它可以在屏幕上绘制一块矩形区域,并能响应这块区域的各种事件,因此,我们使用的各种控件其实就是在 View的基础之上又添加了各自特有的功能.而ViewGroup 则是一种特殊的 View,它可以包含很多的子 View和子 ViewGroup,是一个用于放置控件和布局的容器.系统默认的所有控件都是直接或间接继承自 View 的,所用的所有布局都是直接或间接继承自 Vie

Framework7学习笔记之Page的定义与Page初始化

一:Page 一个page文件定义了一个app页面,它可以定义该页面的导航栏.底部工具栏.中间详细内容等等.  page通过加载到view容器中运行,而view在index.html中定义. index.html定义了app的基本结构:引入样式文件.引入js文件.创建app标签.创建view标签. 因此,page的定义文件 XX.html 不需要在定义head.body等等部分,只需要使用 div 搭建出页面的 状态栏.侧边栏.页面内容(导航栏.主体部分.底部工具栏).(不是每部分都要有,按需搭

Framework7学习笔记之初始化App

一:初始化应用对象 我们想要在js文件中操作app,就需要初始化一个app对象来存储应用本身. 在初始化app时,还可以传递一些参数,对app进行一些个性化定制,如:主题.缓存设置.工具栏.导航栏.通知栏等等对app整体的特性设置. 二:格式实例 var app = new Framework7({ // App root element root: '#app', // App Name name: 'My App', // App id id: 'com.myapp.test', // En

Framework7学习笔记之导航栏与工具栏的布局类型

一:布局类型 导航栏.工具栏 有多种布局类型,他们分别有不同的表现效果,主要有:静态布局.固定布局.穿透布局. 二:静态布局(少用) 静态布局的导航栏.工具栏,是写死在页面文件中的,每个页面都有它自己的导航栏和工具栏. 原文地址:https://www.cnblogs.com/ygj0930/p/8455093.html

Framework7学习笔记之 栅格布局/网格布局

一:栅格布局 我们可以使用 行.列 的形式来排布界面上的div,这就是网格化布局. 栅格布局只需要:用一个row类div来组织一个行:行中各个元素用col-XX指定占据行宽百分比. 行中各个单元格默认有15px间距,要取消间距的话只需在row类div处增加no-gutter类(新版中用 no-gap类)即可. <!--普通行--> <div class="row"> <div class="col-33">33%</div&

Ionic学习笔记3_ionic指令简单布局

1)   添加引用类库(ionic样式和ionic js文件) 2)   标题栏,页脚栏,内容区 3)   Js引入ionic类库,添加页面操作方法和对象 4)   数据初始化 5)   Html页面绑定方法和对象 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport"

Visual C++学习笔记2：对话框布局操作

Visual C++的学习之路到了第2站,跳过了类和对象等基本概念,直接到了对话框布局操作,个人认为这是特别实用的知识点.虽然说不看这章,自个儿摸索着也能搞明白大致的操作流程,但是书上操作上的小技巧,可以让你以后开发事半功倍. 1.向对话框添加控件.//选中一个控件,按住Ctrl拖动,可以快速复制出一个控件.选中一个控件,按住shift+方向键,可以微调控件大小. 2.调整控件TAB键顺序.//可以调整控件的显示层次. 3.调整控件至相同大小. 4.在对话框中对齐控件. 5.排列控件. 6.使用