السلام علیک یا اباعبداللّه الحسین

سبد خرید (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>
خودتان امتحان کنيد »

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

مثال

خودتان امتحان کنيد »