سبد (0)

ِDisplay در W3.CSS

کلاس های display  به شما اجازه میدهد که عناصر HTML را در یک موقعیت خاص درون عناصر دیگر نمایش دهید:

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

کلاس های W3.CSS در Display

W3.CSS  کلاس های dispaly زیر را فراهم آورده است :

کلاس تعریف
w3-display-container یک container برای  w3-display-classes
w3-display-topleft محتوا را در گوشه بالا سمت چپ  w3-display-container نمایش میدهد.
w3-display-topright محتوا را در گوشه بالا سمت راست w3-display-container نمایش میدهد.
w3-display-bottomleft محتوا را در گوشه پایین سمت چپ  w3-display-container نمایش میدهد.
w3-display-bottomright محتوا را در گوشه پایین سمت راستw3-display-container نمایش میدهد.
w3-display-left محتوا را در چپ (وسط- چپ)  w3-display-container نمایش میدهد.
w3-display-right محتوا را در راست (وسط - راست)  w3-display-container نمایش میدهد.
w3-display-middle محتوا را در میانه (وسط)  w3-display-container نمایش میدهد.
w3-display-topmiddle محتوا را در بالا -وسط  w3-display-container نمایش میدهد.
w3-display-bottommiddle محتوا را درپایین - وسط  w3-display-container نمایش میدهد.
w3-display-hover محتوا را زمانی که موس درون w3-display-containerمیرود نمایش میدهد.
w3-left یک عنصر را سمت چپ نمایش میدهد. (float: left)
w3-right یک عنصر را سمت راست قرار میدهد. (float: right)
w3-show یک عنصر را نمایش میدهد (display: block)
w3-hide یک عنصر را مخفی میکند  (display: none)

مثال های خودتان امتحان کنید

مثال

<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>
خودتان امتحان کنيد »

بعضی مثال های بالا با افزودن padding  به آن ها ،در زیر آمده است :

Top Left
Top Right
Bottom Left
Bottom Right
Left
Right
Middle
Top Middle
Bottom Middle

مثال

<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>
خودتان امتحان کنيد »

یک متن را درون یک تصویر نمایش میدهد:

Lights
Top Left
Top Right
Bottom Left
Bottom Right
Top Mid
Left
Right
Middle
Bottom Mid

مثال

<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-display-container میرود، محتوای آن را نمایش میدهد.

مثال

<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میتوانند کلاس هایanimation وeffect را برای ساخت افکت های جذاب ترکیب کنند:

Avatar
Pants

مثال

 <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-btn w3-animate-opacity">John Doe</button>
  </div>
</div>
خودتان امتحان کنيد »

بعدا دراین آموزش ،درمورد animations وeffects می آموزید.

نمایش یک Flag

کلاس های w3-display-classes میتوانند flag  ایجاد کنند :

مثال

<div class="w3-display-container w3-card-8" 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

کلاس w3-right  یک عنصر را سمت راست و کلاس  w3-left  آن را سمت چپ قرار میدهد:

w3-left
w3-right

مثال

<div class="w3-container w3-light-grey">
  <div class="w3-left w3-red">w3-left</div>
  <div class="w3-right w3-blue">w3-right</div>
</div>
خودتان امتحان کنيد »

نکته :باکلاس w3-clear میتوان flaot  ها را حذف کرد یا آن رادرون یک w3-container قرار دهید مانند مثال بالا (به صورت خودکار flaot  ها را از بین میبرد)

مخفی کردن و نمایش دادن

با کلاس های w3-show و w3-hide میتوانید یک عنصر را نمایش دهید یا مخفی کنید.

مثال

<p class="w3-show">I am shown (display: block).</p>
<p class="w3-hide">I am hidden (display: none).</p>
خودتان امتحان کنيد »

این کلاس ها غالبا برای تغییر بین نمایش یا مخفی کردن عناصر مورد استفاده قرار میگیرد:

مثال

خودتان امتحان کنيد »
نوشته شده توسط زهرا داوودی
بازدید: 3478

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه