شبكة السوائل المستجيبة W3.CSS
شبكة مستجيبة
يدعم 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-row-padding | حاوية للفئات سريعة الاستجابة ، بمساحة متروكة 8 بكسل يمينًا ويسارًا |
| w3-col | يحدد عمودًا واحدًا في شبكة متجاوبة من 12 عمودًا |
يحتوي w3-col على الفئات الفرعية التالية:
أعمدة للشاشات الصغيرة (الهواتف الذكية النموذجية):
| فصل | وصف |
|---|---|
| ق 1 | يحدد عمودًا من 12 عمودًا (العرض: 08.33٪) للشاشات الصغيرة |
| s2 | يحدد 2 من 12 عمودًا (العرض: 16.66٪) للشاشات الصغيرة |
| s3 | يحدد 3 من 12 عمودًا (العرض: 25.00٪) للشاشات الصغيرة |
| 4 س | يحدد 4 من 12 عمودًا (العرض: 33.33٪) للشاشات الصغيرة |
| s5-s11 | |
| ق 12 | يحدد 12 عمودًا من 12 (العرض: 100٪). افتراضي للشاشات الصغيرة |
أعمدة للشاشات المتوسطة (أقراص نموذجية):
| فصل | وصف |
|---|---|
| م 1 | يحدد عمودًا من 12 عمودًا (العرض: 08.33٪) للشاشات المتوسطة |
| م 2 | يحدد 2 من 12 عمودًا (العرض: 16.66٪) للشاشات المتوسطة |
| m3 | يحدد 3 من 12 عمودًا (العرض: 25.00٪) للشاشات المتوسطة |
| م 4 | يحدد 4 من 12 عمودًا (العرض: 33.33٪) للشاشات المتوسطة |
| م 5 م 11 | |
| م 12 | يحدد 12 عمودًا من 12 (العرض: 100٪). الافتراضي للشاشات المتوسطة |
أعمدة للشاشات الكبيرة (أجهزة الكمبيوتر المحمولة وأجهزة سطح المكتب النموذجية):
| فصل | وصف |
|---|---|
| ل 1 | يحدد عمودًا من 12 عمودًا (العرض: 08.33٪) للشاشات الكبيرة |
| l2 | يحدد 2 من 12 عمودًا (العرض: 16.66٪) للشاشات الكبيرة |
| l3 | يحدد 3 من 12 عمودًا (العرض: 25.00٪) للشاشات الكبيرة |
| L4 | يحدد 4 من 12 عمودًا (العرض: 33.33٪) للشاشات الكبيرة |
| L5-L11 | |
| ل 12 | يحدد 12 عمودًا من 12 (العرض: 100٪). افتراضي للشاشات الكبيرة) |
يمكن دمج الفئات أعلاه لإنشاء تخطيطات أكثر ديناميكية ومرونة.
تتطور كل فئة ، لذا إذا كنت ترغب في تعيين نفس العرض للشاشات الصغيرة والمتوسطة والكبيرة ، فأنت تحتاج فقط إلى تحديد الفئة الصغيرة . وإذا كنت تريد نفس العرض على الشاشات المتوسطة والكبيرة ، فما عليك سوى تحديد الفئة المتوسطة.
ومع ذلك ، إذا كنت تستخدم الفئات المتوسطة و / أو الكبيرة فقط ، فسيتحول العرض دائمًا إلى 100٪ على الشاشات الصغيرة.
ملاحظة: يجب أن يصل عدد الأعمدة دائمًا إلى 12 لكل صف (6 + 6 ، 3 + 3 + 6 ، 9 + 3 ، إلخ)!
عمودين متساويين
عمودين متساويين العرض (50٪ / 50٪) على جميع أحجام الشاشات:
ق 6
ق 6
مثال
<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>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</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
م 6
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-Quarter (m3) و w3-half (m6) و w3-Quarter (m3) ، وهو ما تعلمته في فصل W3.CSS Respive .
ستة أعمدة
ستة أعمدة متساوية العرض (16٪ لكل منها) على الأجهزة اللوحية وأجهزة الكمبيوتر المحمولة وأجهزة الكمبيوتر المكتبية. على الهواتف المحمولة ، سيتم تكديس الأعمدة تلقائيًا (عرض 100٪):
م 2
م 2
م 2
م 2
م 2
م 2
مثال
<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٪ (l10، l2) على الشاشات الكبيرة وتقسيم 50٪ / 50٪ (s6، s6) على الشاشات الصغيرة:
l10 s6
l2 s6
مثال
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
مختلط: موبايل وأجهزة لوحية ولابتوب
سينتج هذا المثال تخطيطًا من ثلاثة أعمدة مع تقسيم 25٪ / 58.34٪ / 16.66٪ (l3، l7، l2) على الشاشات الكبيرة ، 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 l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
الفرق بين w3-row و w3-row-padding
تحدد فئة w3-row حاوية بدون مبطن ، بينما تضيف فئة w3-row-padding مساحة 8 بكسل يسارًا ويمينًا لكل عمود:
w3- صف:
w3-row-padding:
مثال
<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_snowtops.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_snowtops.jpg"></div>
</div>
استخدام w3-rest
فئة w3-rest هي فئة قوية ومرنة تستخدم ما تبقى من عمود الشبكة.
150 بكسل
راحة
75px
راحة
100 بكسل
100 بكسل
راحة
ربع
80 بكسل
راحة
ربع
ربع
ربع
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>
يجب أن يكون العنصر الذي يستخدم class = "w3-rest" دائمًا هو العنصر الأخير في التعليمات البرمجية المصدر.
باستخدام النسبة المئوية
استخدم خاصية عرض CSS لتحديد عرض معين للأعمدة.
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>