재단 시작하기
파운데이션이란?
Foundation은 신속한 개발을 위한 무료 프런트엔드 프레임워크입니다.
Foundation에는 HTML 및 CSS 디자인 템플릿이 포함되어 있어 웹에서 양식, 버튼, 탭 등과 같은 다양한 UI 구성 요소를 제공합니다. 다양한 JavaScript 플러그인도 제공됩니다.
Foundation은 반응형 웹 페이지를 만들기 위해 모바일 우선입니다.
Foundation은 초보자와 전문가 모두에게 적합합니다.
Foundation은 Facebook, eBay, Samsung, Amazon, Disney 등에서 사용되었습니다.
 | 반응형 웹 디자인이란 무엇인가요? 반응형 웹 디자인의 개념은 다음과 같습니다. 페이지의 디자인과 개발은 사용자 행동과 장치 환경(시스템 플랫폼, 화면 크기, 화면 방향 등)에 따라 적절하게 대응하고 조정되어야 합니다. |
|---|
Foundation은 어디서 다운로드하나요?
다음 두 가지 방법으로 Foundation을 다운로드할 수 있습니다.
1 공식 웹사이트(http://foundation.zurb.com/)에서 최신 버전을 다운로드하세요.
2. php 중국어 홈페이지 공식 홈페이지에서 제공하는 CDN 사용(권장):
<link rel="stylesheet" href="http:// static.php.cn/assets/foundation-5.5.3/foundation.min.css">
<!-- jQuery 라이브러리 -->
<script src="http://static.php. cn/assets/ jquery/2.0.3/jquery.min.js"></script>
<!-- JavaScript 파일 -->
<script src="http://static.php .cn/assets /foundation-5.5.3/js/foundation.min.js"></script>
<!-- modernizr 파일 -->
<script src="http:// static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
이 사이트의 정적 CDN은 Alibaba Cloud 서비스를 기반으로 합니다.
| Foundation CDN 사용의 장점: CDN을 사용하는 Foundation은 기업 사이트(특히 사진 수가 많고 정적 페이지가 많은 사이트)의 액세스 속도를 향상시키며, 기업 사이트의 안정성을 크게 향상시킵니다. 위의 자연 왜 modernizr을 사용하나요? Some Foundation의 구성 요소는 최첨단 HTML5 및 CSS3 기능을 사용하지만 모든 브라우저가 이를 지원하는 것은 아닙니다. Modernizr는 사용자 브라우저의 HTML5 및 CSS3 기능을 감지하여 구성 요소가 모든 브라우저에서 올바르게 작동할 수 있도록 하는 JavaScript 라이브러리입니다. |
|---|
Foundation을 사용하여 페이지 만들기
1. HTML5 doctype 추가
Foundation은 HTML 요소와 CSS 속성을 사용하므로 HTML5 doctype 문서 유형 선언을 추가해야 합니다.
동시에 문서의 언어 속성 lang 및 문자 인코딩을 설정할 수 있습니다.
<html lang="zh-cn">
<head>
< ;meta charset="utf -8">
</head>
</html>
2. Foundation 5 모바일 우선
Foundation 5는 모바일 장치를 위한 반응형 디자인입니다. 핵심적으로 프레임워크는 모바일 우선입니다.
페이지의 크기를 자유롭게 조정하려면 <head> 元素中添加以下 <meta> 태그에서 뷰포트를 제어할 수 있습니다.
width: 제어 뷰포트 크기는 600과 같은 값으로 지정하거나 장치 너비(100%로 확장할 때 CSS 픽셀 단위)인 device-width와 같은 특수 값으로 지정할 수 있습니다.
initial-scale: 초기 크기 조정 비율, 즉 페이지가 처음 로드될 때의 크기 조정 비율입니다.
3. 초기화 구성 요소
모달 상자, 드롭다운 메뉴 등과 같은 일부 Foundation 구성 요소는 jQuery를 기반으로 합니다. 다음 스크립트를 사용하여 구성 요소를 초기화할 수 있습니다.
$(document).ready(function() {
$(document).foundation();
})
</script>
기본 기초 페이지
기본 기초 페이지 만드는 방법
예
<!DOCTYPE html> <html> <head> <title>Foundation Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- css 文件 --> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body> <div class="row"> <div class="medium-12 columns"> <div class="panel"> <h1>Foundation 页面</h1> <p>重置窗口大小，查看效果！</p> <button type="button" class="button small">I Like It!</button> </div> </div> </div> <div class="row"> <div class="medium-4 columns"> <h3>Column 1</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 2</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> <div class="medium-4 columns"> <h3>Column 3</h3> <p>Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum..</p> </div> </div> </body> </html>
인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요
