Interacciones

Clases utilitarias que cambian cómo los usuarios interactúan con el contenido de un sitio web.

Selección de texto

Cambia la forma en la que se selecciona el contenido cuando el usuario interactúa con él.

Este párrafo se seleccionará por completo cuando el usuario haga clic en él.

Este párrafo tiene el comportamiento de selección predeterminado.

Este párrafo no será seleccionable cuando el usuario haga clic en él.

html

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Eventos de puntero

Bootstrap proporciona las clases .pe-none y .pe-auto para prevenir o añadir interacciones de elementos.

Este enlace no se puede hacer clic.

Este enlace se puede hacer clic (este es el comportamiento predeterminado).

Este enlace no se puede hacer clic porque la propiedad pointer-events se hereda de su elemento padre. Sin embargo, este enlace tiene una clase pe-auto y se puede hacer clic.

html

<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pe-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pe-auto">this link</a> has a <code>pe-auto</code> class and can be clicked.</p>

La clase .pe-none (y la propiedad CSS pointer-events que establece) solo previene interacciones con un puntero (ratón, lápiz, táctil). Los enlaces y controles con .pe-none son, por defecto, aún enfocables y accionables para usuarios de teclado. Para asegurar que estén completamente neutralizados incluso para usuarios de teclado, puede que necesites añadir atributos adicionales como tabindex="-1" (para evitar que reciban foco del teclado) y aria-disabled="true" (para transmitir que están efectivamente deshabilitados a las tecnologías de asistencia), y posiblemente usar JavaScript para evitar completamente que sean accionables.

Si es posible, la solución más simple es:

Para controles de formulario, añade el atributo HTML disabled.

Para enlaces, elimina el atributo href, convirtiéndolo en un ancla no interactiva o un enlace de marcador de posición.

Sass

API de utilidades

Las utilidades de interacción se declaran en nuestra utilities API en scss/_utilities.scss. Aprende a usar la utilities API.

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