Framework7 安装

2025年1月11日 | 阅读 3 分钟

下载 Framework7

有两种方式下载 Framework7

从 Framework7 Github 仓库下载: https://github.com/framework7io/Framework7

或者你可以通过 bower 安装 Framework7

从 CDN 下载 Framework7 库

CDN 或内容分发网络是一个设计用于向用户提供文件的服务器网络。如果你在网页中使用 CDN 链接，它会将托管文件的责任从你自己的服务器转移到一系列外部服务器。这也提供了一个优势，如果你的网页的访问者已经从同一个 CDN 下载了 Framework7 的副本，则无需重新下载。你可以将以下 CDN 文件包含到 HTML 文档中。

iOS App 布局的 CDN

<link rel = "stylesheet" 
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />

Framework7 iOS CSS 库

<link rel = "stylesheet" 
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />

Android/Material App 布局的 CDN

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>

Framework7 JS 库

<script src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css"></script>

Ampps 服务器

我们使用 AMPPS (AMPPS 是一个集成了 Apache, MySQL, MongoDB, PHP, Perl & Python 的 WAMP, MAMP 和 LAMP 堆栈) 服务器来执行我们所有的示例。

在下载/安装的包中，我们需要来自 dist/ 文件夹的文件。

Dist 文件夹路径

默认的 dist/ 文件夹路径是: C:\Program Files (x86)\Ampps\www\dist

将你的 HTML、.JS 和 CSS 文件放入你的服务器根文件夹（dist 文件夹），打开本地主机，然后运行该页面。

示例

创建一个名为 "framework7_environment.html" 的 HTML 页面，包含以下代码

<!DOCTYPE html>
<html>
   
   <head>
      <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>
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
   </head>
   
   <body>
      //you can control the background color of the Status bar
      <div class = "statusbar-overlay"></div>
      <div class = "panel-overlay"></div>
      
      <div class = "panel panel-right panel-reveal">
         <div class = "content-block">
            <p>Contents goes here...</p>
         </div>
      </div>
      
      <div class = "views">
         <div class = "view view-main">
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">My App</div>
                  <div class = "right">
                     <a href = "#" class = "link icon-only open-panel">
                        <i class = "icon icon-bars"></i>
                     </a>
                  </div>
               </div>
            </div>
            
            <div class = "pages navbar-through toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     <p>This is simple application...</p>
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "envirmnt_about.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Blog</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">First Link</a>
                  <a href = "#" class = "link">Second Link</a>
               </div>
            </div>
         </div>
      </div>
      
      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
      
      <script>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
            
            // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         //use the 'pageInit' event handler for all pages
         $$(document).on('pageInit', function (e) {
         
            //get page data from event data
            var page = e.detail.page;

            if (page.name === 'blog') {
            
               // you will get below message in alert box when page with data-page attribute is equal to "about"
               myApp.alert('Here its your About page');
            }
         })
      </script>
   </body>

</html>

创建另一个名为 "envirmnt_about.html" 的 HTML 页面，包含以下代码

.
<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "left">
         <a href = "#" class = "back link">
            <i class = "icon icon-back"></i>
            <span>Back</span>
         </a>
      </div>
      
      <div class = "center sliding">My Blog</div>
      <div class = "right">
         <a href = "#" class = "link icon-only open-panel">
            <i class = "icon icon-bars"></i>
         </a>
      </div>
   </div>
</div>

<div class = "pages">
   <div data-page = "blog" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <h2>My Blog</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
			Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
			when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
         </div>
      </div>
   </div>
</div>

将以上两个页面保存在 dist 文件夹中。现在打开服务器: https:///dist/ 并运行示例。

下一个主题F7 布局

Framework7 安装

下载 Framework7

从 CDN 下载 Framework7 库

Ampps 服务器

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Framework7 教程

Framework7 表单

Framework7 选项卡

F7 Swiper 滑块

F7 图片浏览器

F7 选择器

F7 日历

F7 杂项

面试题

Framework7 安装

下载 Framework7

从 CDN 下载 Framework7 库

Ampps 服务器

示例

相关帖子

F7 按钮

F7 侧边栏

F7 卡片

F7 操作按钮

F7 芯片

F7 手风琴

F7 工具栏

F7 内容块

F7 导航栏

F7 覆盖层

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器