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