نحوه استفاده از تصاویر و کاردها در Bootstrap

تصویر یکی از مهمترین عناصر موجود در صفحات وب می باشد که استفاده صحیح از آنها می تواند زیبایی سایت را دو چندان کند.

تصاویر

برای استفاده از تصاویر ابتدا می بایست یک پوشه در مجاورت صفحه ایجاد کرده و تصاویر خود را درون آن قرار دهید. سپس با استفاده از تگ img می توانید آنها را در صفحه قرار دهید.

img src="/img/image-1.jpg" />

در صورت نیاز می توانید مقاله مربوط به نحوه استفاده از تصاویر در صفحات وب را مطالعه نمایید.

در Bootstrap کلاس های زیر جهت استایل دهی به تصاویر مورد استفاده قرار می گیرند:

  • rounded: گوشه گرد کرد کردن تصاویر.
  • rounded-circle: تبدیل تصاویر به شکل دایره ای.
  • img-thumbnail: ایجاد یک حاشیه مناسب برای تصاویر.

برای اختصاص کلاس های فوق به تصاویر می توانید به شکل زیر عمل کنید.

<div class="container">
  <h2>استایل دهی به تصاویر در بوت استرپ</h2>
  <img src="/img/image-1.jpg" />
  <img src="/img/image-2.jpg" class="rounded" />
  <img src="/img/image-3.jpg" class="rounded-circle" />
  <img src="/img/image-4.jpg" class="img-thumbnail" />
</div>

حاصل اجرای کدهای فوق به شکل زیر خواهد بود.

آموزش بوت استرپ - نحوه استفاده از تصاویر

کاردها

در Bootstrap از کادرها برای نمایش تصاویر به همراه توضیحات استفاده می شود. اگر قصد داشته باشید لیستی از محصولات که شامل تصویر و متن و می باشد در صفحه خود استفاده نمایید، کادرها گزینه مناسبی برای این موضوع می باشند.

هر کادر از سه بخش اصلی و به شکل زیر تشکیل شده است:

  • card-header: عنوان
  • card-body: بدنه اصلی
  • card-footer: پانوشته

برای استفاده از کاردها لازم است که عناصر فوق درون عنصری با کلاس card قرار گیرند.

<div class="card">
  <div class="card-header">عنوان</div>
  <div class="card-body">متن اصلی</div>
  <div class="card-footer">پانوشته</div>
</div>

همچنین اگر قصد داشته باشید از تم های رنگی برای کاردها استفاده نمایید می توانید کلاس های زیر را به آن اختصاص دهید.

  • bg-primary
  • bg-succes
  • bg-info
  •  bg-warning
  • .bg-danger
  • bg-secondary
  •  bg-dark
  • bg-light
<div class="card bg-primary text-white">
  <div class="card-header">Primary</div>
</div>
<div class="card bg-success text-white">
  <div class="card-header">Sucess</div>
</div>
<div class="card bg-info text-white">
  <div class="card-header">Info</div>
</div>
<div class="card bg-warning text-white">
  <div class="card-header">Warning</div>
</div>
<div class="card bg-danger text-white">
  <div class="card-header">Danger</div>
</div>
<div class="card bg-light">
  <div class="card-header">Light</div>
</div>
<div class="card bg-dark text-white">
  <div class="card-header">Dark</div>
</div>

خروجی کدهای فوق به شکل زیر خواهد بود.

آموزش بوت استرپ - کاردهای رنگی

در صورتیکه بدنه کارد حاوی چند بخش اطلاعات باشد آنها با کلاس های card-title و card-text می توان جدا نمود.

<div class="card-body">
  <h3 class="card-title">آکادمی بنو</h3>
  <p class="card-text">آموزش برنامه نویسی و طراحی سایت</p>
  <a href="#" class="btn btn-primary">اطلاعات بیشتر</a>
</div>

برای افزودن تصویر نیز می توانید از تگ img در بالای عنوان استفاده کرده و به آن کلاس card-img-top اختصاص دهید.

<div class="card" style="width: 400px;">
  <div class="card-body">
    <img class="card-img-top" src="/img/image-1.jpg" alt="Card image" />
    <h3 class="card-title">آکادمی بنو</h3>
    <p class="card-text">آموزش برنامه نویسی و طراحی سایت</p>
    <a href="#" class="btn btn-primary">اطلاعات بیشتر</a>
  </div>
</div>

نحوه نمایش کاردها به شکل زیر می باشد.

آموزش بوت استرپ - کاردهای همراه با تصاویر