Bootstrap 简明教程

Bootstrap - Interactions

本章讨论了改变用户与网站内容交互方式的 Bootstrap 实用程序类。

This chapter discuss about Bootstrap utility classess that change the way users interact with contents of a website.

Text selection

本节演示了 Bootstrap 实用程序类 user-select- * 如何在用户交互期间改变内容的选择方式。

This section demostrates how Bootstrap utility classess user-select-* change the way in which content is selected during user interactions.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

    <!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>

Pointer events

Bootstrap 类 .pe-none 和 .pe-auto 类阻止和启用元素交互，如下例所示。

Bootstrap classes .pe-none and .pe-auto classes prevents and enabling of element interactions as demostrated in the following example.

Example

您可以使用*编辑和运行*选项编辑并尝试运行此代码。

You can edit and try running this code using *Edit & Run *option.

  <!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>

  1. The .pe-none class, along with the pointer-events CSS property it applies, is designed to disable interactions specifically with a pointer, such as a mouse, stylus, or touch input. By default, links, and controls with .pe-none remain functional and accessible for keyboard users.

  2. In order to achieve full neutralization for keyboard users, additional attributes can be included for keyboard users. These attributes may include tabindex="-1" to prevent keyboard focus, aria-disabled="true" to indicate their disabled state to assistive technologies, and JavaScript could also be utilized to fully prevent any action on them.

如果可能的话，可以通过一种更简单的方式完成：

If possible, it can be done in a simpler way:

  1. For form controls: You can add the disabled attribute in the HTML.

  2. For links: Remove the "href" attribute from links, effectively making them non-interactive or placeholder elements.