Latest web development tutorials

財団が開始しました

財団とは何ですか？

  • 財団は、急速な発展のための無料のフロントエンドのフレームワークです。
  • 財団は、HTMLとCSSデザインテンプレートが含まれているようなので、上のフォーム、ボタン、タブ、およびなどのWeb上のUIコンポーネントのさまざまなを提供しています。 JavaScriptはまた、さまざまなプラグインを提供します。
  • 財団携帯まず、あなたは応答Webページを作成することができます。
  • 初心者や専門家のための財団。
  • 財団は、というようにFacebookやeBayの、サムスン、アマゾン、ディズニーとで使用されてきました。

ノートレスポンシブWebデザインとは何ですか？
レスポンシブWebデザイン（レスポンシブWebデザイン）の哲学は、次のとおりです。ページの設計と開発は適切な対応であるとユーザーの行動やデバイス環境（プラットフォーム、画面サイズ、画面の向きなど）に基づいて調整する必要があります。

財団はどこにダウンロードしますか？

あなたは、財団を入手するには2つの方法を指定できます。

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は、企業サイト（特に、写真や静的ページのサイトを多く含む）アクセス速度を向上させ、大幅にサイトの上記性質の安定性を向上させる使用しています

なぜmodernizr？
いくつかの財団のコンポーネントは、前に比べて、最先端のHTML5とCSS3の機能を使用していますが、いないすべてのブラウザがサポートしています。 Modernizrは、JavaScriptライブラリのユーザーのブラウザHTML5とCSS3の機能を検出するために使用される - コンポーネントがすべてのブラウザで正常に実行することができます。

財団を使用して作成するページ

1. HTML5のDOCTYPEを追加します。

あなたはHTML5のdoctype文書型宣言を追加する必要があるので、HTMLとCSS属性を使用して基礎要素。

一方、我々は言語と文字エンコーディングがLANGの文書を属性を設定することができます。

<！DOCTYPE HTML>
<HTML LANG = "ZH-CN 」>
<ヘッド>
<メタ文字セット= "UTF-8 ">
</ HEAD>
</ HTML>

最初の2財団5モバイル

モバイルデバイスレスポンシブ設計のための基礎5。 優先度は、コアフレームワークを移動させることです。

ズームインして自由にページを確保するために、 <head>中で次の要素を追加します<meta>タグ：

<メタ名=「ビューポート」コンテンツ = "幅=デバイス幅、初期スケール= 1">
  • 幅：ビューポートのサイズを制御する600場合、値は、指定することができ、またはそのようなデバイス幅のデバイス幅などの特別な値、（ピクセルのCSSに時間の100％にスケーリング）。
  • 初期の規模：初期スケール、それはときに最初のページのロード時間スケール、です。

3.初期化コンポーネント

モーダルボックス、プルダウンメニュー：一部のコンポーネントは、以下のような、jQueryのFoundationオープンに基づいています。 あなたは、コンポーネントを初期化するには、次のスクリプトを使用することができます。

<スクリプト>
$（ドキュメント）.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>

»をお試しください