开始使用

熟悉 FEA 的基本组织结构。

首先,你需要下载 FEA。

下载 FEA


文件结构

在 ZIP 文件中,你可以找到准备在你的项目中使用的所有的 CSS、JavaScript 和字体文件。FEA 的核心框架几乎没有任何样式,这样做是为了保持它的精简。另外提供几个其他的风格样式,每个风格样式提供单独的CSS文件以及压缩后的版本。

文件夹 描述
/css 包含 FEA 所有的 CSS 文件和压缩后的版本。
/fonts 包含 FEA 中使用的字体文件。
/js 包含 FEA 所有的 JavaScript 文件和压缩后的版本。
/css
	<!-- FEA 基础 -->
	fea.core.css
	fea.core.min.css
	<!-- FEA 组件 -->
	fea.components.css
	fea.components.min.css
	<!-- FEA 包括基础及组件-->
	fea.css
	fea.min.css
	<!-- FEA RTL 风格 -->
	fea.rtl.css
	fea.rtl.min.css
	<!-- FEA 渐变风格 -->
	fea.g.css
	fea.g.min.css
	<!-- FEA 渐变 RTL 风格 -->
	fea.g.rtl.css
	fea.g.rtl.min.css
	<!-- FEA rem 单位风格 -->
	fea.x.css
	fea.x.min.css
	<!-- FEA with rem 单位 RTL 风格 -->
	fea.x.rtl.css
	fea.x.rtl.min.css
/fonts
	<!-- FEAIF 字体 -->
	FEAIF.eot
	FEAIF.ttf
	FEAIF.woff
	FEAIF.svg
/js
	<!-- 核心 -->
	fea.core.js
	fea.core.min.js
	<!-- 组件 -->
	fea.components.js
	fea.components.min.js
	<!-- 全部 -->
	fea.js
	fea.min.js
/img
	<!-- 图像 -->
	app-icon72x72@2x.png
	favicon.png
	startup-640x1096.png

HTML 页面代码

首先,确保你有一个可靠的代码编辑器,比如 notepad++。你需要在你的 HTML5 的文档头部添加编译后的 FEA CSS 和 JavaScript 文件,最好是压缩后的版本。别忘了添加 jQuery(version1.11+)。就是这样!

示例

<!doctype html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="fea.min.css" />
	<script src="jquery.js"></script>
	<script src="fea.min.js"></script>
</head>
<body>

</body>
</html>

一个完整示例

<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8" />
	<title>FEA - Demo</title>
	<meta name="description" content="">
	<meta name="keywords" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
	<meta name="HandheldFriendly" content="true">
	<!-- Set render engine for 360 browser -->
	<meta name="renderer" content="webkit">
	<!-- No Baidu Siteapp-->
	<meta http-equiv="Cache-Control" content="no-siteapp"/>
	<meta http-equiv="Cache-Control" content="no-transform"/>
	<link rel="icon" type="image/png" href="./img/favicon.png">
	<!-- Add to homescreen for Chrome on Android -->
	<meta name="mobile-web-app-capable" content="yes">
	<link rel="icon" sizes="192x192" href="./img/app-icon72x72@2x.png">
	<!-- Add to homescreen for Safari on iOS -->
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-title" content="FEA Demo"/>
	<link rel="apple-touch-icon-precomposed" href="./img/app-icon72x72@2x.png">
	<!-- Tile icon for Win8 (144x144 + tile color) -->
	<meta name="msapplication-TileImage" content="./img/app-icon72x72@2x.png">
	<meta name="msapplication-TileColor" content="#0e90d2">
	<!-- FEA -->
	<link rel="stylesheet" href="./css/fea.css">
	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: respond.min.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
		<script src="./vendor/html5shiv.min.js"></script>
		<script src="./vendor/respond.min.js"></script>
	<![endif]-->
</head>
<body>
	<!--code start here-->

	<script src="./vendor/jquery.min.js"></script>
	<script src="./js/fea.js"></script>
</body>
</html>