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