Skip to main content Skip to docs navigation
Ver en GitHub

Interacciones (Interactions)

Clases de utilidad que cambian la forma en que los usuarios interactúan con los contenidos de un sitio web.

Selección de texto (Text selection)

Cambia la forma en 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 se podrá seleccionar cuando el usuario haga clic en él.

html 
<p class="user-select-all">Este párrafo se seleccionará por completo cuando el usuario haga clic en él.</p>
<p class="user-select-auto">Este párrafo tiene el comportamiento de selección predeterminado.</p>
<p class="user-select-none">Este párrafo no se podrá seleccionar cuando el usuario haga clic en él.</p>

Eventos de puntero (Pointer events)

Bootstrap proporciona las clases .pe-none y .pe-auto para evitar o agregar interacciones con 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 padre. Sin embargo, este enlace tiene una clase pe-auto y se puede hacer clic en él.

html 
<p><a href="#" class="pe-none" tabindex="-1" aria-disabled="true">Este enlace</a> no se puede hacer clic.</p>
<p><a href="#" class="pe-auto">Este enlace</a> se puede hacer clic (este es el comportamiento predeterminado).</p>
<p class="pe-none"><a href="#" tabindex="-1" aria-disabled="true">Este enlace</a> no se puede hacer clic porque la propiedad <code>pointer-events</code> se hereda de su padre. Sin embargo, <a href="#" class="pe-auto">este enlace</a> tiene una clase <code>pe-auto</code> y se puede hacer clic en él.</p>

La clase .pe-none (y la propiedad CSS pointer-events que establece) solo evita las interacciones con un puntero (mouse, lápiz óptico, táctil). Los enlaces y controles con .pe-none son, de forma predeterminada, todavía enfocables y ejecutables para usuarios de teclado. Para asegurarse de que estén completamente neutralizados incluso para usuarios de teclado, es posible que debas agregar atributos adicionales como tabindex="-1" (para evitar que reciban el foco del teclado) y aria-disabled="true" (para transmitir el hecho de que están efectivamente deshabilitados para tecnologías de asistencia), y posiblemente usar JavaScript para evitar por completo que sean ejecutables.

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

  • Para los controles de formulario, agrega el atributo HTML disabled.
  • Para los enlaces, elimina el atributo href, convirtiéndolo en un ancla no interactiva o enlace de marcador de posición.

CSS

API de utilidades de Sass

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

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