Bootstrap 简明教程

Bootstrap - Interactions

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

Text selection

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

Example

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

    <!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 类阻止和启用元素交互，如下例所示。

Example

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

  <!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. .pe-none 类与它应用的指针事件 CSS 属性一起使用，旨在专门禁用与鼠标、触控笔或触控输入等指针的交互。默认情况下，带 .pe-none 的链接和控件保持功能性，并且键盘用户可以访问它们。

  2. 为了实现键盘用户的完全中和，可以针对键盘用户包含附加属性。这些属性可能包括 tabindex="-1" 以防止键盘获得焦点、 aria-disabled="true" 以向辅助技术指示其已禁用状态，还可利用 JavaScript 彻底阻止对其进行任何操作。

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

  1. For form controls ：您可以在 HTML 中添加 disabled 属性。

  2. For links ：从链接中删除“href”属性，实际上使它们成为非交互式或占位符元素。