bootstrap

دکمه در Bootstrap

دکمه در Bootstrap
07 مه

دکمه در Bootstrap فراتر از عناصر تعاملی ساده هستند؛ آن‌ها دروازه‌هایی برای اقدامات کاربر، نشانه‌های بصری برای جلب توجه و پایه‌های یک رابط کاربری کارآمد و شهودی محسوب می‌شوند. این راهنمای جامع به بررسی عمیق دکمه‌های Bootstrap می‌پردازد و سبک‌ها، اندازه‌ها، وضعیت‌ها، ویژگی‌های پیشرفته، ملاحظات دسترسی‌پذیری و استراتژی‌های خلاقانه پیاده‌سازی آن‌ها را مورد بررسی قرار می‌دهد.

سبک‌ها و معنای دکمه‌ها

Bootstrap مجموعه‌ای غنی از سبک‌های از پیش تعریف‌شده برای دکمه‌ها ارائه می‌دهد که هر کدام با رنگ‌ها، حاشیه‌ها و نحوه نمایش متن خاص خود، هدف و وزن بصری متفاوتی را منتقل می‌کنند. این سبک‌ها با افزودن کلاس‌های خاص به کلاس پایه .btn اعمال می‌شوند:

  • .btn-primary: برای اقدامات اصلی و مهم‌ترین دکمه در صفحه.
  • .btn-secondary: برای اقدامات ثانویه که اهمیت کمتری دارند.
  • .btn-success: نشان‌دهنده نتایج موفقیت‌آمیز یا اقدامات مثبت.
  • .btn-danger: برای هشدار درباره اقدامات مخرب یا منفی.
  • .btn-warning: برای هشدار یا نکات مهم.
  • .btn-info: برای انتقال اطلاعات یا اقدامات خنثی.
  • .btn-light: پس‌زمینه روشن، معمولاً برای اقدامات کم‌اهمیت‌تر.
  • .btn-dark: پس‌زمینه تیره برای کنتراست بالا.
  • .btn-link: ظاهر دکمه را شبیه به یک لینک HTML استاندارد می‌کند
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Buttons</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Buttons</h2>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-secondary">Secondary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-light">Light</button>
        <button type="button" class="btn btn-dark">Dark</button>
        <button type="button" class="btn btn-link">Link</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

سبک‌های دکمه با حاشیه (.btn-outline-*)

برای سبک‌های کمتر برجسته بصری، Bootstrap نسخه‌های حاشیه‌دار از دکمه‌های زمینه‌ای ارائه می‌دهد. این دکمه‌ها دارای پس‌زمینه شفاف و حاشیه و متن رنگی هستند:

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

تغییر اندازه دکمه‌ها (.btn-lg, .btn-sm)

Bootstrap کلاس‌هایی برای تنظیم اندازه دکمه‌ها در زمینه‌ها و سلسله‌مراتب بصری مختلف ارائه می‌دهد:

  • .btn-lg: برای دکمه‌های بزرگ‌تر و برجسته‌تر.
  • .btn-sm: برای دکمه‌های کوچک‌تر و فشرده‌تر.
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>

دکمه‌های تمام‌عرض (.d-grid .gap-2 .col-6 .mx-auto)

با استفاده از ابزارهای گرید Bootstrap، می‌توانید به‌راحتی دکمه‌هایی ایجاد کنید که عرض کامل ظرف والد خود را اشغال کنند:

<div class="d-grid gap-2 col-6 mx-auto">
    <button class="btn btn-primary" type="button">Full width button</button>
    <button class="btn btn-secondary" type="button">Full width button</button>
</div>

دکمه‌های غیرفعال و فعال

Bootstrap نشانه‌های بصری و عملکردی برای وضعیت‌های مختلف دکمه‌ها فراهم می‌کند:

  • دکمه‌های غیرفعال: با افزودن ویژگی disabled، تعامل با دکمه غیرفعال شده و به‌صورت بصری نشان داده می‌شود که دکمه در حال حاضر فعال نیست.
<button type="button" class="btn btn-primary" disabled>Primary button</button>
<button type="button" class="btn btn-secondary" disabled>Secondary button</button>
  • دکمه‌های فعال: با افزودن کلاس .active، به‌صورت بصری نشان داده می‌شود که دکمه در حال حاضر فشرده یا انتخاب شده است (اغلب برای دکمه‌های تغییر وضعیت استفاده می‌شود). ممکن است برای مدیریت وضعیت .active به‌صورت پویا به JavaScript نیاز داشته باشید.
<a href="#" class="btn btn-primary active" role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary" role="button">Link</a>

گروه‌های دکمه (.btn-group, .btn-group-*)

با استفاده از کلاس‌های .btn-group و .btn-group-vertical، می‌توانید دکمه‌های مرتبط را به‌صورت افقی یا عمودی گروه‌بندی کنید. برای کنترل اندازه کل گروه، از کلاس‌های تغییر اندازه مانند .btn-group-lg و .btn-group-sm استفاده کنید.

