2014-03-12 1 views
1

화면의 아래쪽에 버튼과 중심으로 배치 된 컨텐트가있는 매우 간단한 레이아웃을 만들고 싶습니다.intel 앱 프레임 워크 중심 컨텐트

어떻게하면 인텔 응용 프로그램 프레임 워크 UI에서이를 달성 할 수 있습니까?

물론 모든 화면 크기를 지원해야합니다. 여기

+0

미안하지만, 당신이 좋은 담당자가 당신은 규칙을 가장 잘 이해합니다. 뭐라 구요? 공유 할 코드가 있습니까? – Popeye

+0

나는 그 그리드 시스템을 사용했지만 내용의 크기를 고려하지 않았다. –

답변

1

인텔 응용 프로그램 프레임 워크의 예는 다음과 같습니다 http://jsbin.com/valuc/1/edit

<!DOCTYPE html> 
<html> 
<head> 
    <title>App Framework</title> 
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" /> 

    <link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/af.ui.css" /> 
    <link rel="stylesheet" type="text/css" href="http://cdn.app-framework-software.intel.com/2.0/icons.css" /> 
    <script type="text/javascript" charset="utf-8" src="http://cdn.app-framework-software.intel.com/2.0/appframework.ui.min.js"></script> 
    <style> 
#page1 {text-align: center}  
    </style>  
</head> 
<body> 
<div id="afui"> 
    <div id="content" style=""> 
     <div class="panel" title="Welcome" id="page1" selected="true"> 
      <p>This is come content</p> 
      <p>This text is centered in the panel</p> 
     </div> 
    </div> 
    <div id="navbar"> 
     <a class="icon home" href="#button1">Button 1</a> 
     <a class="icon settings" href="#button2">Button 2</a> 
    </div>  
</div> 
</body> 
</html> 
또한 인텔 응용 프로그램 프레임 워크를 사용하여 만든 몇 가지 기본적인 템플릿을 참조

은 시작하는 : https://github.com/krisrak/appframework-templates