財団が開始しました2024 年の最新の入門チュートリアル。このコースでは 財団とは何ですか?,財団はどこにダウンロードしますか?,財団を使用して作成するページ,基本財団ページ, について学習できます。
レスポンシブWebデザインとは何ですか? レスポンシブWebデザイン(レスポンシブWebデザイン)の哲学は、次のとおりです。ページの設計と開発は適切な対応であるとユーザーの行動やデバイス環境(プラットフォーム、画面サイズ、画面の向きなど)に基づいて調整する必要があります。 |
あなたは、財団を入手するには2つの方法を指定できます。
1.公式サイトから最新版をダウンロードhttp://foundation.zurb.com/を 。
2、CDN(推奨)を提供し、このチュートリアルの公式ウェブサイトを使用します。
<!-- css 文件 --> <link rel="stylesheet" href="http://static.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.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の文書を属性を設定することができます。
最初の2財団5モバイル
モバイルデバイスレスポンシブ設計のための基礎5。 優先度は、コアフレームワークを移動させることです。
ズームインして自由にページを確保するために、 <head>
中で次の要素を追加します<meta>
タグ:
3.初期化コンポーネント
モーダルボックス、プルダウンメニュー:一部のコンポーネントは、以下のような、jQueryの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.w3write.com/assets/foundation-5.5.3/foundation.min.css"> <!-- jQuery 库 --> <script src="http://static.w3write.com/assets/jquery/2.0.3/jquery.min.js"></script> <!-- JavaScript 文件 --> <script src="http://static.w3write.com/assets/foundation-5.5.3/js/foundation.min.js"></script> <!-- modernizr 文件 --> <script src="http://static.w3write.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 ipsumja</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 ipsumja</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 ipsumja</p> </div> </div> </body> </html>