Latest web development tutorials

التي مؤسسة

ما هي المؤسسة؟

  • مؤسسة هو إطار الأمامية الحرة لتحقيق تنمية سريعة.
  • تحتوي مؤسسة HTML و CSS قوالب التصميم، ويقدم مجموعة متنوعة من مكونات واجهة المستخدم على شبكة الإنترنت، مثل الأشكال، أزرار، علامات، وهلم جرا. يوفر جافا سكريبت أيضا مجموعة متنوعة من المكونات الإضافية.
  • مؤسسة المحمول لأول مرة، يمكنك إنشاء صفحات الويب استجابة.
  • مؤسسة للمبتدئين والمحترفين.
  • وقد استخدمت أساسا في الفيسبوك، باي، وسامسونج، والأمازون، ديزني، وهلم جرا.

مذكرةما هو تصميم المواقع الإلكترونية تستجيب؟
استجابة تصميم الويب (استجابة تصميم الويب) الفلسفة هي: تصميم وتطوير الصفحة يجب أن يكون ردا مناسبا وضبط قائمة على سلوك المستخدم والبيئة الأجهزة (منصة، حجم الشاشة، اتجاه الشاشة، الخ).

تحميل المؤسسة أين؟

يمكنك أن تكون طريقتان للحصول على مؤسسة:

1. تحميل أحدث نسخة من الموقع الرسمي: http://foundation.zurb.com/ .

2، استخدام هذا الموقع الرسمي تعليمي يوفر كندي (موصى به): 

<!-- 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>

علي سحابة المستندة كندي موقع الخدمة الثابتة.

مذكرةيستخدم أساسا مزايا كندي:
يستخدم مؤسسة كندي تحسين موقع الشركة (على وجه الخصوص، يحتوي على الكثير من الصور وصفحات ثابتة الموقع) سرعة الوصول، وتحسين كبير في استقرار فوق الطبيعة للموقع

لماذا modernizr؟
يستخدم بعض العناصر مؤسسة ميزات HTML5 و CSS3 المتطورة مقارنة من قبل، ولكن الدعم ليس جميع المتصفحات. يستخدم Modernizr للكشف عن متصفح المستخدم HTML5 و CSS3 ملامح من مكتبات جافا سكريبت - يسمح المكونات لتشغيل بشكل صحيح على جميع المتصفحات.

إنشاء صفحات باستخدام مؤسسة

1. إضافة DOCTYPE HTML5

العناصر الأساس باستخدام HTML و CSS الصفات، لذلك تحتاج إلى إضافة HTML5 تعريف نوع المستند نوع المستند.

وفي الوقت نفسه، فإننا يمكن أن يحدد لغة وترميز الأحرف سمات وثيقة لانج:

<! DOCTYPE HTML>
<الاكواد لانج = "زكية-CN ">
<رئيس>
<محارف ميتا = "UTF-8 ">
</ رئيس>
</ HTML>

2. مؤسسة 5 المتحرك لأول مرة

مؤسسة 5 للأجهزة المحمولة التصميم المتجاوب. الأولوية هي لتحريك الإطار الأساسي.

لضمان صفحات مجانية لتكبير <head> إضافة العناصر التالية في <meta> العلامة:

<اسم ميتا = "إطار العرض" محتوى = "العرض = جهاز العرض، الأولي النطاق = 1">
  • عرض: السيطرة على حجم العرض، يمكن تحديد قيمة، إذا 600، أو قيمة خاصة، مثل جهاز العرض من عرض الجهاز (بالبكسل CSS تحجيم إلى 100٪ من الوقت).
  • الجدول الأولي: في الجدول الأولي، وهذا هو، عند أول تحميل الصفحة المقياس الزمني.

3. مكونات تهيئة

وتقوم بعض المكونات على مؤسسة مسج مفتوحة، مثل: صناديق الوسائط، والقوائم المنسدلة. يمكنك استخدام البرنامج النصي التالي إلى تهيئة عناصر هي:

<script>
$ (الوثيقة) .ready (وظيفة () {
$ (الوثيقة) .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.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>

محاولة »