آموزش کلاس های تعاملی در بوت استرپ

0 دیدگاه

در این بخش، کلاس های تعاملی در بوت استرپ بررسی می‌شوند که نحوه تعامل کاربران با محتوای سایت را تغییر می‌دهند.

انتخاب متن در بوت استرپ

در این بخش، با کلاس های کاربردی user-select-* در بوت استرپ آشنا می‌شوید که کنترل می‌کنند کاربران هنگام تعامل با صفحه، بتوانند محتوای متنی را انتخاب (Select) کنند یا نه. با استفاده از این کلاس ها، می‌توان مشخص کرد کدام بخش از متن سایت برای کاربر قابل انتخاب باشد و کدام بخش قابل انتخاب نباشد. این ویژگی به‌ویژه در طراحی رابط کاربری دقیق و کنترل‌شده اهمیت دارد.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <title>Bootstrap - Interactions</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>
        <p class="user-select-all">When the user clicks on this paragraph, the entire text will be selected.</p>
        <p class="user-select-auto">The select behavior of this paragraph is set to its default state.</p>
        <p class="user-select-none">When the user clicks on this paragraph, it will not be selectable.</p>
    </body>
    </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Interactions</title>

</head>

<body>

<p class="user-select-all">When the user clicks on this paragraph, the entire text will be selected.</p>

<p class="user-select-auto">The select behavior of this paragraph is set to its default state.</p>

<p class="user-select-none">When the user clicks on this paragraph, it will not be selectable.</p>

</body>

</html>

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

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

رویدادهای اشاره گر در بوت استرپ (Pointer Events)

بوت استرپ کلاس هایی مانند .pe-none و .pe-auto را برای کنترل تعامل کاربران با عناصر صفحه ارائه می‌دهد. با استفاده از کلاس .pe-none می‌توان کلیه تعاملات کاربر با یک عنصر را غیرفعال کرد؛ به‌عبارت دیگر، کلیک یا لمس روی آن عنصر بی‌اثر خواهد بود. در مقابل، کلاس .pe-auto اجازه می‌دهد تعاملات دوباره فعال شوند.

در مثال زیر می‌توانید نحوه عملکرد این کلاس‌ها را در عمل مشاهده کنید:

  <!DOCTYPE html>
  <html lang="en">
  <head>
    <title>Bootstrap - Interactions</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>
    <p>Use the "pe-none" class to make the <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">link</a> inactive.</p>
    <p>Use the "pe-auto" class to make the <a href="#" class="pe-auto">link</a> active.</p>
    <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link </a> is not active due to the inherited pointer-events property. Now, <a href="#" class="pe-auto">This link</a> is an active.</p>
  </body>
  </html>

<!DOCTYPE html>

<head>

<title>Bootstrap - Interactions</title>

</head>

<body>

<p>Use the "pe-none" class to make the <a href="#" class="pe-none" tabindex="-1" aria-disabled="true">link</a> inactive.</p>

<p>Use the "pe-auto" class to make the <a href="#" class="pe-auto">link</a> active.</p>

<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link </a> is not active due to the inherited pointer-events property. Now, <a href="#" class="pe-auto">This link</a> is an active.</p>

</body>

</html>

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

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

نحوه عملکرد کلاس `.pe-none` در بوت استرپ

کلاس .pe-none در بوت استرپ، با استفاده از ویژگی CSS به نام pointer-events، تعامل کاربر با عنصر را از طریق ابزارهایی مانند ماوس، قلم نوری یا لمس غیرفعال می‌کند. به بیان ساده، زمانی که این کلاس را روی یک عنصر اعمال می‌کنید، دیگر امکان کلیک یا لمس آن وجود نخواهد داشت.

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

برای اطمینان از اینکه یک عنصر نه با ماوس و نه با کیبورد قابل استفاده نباشد، می‌توانید از موارد زیر استفاده کنید:

tabindex="-1": از فوکوس شدن عنصر با کلید Tab جلوگیری می‌کند.
aria-disabled="true": وضعیت غیرفعال بودن عنصر را به فناوری‌های کمکی (مانند صفحه‌خوان‌ها) اطلاع می‌دهد.
استفاده از JavaScript: برای جلوگیری کامل از اجرای هر نوع عملکرد یا رویداد روی عنصر.

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

در بسیاری از موارد، بدون نیاز به کلاس .pe-none می‌توان از روش های ساده تری استفاده کرد:

برای فیلدهای فرم (مثل input یا textarea): کافی است ویژگی disabled را به‌صورت مستقیم در HTML اعمال کنید.
برای لینک‌ها (anchor): حذف ویژگی href باعث می‌شود لینک عملکرد تعاملی خود را از دست بدهد و صرفاً به‌عنوان یک عنصر نمایشی عمل کند.

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

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

نظرات

پکیج آموزش پیشرفته ASP.NET Core + طراحی فروشگاه اینترنتی

انتشار: ۲۳ تیر ۱۴۰۴

آموزش کلاس های تعاملی در بوت استرپ

انتخاب متن در بوت استرپ

رویدادهای اشاره گر در بوت استرپ (Pointer Events)

نحوه عملکرد کلاس `.pe-none` در بوت استرپ

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط

انتخاب متن در بوت استرپ

رویدادهای اشاره گر در بوت استرپ (Pointer Events)

نحوه عملکرد کلاس .pe-none در بوت استرپ

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط

نحوه عملکرد کلاس `.pe-none` در بوت استرپ