کارت ها در Bootstrap ورژن 4

کارت ها

image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

کارت ساده

یک کارت اساسی با کلاس .card ایجاد شده است، و محتوا درون کارت دارای کلاس .card-body است:

Basic card

کارت ساده
<div class="card">
  <div class="card-body">Basic card</div>
</div>
مشاهده مثال

اگر با بوت استرپ 3 آشنا هستید، کارتها جایگزین پانل قدیمی، wells و ریز عکسها می شوند.

سرتیتر و پاورقی

Header
Content

کلاس .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>
مشاهده مثال

کارت های متنی

برای اضافه کردن یک رنگ پس زمینه کارت، از کلاسهای متنی استفاده کنید (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark.bg-light.)

Basic card
 
Primary card
 
Success card
 
Info card
 
Warning card
 
Danger card
 
Secondary card
 
Dark card
 
Light card

کارت متنی رنگی
<div class="container">
  <h2>Panels 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

Some example text. Some example text.

Card link Another link

استفاده از .card-title برای اضافه کردن عناوین کارت به هر عنصر عنوان. کلاس .card-text برای حذف حاشیه های پایین برای یک عنصر <p> استفاده می شود، اگر آخرین فرزند در بلوک کارت باشد. کلاس. .card-linkیک رنگ آبی برای هر پیوند و یک اثر شناور اضافه می کند.

عنوانی وجود ندارد
مشاهده مثال

تصاویر کارت

Card image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Jane Doe

Some example text some example text. Jane Doe is an architect and engineer

See Profile
Card image

اضافه کردن .card-image-top یا .card-image-bottom به <img> برای قرار دادن آن در بالا یا پایین در داخل کارت کاربرد دارد توجه داشته باشید که ما تصویر را خارج از بلوک کارت اضافه کردیم تا کل عرض را بچرخانیم:

تصویر کارت ها
<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>
مشاهده مثال

پوشش تصویر کارت

Card image

John Doe

Some example text some example text. Some example text some example text. Some example text some example text. Some example text some example text.

See Profile

یک تصویر را به یک پس زمینه کارت تبدیل کنید و از اضافه کردن .Card-img-overlay برای اضافه کردن متن در بالای تصویر استفاده کنید.

پوشش تصویر کارت
<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>
مشاهده مثال

 

نظر شما

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران بپیوندید

   
   
عضویت
پیام تستی برای وبساز