کارت ها در بوت استرپ 4

با سلام و خدا قوت به شما همراهان صمیمی

با مقاله کاربردی دیگری تحت عنوان “کارت ها در بوت استرپ4” در خدمتتون هستیم.

کارت ها

یک کارت در بوت استرپ4 شامل جعبه و یا باکس حاشیه داری می باشد که محتوا درون این قسمت جای می گیرید. داخل این جعبه می توان هدر، فوتر ، محتوا ، تصویر و رنگ را قرار داد.

کارت های پایه(بیسیک)

یک کارت پایه با اضافه کردن کلاس .card به تگ div  ایجاد می شود. برای نمایش محتوای درون کارت از کلاس .card-body استفاده می کنیم.

<div class="card">
  <div class="card-body">Basic card</div>
</div>

هدر و فوتر

برای اضافه کردن هدر و فوتر به کارت باید کلاس .card-header  و هم چنین .card-footer استفاده کنیم.

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

کارت های متنی

برای اضافه کردن رنگ پس زمینه به کارت ها، بوت استرپ4 این امکان را به سادگی با اضافه کردن کلاس های زیر در اختیار ما قرار می دهد.

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light

<div class="container">
  <h2>Cards with Contextual Classes</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

عنوان ، متن و لینک

برای داشتن عنوان در کارت ها می توانیم از کلاس .card-title در تگ های h کمک بگیریم. برای اضافه کردن متن مناسب حهت عنوان تایپ شده از کلاس .card-text در تگ p   استفاده می کنیم. هم چنین برای داشتن لینک هایی با رنگ آبی و هاور افکت  کلاس .card-link  را در تگ a  اضافه می کنیم.

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card Images

برای اضافه کردن تصویر به  قسمت بالا و یا پایین کارت ها از کلاس .card-img-top و .card-img-bottom استفاده می کنیم.

<div class="card" style="width:400px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

ادامه‌ی آموزش فقط برای اعضاء سایت نمایش داده میشود

عضویت رایگان

[member]

Stretched Link

برادی داشتن کارت هایی که همانند یک لینک عمل می کنند و قابلیت کلیک کردن در تمامی قسمت های کارت را دارا می باشند از کلاس .stretched-link کمک می گیریم.

<a href="#" class="btn btn-primary stretched-link">See Profile</a>

Card Image Overlays

برای نوشتن متن بر روی تصویر (نه به این صورت که متن و تصویر از هم جدا باشند) از کلاس .card-img-overlay در تگ div استفاده می شود.

<div class="card" style="width:500px">
  <img class="card-img-top" src="img_avatar1.png" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>

Card Columns

یکی دیگر از امکانات جالب و کاربردی که بوت استرپ در اختیار طراحان قرار می دهد ، امکان داشتن مجموعه ای از کارت ها در کنار یکدیگر می باشد( masonry-like grid of cards).

<div class="card-columns">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
  <div class="card bg-light">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fifth card</p>
    </div>
  </div>
  <div class="card bg-info">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the sixth card</p>
    </div>
  </div>
</div>

Card Deck

برای داشتن مجموعه کارت هایی که عرض و ارتفاع هایی برابر دارند از کلاس .card-deck استفاده می کنیم.

<div class="card-deck">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

Card Group

Card Group  از نظر بصری شبیه به Card Deck می باشد با این تفاوت که حاشیه بین کارت ها را حذف می کند. برای این کار کلاس .card-group را به تگ div اضافه می کنیم.

<div class="card-group">
  <div class="card bg-primary">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the first card</p>
    </div>
  </div>
  <div class="card bg-warning">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the second card</p>
    </div>
  </div>
  <div class="card bg-success">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the third card</p>
    </div>
  </div>
  <div class="card bg-danger">
    <div class="card-body text-center">
      <p class="card-text">Some text inside the fourth card</p>
    </div>
  </div>
</div>

امیدواریم که این مقاله هم مورد توجه تون واقع شده باشه.

برای مشاهده سایر مقاله ها از طریق لینک زیر اقدام نمایید.

صفحه بندی در بوت استرپ4

[/member]