<div class="btn-group" role="group" aria-label="Basic example">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
    <button type="button" class="btn btn-primary">Button</button>
</div>

دکمه‌های کشویی (.dropdown)

برای ارائه فهرستی از اقدامات مرتبط، منوهای کشویی را با دکمه‌ها ادغام کنید. از کلاس .dropdown-toggle و ویژگی data-bs-toggle="dropdown" برای فعال‌سازی عملکرد کشویی استفاده کنید

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

دکمه‌های تقسیم‌شده (.dropdown)

برای ایجاد دکمه‌های کشویی تقسیم‌شده که در آن دکمه اصلی یک اقدام اولیه را انجام می‌دهد و کشویی گزینه‌های اضافی را ارائه می‌دهد، از ساختار زیر استفاده کنید:

<div class="btn-group">
    <button type="button" class="btn btn-primary">Action</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
        <span class="visually-hidden">Toggle Dropdown</span>
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
</div>

ملاحظات دسترسی‌پذیری

اطمینان از دسترسی‌پذیری دکمه‌ها بسیار مهم است:

  • HTML معنایی: از عناصر <button> برای اقدامات و عناصر <a> با استایل دکمه برای ناوبری استفاده کنید.
  • ویژگی type: همیشه ویژگی type را در عناصر <button> مشخص کنید (مانند submit، reset، button).
  • برچسب‌های واضح: اطمینان حاصل کنید که متن دکمه به‌وضوح اقدام آن را توصیف می‌کند.
  • aria-label: برای دکمه‌هایی با آیکون یا محتوای غیرمتنی، از aria-label برای ارائه متن توصیفی جایگزین برای صفحه‌خوان‌ها استفاده کنید.
  • aria-disabled=”true”: هنگامی که دکمه غیرفعال است، aria-disabled="true" را تنظیم کنید.
  • ناوبری با صفحه‌کلید: دکمه‌ها به‌طور ذاتی قابل فوکوس هستند و می‌توان آن‌ها را با صفحه‌کلید (کلید Space یا Enter) فعال کرد.

استراتژی‌های منحصربه‌فرد پیاده‌سازی

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

  • نمایش/پنهان‌سازی محتوا: با استفاده از جاوااسکریپت برای نشان دادن یا مخفی کردن عناصر.
  • فیلترگذاری پویا: اعمال فیلتر روی فهرست‌ها یا نمایش داده‌ها.
  • کنترل‌های تعاملی نقشه: بزرگ‌نمایی، جابه‌جایی یا تغییر لایه‌های نقشه.
  • پخش/توقف رسانه: کنترل پخش صدا یا ویدیو.
  • اجرای انیمیشن یا انتقال: افزودن جلوه‌های بصری به تعاملات کاربر.
  • ناوبری مرحله به مرحله: راهنمایی کاربران در فرآیندهای چند مرحله‌ای.

بهترین روش‌ها

  • با هدف استفاده کنید: سبک دکمه‌ای را انتخاب کنید که اهمیت و نتیجه احتمالی عمل را به‌روشنی نشان دهد.
  • یکپارچگی را حفظ کنید: از سبک دکمه‌ای یکنواخت در سراسر اپلیکیشن خود استفاده کنید.
  • بازخورد واضح فراهم کنید: اطمینان حاصل کنید که کاربران هنگام تعامل با دکمه‌ها بازخورد بصری دریافت می‌کنند (مانند افکت‌ها هنگام حرکت موس یا وضعیت فعال).
  • به محل قرارگیری توجه کنید: دکمه‌های عملیاتی را به‌صورت منطقی در چیدمان قرار دهید.
  • آزمایش جامع انجام دهید: عملکرد و استایل دکمه‌ها را در مرورگرها و دستگاه‌های مختلف بررسی کنید.

سازمان‌دهی عملکرد کاربر با دکمه در Bootstrap

دکمه در Bootstrap یکی از اجزای بنیادی در ساخت تجربه‌های وب تعاملی و جذاب هستند. با درک سبک‌ها، اندازه‌ها، وضعیت‌ها و ویژگی‌های پیشرفته آن‌ها، می‌توانید رابط‌های شهودی بسازید که کاربران را راهنمایی کرده و تعاملاتی روان و مؤثر فراهم آورند. همیشه دسترسی‌پذیری را در اولویت قرار دهید و خلاقانه بیندیشید تا از دکمه‌ها برای ارتقاء عملکرد و کاربرپسندی اپلیکیشن‌های وب خود استفاده کنید — بسیار فراتر از یک کلیک ساده.

جدیدتر گروه‌های دکمه Bootstrap یا Button Group
بازگشت به لیست
قدیمی تر Badgeهای Bootstrap یا نشان‌ها در بوت استرپ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *