فئات تستجيب
يشمل 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
50px
راحة
1/4
راحة
100px
45px
راحة
نظام الشبكة W3.CSS قادر على الاستجابة، وسوف الأعمدة إعادة ترتيب تلقائيا تبعا لحجم الشاشة:
| صف مدرسي | وصف |
|---|---|
| W3-نصف | يحتل 1/2 من النافذة (على الشاشات المتوسطة والكبيرة) |
| ثالثا-W3 | يحتل 1/3 من النافذة (على الشاشات المتوسطة والكبيرة) |
| W3-twothird | يحتل 2/3 من النافذة (على الشاشات المتوسطة والكبيرة) |
| ربع W3 | يحتل 1/4 من النافذة (على الشاشات المتوسطة والكبيرة) |
| W3-threequarter | يحتل 3/4 من النافذة (على الشاشات المتوسطة والكبيرة) |
| W3-بقية | تعرف بقية على التوالي |
| W3-كولونيل | يعرف عمود في 12 عمود السائل استجابة شبكة (أكثر في فصل لاحق) |
الصفوف استجابة
يجب أن توضع الطبقات تستجيب داخل الصف W3 لتكون متجاوبة تماما.
| صف مدرسي | وصف |
|---|---|
| W3 الصف | يحدد وعاء والحشو أقل لفئات الاستجابة. |
| W3-صف الحشو | يحدد وعاء مبطن لفئات الاستجابة. |
في نصف W3 الفئة
العرض من فئة نصف W3 هو 1/2 من العنصر الأصلي (على غرار = "العرض: 50٪").
على شاشات * الصغيرة هو تغيير حجم إلى 100٪.
W3-نصف
W3-نصف
مثال
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> انها محاولة لنفسك » الفئة الثالثة-W3
عرض الطبقة الثالثة-W3 هو 1/3 من العنصر الأصلي (على غرار = "العرض: 33.33٪").
على شاشات * الصغيرة هو تغيير حجم إلى 100٪.
ثالثا-W3
ثالثا-W3
ثالثا-W3
المثال باستخدام الثالث-W3
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> انها محاولة لنفسك » فئة-W3 twothird
عرض الطبقة W3-twothird هو 2/3 من العنصر الأصلي (على غرار = "العرض: 66.66٪").
على شاشات * الصغيرة هو تغيير حجم إلى 100٪.
W3-twothird
ثالثا-W3
المثال باستخدام الثالث-W3
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> انها محاولة لنفسك » فئة ربع W3
العرض من فئة الربع W3 هو 1/4 من العنصر الأصلي (على غرار = "العرض: 25٪").
على شاشات * الصغيرة هو تغيير حجم إلى 100٪.
ربع W3
ربع 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٪").
على شاشات * الصغيرة هو تغيير حجم إلى 100٪.
ربع W3
ربع W3
المثال باستخدام W3-threequarter
<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 داخل W3-نصف
<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> انها محاولة لنفسك » الأعمدة عن طريق الراحة
أنا 150px
أنا بقية
المثال باستخدام W3-بقية
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> انها محاولة لنفسك » الأعمدة عن طريق النسبة المئوية
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-محتوى وعاء لمحتوى ثابت حجم محورها:
الفرق بين 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> انها محاولة لنفسك » 12 عمود شبكة السائل استجابة
كما يدعم W3.CSS متقدمة 12 عمود السائل استجابة الشبكة.
تغيير حجم الصفحة لرؤية تأثير!
وهذا جزء تحتل 12 عمودا على الشاشة الصغيرة، 4 على شاشة متوسطة، و 3 على شاشة كبيرة.
وهذا جزء تحتل 12 عمودا على الشاشة الصغيرة، 8 على شاشة متوسطة، و 9 على شاشة كبيرة.
سوف تتعلم المزيد عن شبكة السوائل في فصل لاحق.
* دقة الشاشة
استجابة المدمج في لW3.CSS تستخدم حجم موانئ دبي من الشاشة.
سوف W3.CSS علاج اي فون 6 مع قرار من 750 س 1334 بكسل كما في الشاشة الصغيرة من 375 س 667 بكسل.
الشاشات الصغيرة أقل من 601 بكسل موانئ دبي، شاشات المتوسطة هي أقل من 993 بكسل موانئ دبي.
وفيما يلي قائمة من قرارات جهاز النموذجية وذكرت أحجام موانئ دبي:
اي فون 4
قرار
640 × 960
موانئ دبي
320 × 480
ايفون 5
قرار
640 x 1136
موانئ دبي
320 × 528
أيفون 6
قرار
750 x 1334
موانئ دبي
375 س 667
اي فون 6S
قرار
1080 x 1920
موانئ دبي
414 س 736
غالاكسي S6
قرار
1440 x 2560
موانئ دبي
360 × 640
ملاحظة 4
قرار
1440 x 2560
موانئ دبي
400 س 853
نيكزس 6
قرار
1440 x 2560
موانئ دبي
411 س 731
باد البسيطة
قرار
768 x 1024
موانئ دبي
768 x 1024
اى باد
قرار
1536 x 2048
موانئ دبي
728 x 1024
أجهزة الكمبيوتر المحمول نموذجي
قرار
1366 x 768
موانئ دبي
1366 x 768
سطح المكتب النموذجي
قرار
1920 x 1080
موانئ دبي
1920 x 1080