باستخدام الإطار الأساسي
وقبل اسبوعين الشهير إطار المؤسسة صدر النسخة الرابعة. إذا لم تسمع أبدًا عن مؤسسة فسوف نرشدك من خلال استخدام هذا الإطار المتجاوب.
نظرًا لأن الإصدار 3 من Foundation تم إنشاؤه من البداية إلى الأعلى باستخدام SASS - معالج CSS المسبق الذي يساعد في كتابة CSS أكثر كفاءة - فإن هذا الإصدار الجديد مناسب أيضًا للجوّال ويوفر الكثير من الميزات في شبكته التي لا تلتزم بها. الحصول على من الأطر الأخرى.
دعونا نغوص في مؤسسة ونرى لماذا هي شعبية جدا ...
الشبكة
تستخدم المؤسسة شبكة تعشيق 12 عمودًا تتكيف مع أي شاشة بحجم ، إذا كنت قد استخدمت شبكات بالفعل ، فيجب أن يكون ذلك مألوفًا لك تمامًا. تستخدم جميع الأقسام في المؤسسة حجم الصندوق: مربع الحدود بحيث لا تؤثر الحدود والحشو على عرض العنصر وارتفاعه ، مما يجعل العملية الرياضية أسهل قليلاً بالنسبة لنا. ولكن الشيء المذهل في شبكة المؤسسة هو أنك تحصل فعليًا على شبكتين ، شبكة كبيرة عندما تكون الشاشة أكبر من 768 بكسل في العرض وشبكة أصغر يمكنك التحكم فيها ببساطة. ولتحقيق هذه الغاية ، تستخدم المؤسسة الفصول الدراسية الصغيرة والكبيرة # ، مثل:
Lorem IpsumLorem IpsumLorem Ipsumفي هذا الرمز ، أنشأنا صفًا به 3 divs يكونان بنفس العرض بالضبط عندما يكون المتصفح أكبر من 768 بكسل ، ولكن عندما يكون أصغر ، كما ترى من خلال هذه الفئة الصغيرة في div ، فإن آخرها سيشغل نصف في حين أن الاثنين الآخرين سيشغلان 25٪ لكل منهما ، فإن هذا يمنحك تحكمًا كبيرًا في كيفية ظهور موقعنا على جميع الشاشات.
كما تتيح لك المؤسسة أيضًا تعويض عمود ، أعني أنه يمكن أن يكون لديك صف به عمودين لا يتعدى 3 أعمدة فقط ، ولكن يمكنك تعويض العمود الثاني الذي يطفو إلى اليمين ولفعل ذلك نستخدم فئة الإزاحة أو فئة الإزاحة الصغيرة:
3, offset 6كتلة الشبكة
شبكة البلوك هي مجرد اضافي صغير لطيف ، انها طريقة لتقسيم محتوى قائمة داخل الشبكة ، انها مفيدة عندما تريد هذا الجزء الخاص من موقع الويب الخاص بك لتبقى متساوية بغض النظر عن حجم المتصفح. يستخدم هذا النوع من الشبكات شبكة الكتلة الصغيرة وفئات كتلة الشبكة الكبيرة ، إذا قمت بتعيين الفئة الأولى فقط ، فستحتفظ الشبكة بالتباعد المطلوب بغض النظر عن إطار العرض ولكن إذا كنت تستخدم الكتل الكبيرة فقط فئة الشبكة عند وصول إطار العرض إلى نقطة توقف تبلغ 768 بكسل ، ستتراكم عناصر الشبكة فوق بعضها البعض ، ويمكنك دائمًا اتخاذ المزيد من التحكم باستخدام كلتا الفئتين ، على النحو التالي:
باستخدام هذا ، ستكون الصور متباعدة بالتساوي بغض النظر عن الحجم. عندما يكون إطار العرض أكبر من 768 بكسل ، سيشغل صفًا واحدًا فقط ، وعندما يكون أصغر من ذلك ، سيشغل صفين يحتوي كل منهما على صورتين.
الملاحة الرئيسية
الآن بعد أن قمنا بتغطية الشبكة في المؤسسة وكيف أنها تمنحك الكثير من التحكم في جميع البيئات ، سنتحدث عن شيء سنستخدمه دائمًا على مواقعنا: شريط تنقل علوي. وبالطبع يمكن أن يكون هذا التنقل أيضًا مرنًا مع القليل من العمل أو عدم استخدامه باستخدام هذا الإطار. لإنشاء تنقل سريع الاستجابة باستخدام الأساس الذي تستخدمه:
ينشئ هذا الجزء من HTML شريط تنقل بسيط يحتوي على عنوان موقع الويب على اليمين ، ثم على اليمين يحتوي على أربعة عناصر قائمة. لاحظ أيضًا أنه عندما يكون إطار العرض أصغر من 768 بكسل ، سيتم استبدال هذه القائمة برمز قائمة مما يجعل هذه القائمة سريعة الاستجابة. إذا كنت ترغب في تثبيت موضع هذه الشبكة أثناء التمرير لأسفل الصفحة ، فكل ما تحتاج إليه هو أن تقوم بتغليفه في div بفئة ثابتة. لإضافة قوائم منسدلة إلى تنقلاتك ، تحتاج فقط إلى إضافة شيء كهذا إلى المكان الذي تريد وضع القائمة المنسدلة فيه:
هناك أيضا القدرة على إضافة مقسم إلى عنصر القائمة الخاص بك إضافة خط رمادي عمودي صغير ، للقيام بذلك تحتاج فقط إلى وضع عنصر قائمة مع فئة الحاجز بين عنصري القائمة التي ترغب في تقسيمها.
وصفت
لن يكون هناك إطار عمل كامل بدون بعض الأزرار المحددة مسبقًا ، وللمؤسسة فعليًا أكثر من نمط محدد مسبقًا ، إلا أنها تحتوي على الزر الافتراضي الذي يستخدم لونًا أزرقًا ثم يضيف أنماط النجاح والتنبيه والثانوي. من خلال إضافة صنف نصف القطر ، فإنك تعطي هذا الزر القليل من نصف قطر الحدود ، ومن خلال إعطائه صفاً دائرياً ، فإنك تجعل الزر مستديرًا تقريبًا تقريبًا. يمكنك أيضًا إضافة الفصل إلى الزر ، وهناك 4 فئات للحجم لجعل الزر كبيرًا كما تحتاج إليه.
لإنشاء زر القائمة المنسدلة البسيطة ، يلزمك فقط إضافة فئة القائمة المنسدلة بعد الفصل الدراسي الأخير ، مثل: