عرض W3.CSS
تسمح لك فئات العرض بعرض عناصر HTML في مواضع محددة داخل عناصر HTML الأخرى:
أعلى اليسار
اعلى اليمين
أسفل اليسار
أسفل اليمين
اليسار
حق
وسط
فئات عرض W3.CSS
يوفر W3.CSS فئات العرض التالية:
| فصل | يعرّف |
|---|---|
| حاوية عرض w3 | حاوية لفئات العرض w3 |
| w3-display-topleft | يعرض المحتوى في الركن الأيسر العلوي من حاوية العرض w3 |
| w3-عرض-حتى برايت | يعرض المحتوى في الزاوية اليمنى العليا من حاوية العرض w3 |
| w3-display-bottomleft | يعرض المحتوى في الركن الأيسر السفلي من حاوية العرض w3 |
| W3- العرض- القاع | يعرض المحتوى في الركن الأيمن السفلي من حاوية العرض w3 |
| W3- عرض اليسار | يعرض المحتوى على يسار (يسار الوسط) لحاوية العرض w3 |
| w3-display-right | يعرض المحتوى على يمين (وسط يمين) حاوية w3-display-container |
| w3-عرض-وسط | يعرض المحتوى في منتصف (وسط) حاوية العرض w3 |
| w3-display-topmiddle | يعرض المحتوى في منتصف الجزء العلوي من حاوية العرض w3 |
| w3-display-Bottommiddle | يعرض المحتوى في منتصف الجزء السفلي من حاوية العرض w3 |
| w3 عرض موقف | يعرض المحتوى في موضع محدد في حاوية العرض w3 |
| w3-display-hover | يعرض المحتوى عند التمرير داخل حاوية العرض w3 |
| w3 اليسار | تحريك عنصر إلى اليسار (عائم: يسار) |
| W3- الحق | تحريك عنصر إلى اليمين (عائم: يمين) |
| عرض w3 | يظهر عنصرًا (عرض: كتلة) |
| w3- إخفاء | يخفي عنصرًا (عرض: لا شيء) |
| w3 موبايل | يضيف استجابة الجوال الأولى لأي عنصر. يعرض العناصر كعناصر حظر على الأجهزة المحمولة |
أمثلة
مثال
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-display-topleft">Top Left</div>
<div class="w3-display-topright">Top Right</div>
<div class="w3-display-bottomleft">Bottom Left</div>
<div class="w3-display-bottomright">Bottom Right</div>
<div class="w3-display-left">Left</div>
<div class="w3-display-right">Right</div>
<div class="w3-display-middle">Middle</div>
<div class="w3-display-topmiddle">Top Mid</div>
<div class="w3-display-bottommiddle">Bottom Mid</div>
</div>
نفس المثال أعلاه مع إضافة مساحة متروكة:
أعلى اليسار
اعلى اليمين
أسفل اليسار
أسفل اليمين
اليسار
حق
وسط
مثال
<div class="w3-display-container w3-green" style="height:300px;">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
عرض نص داخل صورة:
أعلى اليسار
اعلى اليمين
أسفل اليسار
أسفل اليمين
أعلى منتصف
اليسار
حق
وسط
منتصف القاع
مثال
<div class="w3-display-container">
<img src="img_lights.jpg" alt="Lights" style="width:100%">
<div class="w3-padding w3-display-topleft">Top Left</div>
<div class="w3-padding w3-display-topright">Top Right</div>
<div class="w3-padding w3-display-bottomleft">Bottom Left</div>
<div class="w3-padding w3-display-bottomright">Bottom Right</div>
<div class="w3-padding w3-display-topmiddle">Top Mid</div>
<div class="w3-padding w3-display-left">Left</div>
<div class="w3-padding w3-display-right">Right</div>
<div class="w3-padding w3-display-middle">Middle</div>
<div class="w3-padding w3-display-bottommiddle">Bottom Mid</div>
</div>
عرض تحوم
تعرض فئة w3-display-hover المحتوى عند التمرير داخل حاوية عرض w3 (ينتقل من المخفي إلى المعروض).
Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
مرر الماوس فوق هذا المربع!
Top Mid
Bottom Mid
مثال
<div class="w3-display-container w3-light-grey" style="height:300px;">
<div class="w3-display-topleft w3-display-hover">Top Left</div>
<div
class="w3-display-topright w3-display-hover">Top Right</div>
<div
class="w3-display-bottomleft w3-display-hover">Bottom Left</div>
<div class="w3-display-bottomright w3-display-hover">Bottom Right</div>
<div class="w3-display-left w3-display-hover">Left</div>
<div
class="w3-display-right w3-display-hover">Right</div>
<div
class="w3-display-middle">Mouse over this box!</div>
<div
class="w3-display-topmiddle w3-display-hover">Top Mid</div>
<div
class="w3-display-bottommiddle w3-display-hover">Bottom Mid</div>
</div>
يمكن دمج فئات w3-display-hover مع فئات التأثير والرسوم المتحركة لإنشاء تأثيرات تحويم رائعة:
Khaki pants, $19.99
مثال
<div class="w3-display-container w3-hover-opacity">
<img src="img_avatar.png"
alt="Avatar">
<div class="w3-display-middle w3-display-hover">
<button class="w3-button
w3-black">John Doe</button>
</div>
</div>
سوف تتعلم المزيد عن الرسوم المتحركة والتأثيرات لاحقًا في هذا البرنامج التعليمي.
Displaying A Flag
With a little bit of imagination, the w3-display-classes can be used to create a flag:
Example
<div class="w3-display-container w3-card-4" style="height:200px;width:350px">
<div class="w3-red w3-display-topleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-topright" style="width:60%;height:40%"></div>
<div class="w3-red w3-display-bottomleft" style="width:25%;height:40%"></div>
<div class="w3-red w3-display-bottomright" style="width:60%;height:40%"></div>
</div>
Floating Classes
The w3-left class floats an element to the left, the w3-right class floats an element to the right:
w3-left
w3-right
Example
<div class="w3-bar w3-light-grey">
<div class="w3-left
w3-red">w3-left</div>
<div class="w3-right w3-blue">w3-right</div>
</div>
Note: Clear floats with the w3-clear class or put them inside a w3-container, like in the example above (clears floats automatically).
Hide and Show
Force an element to be shown or hidden with the w3-show or w3-hide class.
Example
<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
These classes are often used to toggle between hiding and showing elements:
Example
Hello!
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
<button class="w3-button w3-mobile">Link</button>