استجابة W3.CSS المضمنة
يتضمن W3.CSS نظام شبكة متنقل سريع الاستجابة للتعامل مع التخطيط:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50 بكسل
راحة
1/4
راحة
100 بكسل
45 بكسل
راحة
فئات مستجيبة لـ W3.CSS
نظام شبكة W3.CSS سريع الاستجابة ، وستتم إعادة ترتيب الأعمدة تلقائيًا حسب حجم الشاشة:
| فصل | وصف |
|---|---|
| w3 نصف | تحتل نصف النافذة (على الشاشات المتوسطة والكبيرة) |
| w3 الثالث | تحتل ثلث النافذة (على الشاشات المتوسطة والكبيرة) |
| w3-twothird | يشغل ثلثي النافذة (على الشاشات المتوسطة والكبيرة) |
| w3 الربع | يشغل ربع النافذة (على الشاشات المتوسطة والكبيرة) |
| w3 - ثلاثة أرباع | تحتل 3/4 مساحة النافذة (على شاشات متوسطة وكبيرة) |
| w3- الراحة | تحتل باقي عرض العمود |
| w3-col | يحدد عمودًا واحدًا في شبكة متجاوبة من 12 عمودًا |
| w3 موبايل | يضيف استجابة الجوال أولاً إلى خلية (عمود). يعرض العناصر كعناصر حظر على الأجهزة المحمولة. |
يجب وضع الفئات المستجيبة أعلاه داخل فئة w3-row (أو فئة w3-row-padding ) لتكون مستجيبة تمامًا.
| فصل | وصف |
|---|---|
| w3- صف | حاوية للفئات سريعة الاستجابة ، بدون حشوة |
| w3-row-padding | حاوية للفئات سريعة الاستجابة ، بمساحة متروكة 8 بكسل يمينًا ويسارًا |
| w3- المحتوى | حاوية للمحتوى المتمركز بحجم ثابت |
| w3- إخفاء-صغير | يخفي المحتوى على الشاشات الصغيرة (أقل من 601 بكسل) |
| w3- إخفاء-وسط | يخفي المحتوى على الشاشات المتوسطة |
| w3- إخفاء-كبير | يخفي المحتوى على الشاشات الكبيرة (أكبر من 992 بكسل) |
| L1 - L12 | أحجام متجاوبة للشاشات الكبيرة |
| م 1 - م 12 | أحجام متجاوبة للشاشات المتوسطة |
| s1 - s12 | أحجام متجاوبة للشاشات الصغيرة |
فئة w3-half
عرض فئة w3-half هو 1/2 من العنصر الأصلي (النمط = "العرض: 50٪").
على الشاشات الأصغر من 601 بكسل ، يتم تغيير حجمها إلى 100٪.
w3 نصف
w3 نصف
مثال
<div class="w3-row">
<div class="w3-half w3-container w3-green">
<h2>w3-half</h2>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
</div>
</div>
فئة w3-third
عرض الفئة w3-third هو 1/3 من العنصر الأصل (النمط = "العرض: 33.33٪").
على الشاشات الأصغر من 601 بكسل ، يتم تغيير حجمها إلى 100٪.
w3 الثالث
w3 الثالث
w3 الثالث
مثال
<div class="w3-row">
<div class="w3-third w3-container w3-green">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
<div class="w3-third w3-container">
<h2>w3-third</h2>
</div>
</div>
فئة w3-twothird
عرض الفئة w3-twothird هو 2/3 من العنصر الأصل (النمط = "العرض: 66.66٪").
على الشاشات الأصغر من 601 بكسل ، يتم تغيير حجمها إلى 100٪.
w3-twothird
w3 الثالث
مثال
<div class="w3-row">
<div class="w3-green w3-container
w3-twothird">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div>
فئة w3-Quarter
عرض فئة w3-Quarter هي 1/4 من العنصر الأصلي (النمط = "العرض: 25٪").
على الشاشات الأصغر من 601 بكسل ، يتم تغيير حجمها إلى 100٪.
w3 الربع
w3 الربع
w3 الربع
w3 الربع
مثال
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
فئة w3-threequarter
عرض فئة w3-threequarter هو 3/4 من العنصر الأصلي (النمط = "العرض: 75٪").
على الشاشات الأصغر من 601 بكسل ، يتم تغيير حجمها إلى 100٪.
w3 - ثلاثة أرباع
w3 الربع
مثال
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div>
مجموعات
w3 الربع
w3 نصف
w3 الربع
w3 الربع
w3 الربع
w3 نصف
w3 نصف
w3 الربع
w3 الربع
صفوف متداخلة
مثال: w3-half داخل w3-half
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div>
الأعمدة باستخدام الراحة
تحدد فئة w3-col عمودًا واحدًا في شبكة استجابة مكونة من 12 عمودًا.
ستشغل فئة w3-rest باقي العرض:
أنا 150 بكسل
أنا البقية
مثال
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>I
am 150px</p></div>
<div class="w3-rest
w3-green"><p>I am the rest</p></div>
</div>
الأعمدة باستخدام النسبة المئوية
يمكنك أيضًا استخدام خاصية عرض CSS لتعيين العرض بالنسبة المئوية:
20٪
60٪
20٪
مثال
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div>
فئة المحتوى w3
تحدد فئة المحتوى w3 حاوية لمحتوى مركز بحجم ثابت. استخدم خاصية CSS max-width لتجاوز العرض الافتراضي (980 بكسل).
مثال
<body class="w3-content" style="max-width:500px">
page content...
</body>
w3-row مقابل w3-row-padding
تحدد فئة w3-row حاوية بدون حشوة ، بينما تضيف فئة w3-row-padding مساحة 8 بكسل يسارًا ويمينًا لكل عمود:
w3- صف:
w3 الثالث
w3 الثالث
w3 الثالث
w3-row-padding:
w3 الثالث
w3 الثالث
w3 الثالث
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 الهوامش اليمنى واليسرى من عنصر. غالبًا ما تستخدم هذه الفئة لتمديد صف مبطن:
مثال على امتداد w3:
مثال بدون امتداد w3:
مثال
<div class="w3-row-padding w3-section w3-stretch">
<div
class="w3-col s4">
<img src="img_nature_wide.jpg">
</div>
<div class="w3-col s4">
<img src="img_snow_wide.jpg">
</div>
<div class="w3-col s4">
<img
src="img_mountains_wide.jpg">
</div>
</div>
إظهار متجاوب / إخفاء
The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.
Note: Resize the browser window to understand how it works:
Example
<div class="w3-container w3-hide-small w3-red">
<p>w3-hide-small will
be hidden on small screens (phones)</p>
</div>
<div
class="w3-container w3-hide-medium w3-green">
<p>w3-hide-medium will
be hidden on medium screens (tablets)</p>
</div>
<div
class="w3-container w3-hide-large w3-blue">
<p>w3-hide-large will be
hidden on large screens (laptops/desktop)</p>
</div>
The w3-mobile Class
The w3-mobile class adds mobile-first responsiveness to any element.
It adds display:block and width:100% to an element on screens that are less than 600px wide.
Example
<a class="w3-button w3-mobile" href="#">Link</a>
Screen Resolutions
The built-in responsiveness of W3.CSS uses the DP size of a screen.
W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.
Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.
Below is a list of typical device resolutions and reported DP sizes:
Iphone 4
Resolution
640 x 960
DP
320 x 480
Iphone 5
Resolution
640 x 1136
DP
320 x 528
Iphone 6
Resolution
750 x 1334
DP
375 x 667
Iphone 6s
Resolution
1080 x 1920
DP
414 x 736
Galaxy S6
Resolution
1440 x 2560
DP
360 x 640
Note 4
Resolution
1440 x 2560
DP
400 x 853
Nexus 6
Resolution
1440 x 2560
DP
411 x 731
iPad Mini
Resolution
768 x 1024
DP
768 x 1024
iPad
Resolution
1536 x 2048
DP
768 x 1024
Typical Laptop
Resolution
1366 x 768
DP
1366 x 768
Typical Desktop
Resolution
1920 x 1080
DP
1920 x 1080
12 Column Responsive Fluid Grid
W3.CSS also supports an advanced 12 column responsive fluid grid.
Resize the page to see the effect!
This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.
This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.
You will learn a lot more about the fluid grid in a later chapter.