آموزش کادر واکنشگرا

چاپ
 

کلاس های  کارت در  W3.CSS:

کلاس های زیر  برای نمایش کارت هایی مشابه کاغذ، مورد استفاده  قرارمیگیرند:

Class Defines
w3-card با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با مرزها)
w3-card-2 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 2px سایه مرزی)
w3-card-4 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 4px سایه مرزی)
w3-card-8 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 8px سایه مرزی)
w3-card-12 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 12px  سایه مرزی )
w3-card-16 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 16px سایه مرزی)
w3-card-24 با استفاده از این کلاس یکContainer برای عنصر، در نظر گرفته می شود. (با 24px سایه مرزی)

کارت های رنگی

 برای نمایش کارت های رنگی ، می توانیداز کلاس w3-color استفاده نمایید:

w3-card-2

w3-card-4

w3-card-8

مثال (کارت های سفید)

<div class="w3-card">
  <p>w3-card</p>
</div>
خودتان امتحان کنيد »

مثال (کارت های زرد)

<div class="w3-card w3-yellow">
  <p>w3-card</p>
</div>
خودتان امتحان کنيد »

محتوای کارت

سربرگ

متن...

پاصفحه

 container ها را درون کارت ها می افزاییم تا بخش های متفاوتی را ایجاد کنیم:

مثال

<div class="w3-card-4">

<header class="w3-container w3-blue">
  <h1>Header</h1>
</header>

<div class="w3-container">
  <p>Lorem ipsum...</p>
</div>

<footer class="w3-container w3-blue">
  <h5>Footer</h5>
</footer>

</div>
خودتان امتحان کنيد »

کارت عکس

مثال

<div class="w3-card-12">
  <img src="/img_fjords.jpg" alt="Norway">
  <div class="w3-container w3-center">
    <p>The Troll's tongue in Hardanger, Norway</p>
  </div>
</div>
خودتان امتحان کنيد »

افکت Hover

کلاس w3-hover-shadow یک افکت سایه دار با رفتن  موس روی عنصر اجرا میکند- با رفتن موس روی عنصر،آن را مانند یک کارت میکند(مانندسبک دهی w3-card-4)

 با موس روی من بیا!

مثال

<div class="w3-green w3-hover-shadow w3-center">
  <p>Hover over me!</p>
</div>
خودتان امتحان کنيد »

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

مثال

<div class="w3-card-8 w3-dark-grey">

<div class="w3-container w3-center">
  <h3>Friend request</h3>
  <img src="/img_avatar3.png" alt="Avatar" style="width:80%">
  <h5>John Doe</h5>

  <button class="w3-btn w3-green">Accept</button>
  <button class="w3-btn w3-red">Decline</button>
</div>

</div>
خودتان امتحان کنيد »

 

مثال

<div class="w3-card-4">

<header class="w3-container w3-light-grey">
  <h3>John Doe</h3>
</header>

<div class="w3-container">
  <p>1 new friend request</p>
  <hr>
  <img src="/img_avatar3.png" alt="Avatar" class="w3-left w3-circle">
  <p>President/CEO at Mighty Schools...</p>
</div>

<button class="w3-btn-block w3-dark-grey">+ Connect</button>

</div>
خودتان امتحان کنيد »

ویدجت آب و هوا

مثال

<div class="w3-card-12">
  <div class="w3-display-container w3-text-white">
    <img src="/img_london.jpg" alt="Lights" style="width:100%">
    <div class="w3-xlarge w3-display-bottomleft w3-padding">LONDON 60&deg; F</div>
  </div>
  <div class="w3-row">
    <div class="w3-third w3-center">
      <h3>MON</h3>
      <img src="/img_weather_sun.jpg" alt="sun">
    </div>
    <div class="w3-third w3-center">
      <h3>TUE</h3>
      <img src="/img_weather_cloud.jpg" alt="cloud">
    </div>
    <div class="w3-third w3-center w3-margin-bottom">
      <h3>WED</h3>
      <img src="/img_weather_clouds.jpg" alt="clouds">
    </div>
  </div>
</div>
خودتان امتحان کنيد »