Latest web development tutorials

재단은 시작

재단은 무엇입니까?

  • 재단은 급속한 발전을위한 무료 프런트 엔드 프레임 워크입니다.
  • 재단은 HTML과 CSS 디자인 템플릿이 포함 등등 폼, 단추, 탭, 그리고 웹에서 UI 구성 요소의 다양한 제공합니다. 자바 스크립트는 플러그인의 다양한 제공합니다.
  • 재단 모바일 먼저, 당신은 대응 웹 페이지를 만들 수 있습니다.
  • 초보자와 전문가를위한 재단.
  • 재단은 그래서 페이스 북, 이베이, 삼성, 아마존, 디즈니에 사용되었습니다.

주의반응 형 웹 디자인은 무엇인가?
반응 형 웹 디자인 (반응 형 웹 디자인) 철학은 다음 페이지의 설계 및 개발이 적절한 응답하고 사용자의 행동 및 장치 환경 (플랫폼, 화면 크기, 화면 방향 등)에 따라 조정해야합니다.

어디 재단 다운로드?

당신은 재단을 얻을 수있는 두 가지 방법이 될 수 있습니다 :

1. 공식 웹 사이트에서 최신 버전을 다운로드 http://foundation.zurb.com/을 .

2,이 튜토리얼 공식 웹 사이트는 CDN을 제공합니다 사용 (권장) : 

<!-- css 文件 -->
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-5.5.3/foundation.min.css">

<!-- jQuery 库 -->
<script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

<!-- JavaScript 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

<!-- modernizr 文件 -->
<script src="http://static.w3big.com/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>

알리 CDN에게 정적 사이트 서비스를 클라우드 기반.

주의재단은 CDN의 장점을 사용합니다 :
재단은 CDN 액세스 속도 (특히, 사진 및 정적 페이지 사이트를 많이 포함) 기업 사이트 개선 크게 사이트의 상기 특성의 안정성을 향상 사용

왜 모더 나이저?
일부 재단 구성 요소는 이전에 비해 최첨단 HTML5와 CSS3 기능을 사용하지만, 모든 브라우저를 지원합니다. 모더 나이저는 사용자의 브라우저 HTML5와 자바 스크립트 라이브러리의 CSS3 기능을 감지하는 데 사용됩니다 - 구성 요소가 모든 브라우저에서 제대로 실행할 수 있습니다.

파운데이션을 사용하여 작성 페이지

1. HTML5의 DOCTYPE 추가

당신이 HTML5 DOCTYPE 문서 형식 선언을 추가해야하므로, HTML 및 CSS 속성을 사용하는 기초 요소입니다.

한편, 우리는 언어를 설정하고 문자 인코딩은 LANG 문서 속성 :

<! DOCTYPE html로>
<HTML LANG = "에서 zh-CN ">
<헤드>
<메타 문자 집합 = "UTF-8 ">
</ 헤드>
</ HTML>

2. 재단 5 모바일 최초의

모바일 반응 형 디자인 재단 5. 우선 순위는 코어 프레임 워크를 이동시키는 것이다.

확대 자유롭게 페이지를 확인하려면 <head> 에 다음과 같은 요소를 추가 <meta> 태그 :

<메타 이름 = "뷰포트"내용 = "너비 = 장치 폭, 초기 규모 = 1">
  • 폭 : 뷰포트의 크기를 제어하는 ​​값 (600) 경우, 지정 또는 단말기 폭의 장치 폭 특수 값 (픽셀 CSS에서의 시간을 100 %로 조정) 할 수있다.
  • 초기 규모 :은 초기 규모, 때 첫 번째 페이지로드 시간 규모.

3. 초기화 구성 요소

모달 상자, 풀다운 메뉴 : 일부 구성 요소는 이와 같이, jQuery를 재단 오픈을 기반으로합니다. 당신은 구성 요소를 초기화하려면 다음 스크립트를 사용할 수 있습니다 :

<스크립트>
$ (문서) .ready (함수 () {
$ (문서) .foundation ();
})
</ 스크립트>

기본 재단 페이지

기본적인 토대 페이지를 만드는 방법 : 

<!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.w3big.com/assets/foundation-5.5.3/foundation.min.css">

  <!-- jQuery 库 -->
  <script src="http://static.w3big.com/assets/jquery/2.0.3/jquery.min.js"></script>

  <!-- JavaScript 文件 -->
  <script src="http://static.w3big.com/assets/foundation-5.5.3/js/foundation.min.js"></script>

  <!-- modernizr 文件 -->
  <script src="http://static.w3big.com/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>

»시도