آموزش نشان ها در بوت استرپ: از طراحی شمارنده ها تا استایل دهی حرفه ای

0 دیدگاه

در این بخش به آموزش نشان ها در بوت استرپ و کلاس های مربوط به آن میپردازیم. نشان ها ابزار مناسبی برای نمایش اطلاعات مهم به صورت برجسته در صفحات وب هستند. برای مثال، می‌توان از آن ها کنار عنوان ها، هشدارها یا برای نمایش تعداد اعلان ها استفاده کرد.

نشان ها در بوت استرپ معمولاً به صورت اعداد یا شمارنده اعلان ظاهر می‌شوند و نشان می‌دهند چند مورد با یک لینک یا عنصر خاص در ارتباط هستند.

نشان ها در بوت استرپ

برای اینکه اندازه نشان ها متناسب با اندازه عنصر والد تنظیم شود، از مقیاس فونت نسبی و واحد em استفاده می‌شود. از نسخه ۵ به بعد، دیگر امکان استفاده از حالت های هاور (hover) یا فوکوس (focus) برای نشان هایی که درون لینک های صفحه قرار دارند وجود ندارد.

در ادامه یک مثال مشاهده می‌کنید که نحوه ساخت نشان های درون خطی (inline badges) را با استفاده از بوت استرپ نمایش می‌دهد. این مثال به شما کمک می‌کند تا درک بهتری از نحوه استفاده از نشان ها در طراحی رابط کاربری به دست آورید.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <h1>Sample heading <span class="badge bg-secondary">New</span></h1>
  <h2>Sample heading <span class="badge bg-secondary">Offer</span></h2>
  <h3>Sample heading <span class="badge bg-secondary">New</span></h3>
  <h4>Sample heading <span class="badge bg-secondary">Offer</span></h4>
  <h5>Sample heading <span class="badge bg-secondary">New</span></h5>
  <h6>Sample heading <span class="badge bg-secondary">Offer</span></h6>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<body>

<h1>Sample heading <span class="badge bg-secondary">New</span></h1>

<h2>Sample heading <span class="badge bg-secondary">Offer</span></h2>

<h3>Sample heading <span class="badge bg-secondary">New</span></h3>

<h4>Sample heading <span class="badge bg-secondary">Offer</span></h4>

<h5>Sample heading <span class="badge bg-secondary">New</span></h5>

<h6>Sample heading <span class="badge bg-secondary">Offer</span></h6>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نشان ها در دکمه

می‌توان از نشان ها در کنار لینک ها یا دکمه ها استفاده کرد تا شمارنده‌ای از وضعیت یا تعداد آیتم ها نمایش داده شود. نحوه استایل‌دهی به نشان ها باعث می‌شود کاربران تنها محتوای داخل نشان را ببینند؛ این طراحی به صورت نشانه بصری به کاربر کمک می‌کند تا هدف آن را بهتر درک کند. این شیوه طراحی یکی از مفاهیم پایه در آموزش طراحی سایت با بوت استرپ محسوب می‌شود.

در برخی شرایط، ممکن است این نشان ها مانند اضافه شدن تصادفی یک عدد یا کلمه در انتهای یک جمله، لینک یا دکمه به نظر برسند، اما در واقع نقش مشخصی در اطلاع رسانی یا جلب توجه دارند.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body>
    <button type="button" class="btn btn-success" style="margin: 20px;">
      Messages <span class="badge text-bg-warning">6</span>
    </button>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<body>

Messages <span class="badge text-bg-warning">6</span>

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نشان ها در اعلانات

عدد “۳۲” که درون نشان قرار دارد، تعداد اعلان ها را نشان می‌دهد و کاربران با دیدن این عدد متوجه می‌شوند چند اعلان جدید وجود دارد.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-success position-relative" style="margin: 20px;">
    Notifications
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
      32+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<body>

Notifications

32+

<span class="visually-hidden">unread notifications</span>

</span>

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

موقعیت دهی

می‌توان کلاس .badge را با استفاده از ابزارهای موقعیت‌دهی مانند top-0 ، start-100 و translate-middle تغییر داد و آن را در گوشه‌ای از یک لینک یا دکمه قرار داد. برای درک بهتر نحوه عملکرد این ترکیب، به نمونه کد زیر توجه کنید.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-primary position-relative" style="margin: 20px;">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
      55+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<body>

Inbox

55+

<span class="visually-hidden">unread notifications</span>

</span>

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نشان ها در نشانگر

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

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-info position-relative" style="margin: 20px;">
    Webinar
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle">
      <span class="visually-hidden">New notifications</span>
    </span>
  </button>
</body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<body>

Webinar

<span class="visually-hidden">New notifications</span>

</span>

</button>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

رنگ های پس زمینه

با استفاده از کلاس های کمکی .text-bg-{color}، کاربران می‌توانند یک رنگ پس زمینه همراه با رنگ متضاد برای متن تنظیم کنند. در گذشته لازم بود این استایل را به صورت دستی و با ترکیب کلاس های .text-{color} و .bg-{color} ایجاد کنید، اما اکنون بوت استرپ این کار را ساده‌تر کرده است. البته کاربران همچنان می‌توانند از روش دستی هم استفاده کنند، اگر ترجیح دهند.

برای تغییر سریع ظاهر نشان ها، کافی است از کلاس های آماده‌ای مانند text-bg-primary، text-bg-info، text-bg-success و سایر گزینه‌های موجود در چارچوب رنگ پس زمینه بوت استرپ استفاده کنید.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
      </head>
      <body style="margin: 20px;">
      <span class="badge text-bg-primary">Primary</span>
      <span class="badge text-bg-info">Info</span>
      <span class="badge text-bg-secondary">Secondary</span>
      <span class="badge text-bg-success">Success</span>
      <span class="badge text-bg-light">Light</span>
      <span class="badge text-bg-dark">Dark</span>
      <span class="badge text-bg-warning">Warning</span>
      <span class="badge text-bg-danger">Danger</span>
      </body>
      </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Badges</title>

</head>

<span class="badge text-bg-primary">Primary</span>

<span class="badge text-bg-secondary">Secondary</span>

<span class="badge text-bg-success">Success</span>

<span class="badge text-bg-light">Light</span>

<span class="badge text-bg-warning">Warning</span>

<span class="badge text-bg-danger">Danger</span>

</body>

</html>

با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.

آنلاین امتحان کنید

نشان های کپسولی در بوت استرپ

کاربران می‌توانند با استفاده از کلاس کمکی .rounded-pill، نشان هایی با گوشه‌های گردتر و ظاهری شبیه به کپسول طراحی کنند؛ همان‌طور که در مثال زیر نشان داده شده است.

برای تغییر سریع ظاهر این نوع نشان ها، می‌توانید کلاس .rounded-pill را همراه با کلاس های رنگ پس زمینه بوت استرپ استفاده کنید تا یک نشان کپسولی با رنگ دلخواه ایجاد شود.

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body style="margin: 20px;">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-secondary">Secondary</span>
    <span class="badge rounded-pill text-bg-info">Info</span>
    <span class="badge rounded-pill text-bg-success">Success</span>
    <span class="badge rounded-pill text-bg-light">Light</span>
    <span class="badge rounded-pill text-bg-dark">Dark</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
    <span class="badge rounded-pill text-bg-warning">Warning</span>
    </body>
  </html>