互动(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类别,以移除、添加元素的互动性。链接可被点击是指能够发挥链接的作用,不同于文字可被点选是能被选择复制。

<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,
        ),
        
返回顶部