الشبكة تستجيب
W3.CSS يدعم 12 عمود السائل استجابة الشبكة.
تغيير حجم الصفحة لرؤية تأثير!
وهذا جزء تحتل 12 عمودا على الشاشة الصغيرة، 4 على شاشة متوسطة، و 3 على شاشة كبيرة.
وهذا جزء تحتل 12 عمودا على الشاشة الصغيرة، 8 على شاشة متوسطة، و 9 على شاشة كبيرة.
مثال
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div> انها محاولة لنفسك » الصفوف استجابة
نظام الشبكة W3.CSS قادر على الاستجابة، وسوف الأعمدة إعادة ترتيب تلقائيا تبعا لحجم الشاشة: على الشاشة الكبيرة قد تبدو أفضل مع المحتوى نظمت في ثلاثة أعمدة، ولكن على الشاشة الصغيرة سيكون من الأفضل إذا كان المحتوى كانت مكدسة العناصر فوق بعضها البعض.
يجب أن الأعمدة الموجودة داخل صف واحد لتكون متجاوبة تماما.
| صف مدرسي | وصف |
|---|---|
| W3 الصف | يحدد وعاء والحشو أقل للأعمدة تستجيب. |
| W3-صف الحشو | يحدد وعاء مبطن للأعمدة تستجيب. |
| W3-كولونيل | يعرف عمود مع فئات فرعية |
W3-كولونيل لديه الطبقات الفرعية التالية:
أعمدة للشاشات الصغيرة (الهواتف الذكية نموذجي):
| صف مدرسي | وصف |
|---|---|
| S1 | تعرف 1 من 12 الأعمدة (العرض: 08.33٪) للشاشات الصغيرة |
| S2 | يحدد 2 من 12 الأعمدة (العرض: 16.66٪) للشاشات الصغيرة |
| S3 | يحدد 3 من 12 الأعمدة (العرض: 25.00٪) للشاشات الصغيرة |
| 4 س | يحدد 4 من 12 الأعمدة (العرض: 33.33٪) للشاشات الصغيرة |
| S5-S11 | |
| S12 | يحدد 12 من 12 الأعمدة (العرض: 100٪). افتراضي للشاشات الصغيرة |
أعمدة للشاشات المتوسطة (أقراص نموذجي):
| صف مدرسي | وصف |
|---|---|
| M1 | تعرف 1 من 12 الأعمدة (العرض: 08.33٪) للشاشات المتوسطة |
| M2 | يحدد 2 من 12 الأعمدة (العرض: 16.66٪) للشاشات المتوسطة |
| M3 | يحدد 3 من 12 الأعمدة (العرض: 25.00٪) للشاشات المتوسطة |
| M4 | يحدد 4 من 12 الأعمدة (العرض: 33.33٪) للشاشات المتوسطة |
| M5-M11 | |
| M12 | يحدد 12 من 12 الأعمدة (العرض: 100٪). افتراضي للشاشات المتوسطة |
أعمدة للشاشات الكبيرة (اجهزة اللابتوب العادية):
| صف مدرسي | وصف |
|---|---|
| L1 | تعرف 1 من 12 الأعمدة (العرض: 08.33٪) للشاشات الكبيرة |
| L2 | يحدد 2 من 12 الأعمدة (العرض: 16.66٪) للشاشات الكبيرة |
| L3 | يحدد 3 من 12 الأعمدة (العرض: 25.00٪) للشاشات الكبيرة |
| L4 | يحدد 4 من 12 الأعمدة (العرض: 33.33٪) للشاشات الكبيرة |
| L5-L11 | |
| L12 | يحدد 12 من 12 الأعمدة (العرض: 100٪). افتراضي للشاشات الكبيرة) |
الطبقات فوق ويمكن الجمع بين لإنشاء تخطيطات أكثر ديناميكية ومرنة.
كل فئة موازين، لذلك إذا كنت ترغب في تعيين نفس العرض للشاشات الصغيرة والمتوسطة والكبيرة، وتحتاج فقط إلى تحديد فئة صغيرة. وإذا كنت تريد نفس العرض على الشاشات المتوسطة والكبيرة، تحتاج فقط إلى تحديد فئة السيارات المتوسطة.
ومع ذلك، إذا كنت لا تستخدم سوى الطبقات المتوسطة والكبيرة / أو، وعرض تحويل دائما إلى 100٪ على الشاشات الصغيرة.
ملاحظة: عدد الأعمدة وينبغي أن تضيف دائما ما يصل إلى 12 لكل صف (6 + 6، 3 + 3 + 6، 9 + 3، الخ)!
اثنين من أعمدة المساواة
عمودين متساويين من حيث العرض (50٪ / 50٪) على جميع أحجام الشاشة:
S6
S6
مثال
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div> انها محاولة لنفسك » اثنين من الأعمدة غير متساوية
عمودين بعرض غير متساو (25٪ / 75٪) على جميع أحجام الشاشة:
S3
S9
مثال
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> انها محاولة لنفسك » ثلاثة أعمدة متساوية
ثلاثة أعمدة متساوية العرض (33.3٪ / 33.3٪ / 33.3٪) على جميع أحجام الشاشة:
4 س
4 س
4 س
مثال
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div> انها محاولة لنفسك » ثلاثة أعمدة غير المتساوية
ثلاثة أعمدة مختلف العرض (25٪ / 50٪ / 25٪) على أقراص وأجهزة الكمبيوتر المحمولة والمكتبية. على الهواتف النقالة، والأعمدة تلقائيا كومة (100 عرض٪):
M3
M6
M3
مثال
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div> انها محاولة لنفسك » ملاحظة: هذا المثال هو نفس باستخدام ربع W3 (M3)، نصف W3 (M6)، ربع W3 (M3)، التي تعلمت في الاستجابة W3.CSS الفصل.
ستة أعمدة
ستة أعمدة متساوية العرض (16٪ لكل منهما) على أقراص وأجهزة الكمبيوتر المحمولة والمكتبية. على الهواتف النقالة، والأعمدة تلقائيا كومة (100 عرض٪):
M2
M2
M2
M2
M2
M2
مثال
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div> انها محاولة لنفسك » مختلطة: الجوال وأجهزة الكمبيوتر المحمولة
يمكنك الجمع بين الطبقات لإنشاء تصميم ديناميكي ومرن. وهذا المثال تنتج تخطيط عمودين مع 83.34٪ / 16.66٪ (L8، L4) انقسام على شاشات كبيرة و 50٪ / 50٪ (S6، S6) انقسام على الشاشات الصغيرة:
L8 S6
L4 S6
مثال
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> انها محاولة لنفسك » مختلطة: موبايل، أقراص وأجهزة الكمبيوتر المحمولة
وهذا المثال تنتج تخطيط ثلاثة أعمدة مع / 58.34٪ / 16.66٪ (L3، L7، L2) تقسيم 25٪ على شاشات كبيرة، 50٪ / 25٪ / 25٪ (M6، M3، M3) انقسام على شاشات المتوسطة و 33.3٪ / 33.3٪ / 33.3٪ (S4، S4، S4) انقسام على الشاشات الصغيرة:
L3 M6 S4
L7 M3 S4
L2 M3 S4
مثال
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> انها محاولة لنفسك » الفرق بين W3 الصف وW3-صف الحشو
وتعرف الطبقة W3 الصف وعاء مبطن أقل، في حين يضيف الطبقة W3-صف الحشو الحشو 8px الأيمن والأيسر إلى كل عمود:
W3-المتتابعة:
W3-صف الحشو:
مثال
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_fjords.jpg"></div>
</div> انها محاولة لنفسك » باستخدام النسبة المئوية
20٪
60٪
20٪
45٪
55٪
15٪
35٪
10٪
30٪
10٪
مثال
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div> انها محاولة لنفسك » باستخدام W3-بقية
150px
راحة
75px
راحة
100px
100px
راحة
ربع
80px
راحة
ربع
ربع
ربع
35٪
راحة
المثال باستخدام بقية
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> انها محاولة لنفسك »