درس سوم: دکمه‌ها و کارت‌های هوشمند

در این بخش یاد می‌گیرید که چگونه با استفاده از دکمه‌های تعاملی از کاربر “اکشن” بگیرید و با استفاده از کارت‌ها، محتوای سایت را به شکلی مدرن طبقه‌بندی کنید.

۱. دکمه‌ها: فراخوان برای اقدام (CTA)

دکمه‌ها در بوت‌استرپ فقط یک مستطیل رنگی نیستند؛ آن‌ها دارای استایل‌های دقیق برای حالت‌های Hover (نگه داشتن موس)، Focus و Active هستند. هر دکمه حداقل به دو کلاس نیاز دارد: کلاس پایه .btn و کلاس رنگی مثل .btn-primary.

الف) انواع استایل دکمه:

دکمه‌های توپر: کلاس‌هایی مثل .btn-success یا .btn-danger.
دکمه‌های شیشه‌ای (Outline): اگر می‌خواهید دکمه فقط حاشیه داشته باشد، از کلمه outline استفاده کنید: .btn-outline-primary.
اندازه‌دکمه: با کلاس .btn-lg دکمه بزرگ و با .btn-sm دکمه کوچک بسازید.

ب) دکمه‌های تمام‌عرض (Block Buttons):

در نسخه ۵ بوت‌استرپ، برای اینکه یک دکمه کل عرض ستون را بگیرد، از کلاس‌های کمکی در ظرفِ دکمه استفاده می‌کنیم:

<!– دکمه‌ای که تمام عرض را پر می‌کند –>
<div class=“d-grid gap-2”>
  <button class=“btn btn-primary”>تایید نهایی</button>
</div>

۲. کارت‌ها: ظرفی برای همه چیز

کارت (Card) یک ظرف محتوای منعطف است که شامل هدر، فوتر، تصویر و متن می‌شود. تقریباً در تمام سایت‌های مدرن، لیست مقالات یا محصولات در قالب کارت نمایش داده می‌شوند.

اجزای یک کارت کامل:

📦 .card: بدنه اصلی و کادر دور.
🖼️ .card-img-top: تصویری که در بالای کارت قرار می‌گیرد.
📝 .card-body: بخش اصلی برای قرار دادن متن و عنوان.
🏷️ .card-title: عنوان اصلی داخل کارت.
🔘 .card-text: توضیحات محصول یا مقاله.

مثال کد یک کارت محصول استاندارد:

<div class=“card” style=“width: 18rem;”>
  <img src=“product.jpg” class=“card-img-top”>
  <div class=“card-body”>
    <h5 class=“card-title”>عنوان محصول</h5>
    <p class=“card-text”>توضیحات کوتاه درباره محصول…</p>
    <a href=“#” class=“btn btn-success”>افزودن به سبد</a>
  </div>
</div>

۳. گروه‌بندی: دکمه‌های متصل به هم

گاهی نیاز دارید چند دکمه را به هم بچسبانید (مثلاً برای انتخاب زبان یا فیلتر کردن). در این حالت از کلاس .btn-group استفاده می‌کنیم.

کلاس مورد استفاده: .btn-group

⚠️ اشتباهات مهلک در طراحی دکمه و کارت:

فراموش کردن کلاس btn: اگر کلاس .btn را ننویسید و مستقیماً .btn-primary بزنید، دکمه شما هیچ استایلی نمی‌گیرد.
تصاویر نامناسب در کارت: اگر تصاویر کارت‌های شما سایزهای متفاوتی داشته باشند، قد کارت‌ها ناهماهنگ می‌شود. (راه حل: کلاس h-100 روی کارت‌ها).
تعداد زیاد دکمه‌های Primary: در هر بخش از صفحه فقط باید یک دکمه اصلی (آبی) داشته باشید تا چشم کاربر گیج نشود. بقیه را از نوع Outline یا رنگ‌های خنثی انتخاب کنید.

🔬 کارگاه عملی درس سوم: طراحی ویترین محصول

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

یک Row که در لپ‌تاپ ۳ ستون داشته باشد (col-md-4).
در هر ستون، یک Card قرار دهید.
داخل هر کارت، یک تصویر، یک عنوان و یک دکمه Outline-Success بگذارید.
دکمه باید در حالت موبایل تمام‌عرض شود (استفاده از d-grid).

نکته حرفه‌ای: برای اینکه کارت‌ها سایه زیبایی داشته باشند، کلاس shadow را به کلاس‌های کارت خود اضافه کنید.

درس سوم به پایان رسید!

حالا شما می‌توانید ساختارهای پیچیده و تعاملی بسازید. در درس چهارم به سراغ یکی از هیجان‌انگیزترین بخش‌ها یعنی فرم‌های تماس و ورودی‌های کاربر خواهیم رفت.

درس قبلی

بازگشت به دوره

درس بعدی