ورود به حساب کاربری

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

ورود با کلمه عبور

ارسال کد تایید

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

یادگیری Bootstrap

تعداد بازدید : 3083

تاریخ و ساعت انتشار : دو شنبه 27 آذر 1396 22:24

کارت ها

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

Footer

کلاس .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یک رنگ آبی برای هر پیوند و یک اثر شناور اضافه می کند.

عنوانی وجود ندارد

مشاهده مثال

تصاویر کارت

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-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>

مشاهده مثال

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

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>

مشاهده مثال

دانلود فایل PDF مقاله درس بعدی درس قبلی

نظر شما