互动（Interactions）

可改变使用者如何与网页内容互动的通用类。

On this page

文字选择

改变内容被提取的方式，在使用者与它互动时。

当使用者点选时，这个段落将会被全选。

这个段落具有预设的提取行为。

当使用者点选的时候，此段落将不会被提取

<p class="user-select-all">当使用者点选时，这个段落将会被全选。</p>
        <p class="user-select-auto">这个段落具有预设的提取行为。</p>
        <p class="user-select-none">当使用者点选的时候，此段落将不会被提取</p>

Pointer事件

Bootstrap提供.pe-none与.pe-auto类别，以移除、添加元素的互动性。链接可被点击是指能够发挥链接的作用，不同于文字可被点选是能被选择复制。

这个连接不可被点击

这个连接可以被点击（此为预设行为）.

这个连接无法被点击，因为其pointer-events属性继承自父层 。这个连接具有pe-auto类别，因此可以被点击 。 

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">这个连接不可被点击这个连接不可被点选</a> </p>
        <p><a href="#" class="pe-auto">这个连接可以被点击（此为预设行为）.</a> 
        </p>
        <p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">这个连接无法被点击，因为其pointer-events属性继承自父层。</a> 。然而， <a href="#" class="pe-auto">这个连接具有pe-auto类别，因此可以被点击</a>。</p>
.pe-none类别（以及其所设置的pointer-events CSS属性）只会阻止pointer的交互作用（mouse，stylus，touch）。预设下带有.pe-none的连接以及控制元件仍可以被键盘使用者聚焦、启动。为了确保即使对于键盘用户，它们也完全被消除互动，你需要添加额外的属性如tabindex=“-1”（避免它们取得键盘用户的聚焦）以及aria-disabled=“true”（以向辅助技术传达这些元件被有效的禁用），并可能需要使用JavaScript以完全避免这些元件被启用。对于一些控制元素来说，请考虑改用disabled HTML属性。

Sass

Utilities API

Interaction utilities are declared in our utilities API in scss/_utilities.scss.

    "user-select": (
        property: user-select,
        values: all auto none
        ),
        "pointer-events": (
        property: pointer-events,
        class: pe,
        values: none auto,
        ),
返回顶部