مؤسسة الشبكة - تجهيزات متوسطة
الفصل الأخير قدمنا الأجهزة الصغيرة التي نستخدمها .small-* فئة لتعيين نسبة شبكة من 25٪ / 75٪:
<div class="small-3 columns">....</div> <div class="small-9 columns">....</div>
على جهاز المتوسطة الحجم التي نوصي نسبة 50٪ / 50٪.
نصيحة: ويعرف حجم الشاشة في الأجهزة المتوسطة 40.0625em إلى 64.0624em بين.
المعدات المتوسطة .medium-* الفئة.
ونحن الآن إضافة اثنين على جهاز المدى المتوسط:
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
؟ في المقام إقامة عمودين، بلغت هذه النسبة 25٪ و 75٪ (مؤسسة غير المحمول الأولى: إذا لم يكن محددا، فإن المعدات الكبيرة يرث. الصغيرة رمز الفئة):
نسبة الأجهزة الصغيرة٪ 25/75٪ ( .small-3 و .small-9 ). ومع ذلك، كانت نسبة معدات متوسطة الحجم تستخدم٪ 50/50٪ ( .medium-6 و .medium-6 ).
أمثلة
<فئة الدرجة = "الصف">
<div الطبقة = "صغير 3 متوسطة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
<div الطبقة = "صغير 9 متوسطة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
</ div>
<div الطبقة = "صغير 3 متوسطة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
<div الطبقة = "صغير 9 متوسطة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
</ div>
محاولة »
 | ملاحظة: للتأكد من أن عدد الأعمدة تضيف ما يصل الى 12! |
|---|
جهاز ضيق للاستخدام على متوسطة الحجم
في المثال التالي، نحدده نحن .medium-6 فئة (لا .small-* ). هذا يدل على أن في نسبة متوسطة أو كبيرة المعدات 50٪ / 50٪. ولكن على جهاز صغير مكدسة أفقيا (عرض 100٪):
أمثلة
<فئة الدرجة = "الصف">
<فئة الدرجة = "متوسطة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
<فئة الدرجة = "متوسطة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
</ div>
<فئة الدرجة = "متوسطة 6 أعمدة" على غرار = "لون الخلفية: أصفر؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
<فئة الدرجة = "متوسطة 6 أعمدة" على غرار = "لون الخلفية: الوردي؛">
<P> هذا البرنامج التعليمي </ P>
</ div>
</ div>
محاولة »