財団のはじめに
ファンデーションとは何ですか?
Foundation は、迅速な開発のための無料のフロントエンド フレームワークです。
Foundation には HTML および CSS デザイン テンプレートが含まれており、フォーム、ボタン、タブなど、Web 上にさまざまな UI コンポーネントを提供します。さまざまな JavaScript プラグインも提供されています。
Foundation はモバイルファーストでレスポンシブ Web ページを作成します。
ファンデーションは初心者と専門家の両方に適しています。
Foundationは、Facebook、eBay、Samsung、Amazon、Disneyなどによって使用されています。
 | レスポンシブWebデザインとは何ですか? レスポンシブ Web デザインの概念は次のとおりです。 ページの設計と開発は、ユーザーの行動とデバイス環境 (システム プラットフォーム、画面サイズ、画面の向きなど) に基づいて対応し、調整する必要があります。 |
|---|
Foundation はどこからダウンロードできますか?
次の 2 つの方法で Foundation を入手できます:
1. 公式 Web サイト http://foundation.zurb.com/ から最新バージョンをダウンロードします。
2. PHP 中国語 Web サイトの公式 Web サイトが提供する 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 サービスに基づいています。
| CDN を使用するメリット: CDN を使用すると、企業サイト (特に大量の画像や固定ページを含むサイト) のアクセス速度が向上し、企業サイトの安定性が大幅に向上します。自然の上に Modernizr を使用する理由 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>
インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します
