آموزش استفاده از دکمه بستن در بوت استرپ

0 دیدگاه

در این بخش دکمه بستن در بوت استرپ را بررسی می‌کنیم. با این دکمه می‌توان مدال ها (Modals)، هشدارها (Alerts) و پاپ اورها (Popovers) را به‌راحتی بست و از صفحه حذف کرد.

مثال ساده

برای ساخت دکمه بستن، از کلاس .btn-close استفاده کنید. استایل پیش‌فرض این دکمه قابل سفارشی‌سازی است.
برای اعمال تغییرات بیشتر، می‌توانید متغیرهای Sass را تغییر دهید تا تصویر پس‌زمینه (background-image) عوض شود. همچنین برای دسترس‌پذیری بهتر، می‌توان با استفاده از ویژگی aria-label متنی مناسب برای خوانندگان صفحه (Screen readers) اضافه کرد.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</title>
      <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>
    </head>
    <body>
      <div class="container mt-2">
        Close Notification
        <button type="button" class="btn-close" aria-label="Close"></button>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Close Button</title>

</head>

<body>

Close Notification

</div>

</body>

</html>

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

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

غیرفعال کردن دکمه بستن در بوت استرپ

برای غیرفعال کردن دکمه بستن کافی است از ویژگی disabled استفاده کنید. بوت استرپ به صورت خودکار برخی ویژگی های CSS مانند pointer-events: none; و user-select: none; را اعمال می‌کند تا از فعال شدن حالت های هاور (hover) و کلیک (active) جلوگیری شود.

بوت استرپ برای نمایش واضح حالت غیرفعال، شفافیت (opacity) دکمه بستن را کم می‌کند.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</title>
      <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>
    </head>
    <body>
      <div class="container mt-2">
        Close Notification
        <button type="button" class="btn-close" disabled aria-label="Close"></button>
      </div>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Close Button</title>

</head>

<body>

Close Notification

</div>

</body>

</html>

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

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

حالت تیره دکمه بستن

نکته مهم: از نسخه ۵.۳.۰ بوت استرپ به بعد، کلاس .btn-close-white منسوخ شده است. برای تغییر رنگ دکمه بستن به حالت تیره، باید از ویژگی data-bs-theme="dark" استفاده کنید.

برای معکوس کردن رنگ دکمه بستن (مثلاً در پس‌زمینه‌های تیره)، کافی است ویژگی data-bs-theme="dark" را به عنصر دارای کلاس .btn-close یا یکی از عناصر والد آن اضافه کنید. در این حالت، بوت استرپ با استفاده از ویژگی filter تصویر پس‌زمینه دکمه را معکوس می‌کند تا با زمینه تیره هماهنگ شود.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Close Button</title>
      <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>
    </head>
    <body>
        Close Notification
        <button type="button" class="btn-close" data-bs-theme="dark" aria-label="Close"></button>
        <button type="button" class="btn-close" data-bs-theme="dark" disabled aria-label="Close"></button>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Close Button</title>

</head>

<body>

Close Notification

</body>

</html>

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

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

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

دوره آموزش طراحی فروشگاه اینترنتی بدون کد نویسی در 8 ساعت

انتشار: ۸ خرداد ۱۴۰۴

آموزش استفاده از دکمه بستن در بوت استرپ

غیرفعال کردن دکمه بستن در بوت استرپ

حالت تیره دکمه بستن

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط