मुख्य विषयवस्तु में जाएं डॉक्स नेविगेशन पर जाएं
in English

बातचीत

उपयोगिता वर्ग जो बदलते हैं कि उपयोगकर्ता किसी वेबसाइट की सामग्री के साथ कैसे इंटरैक्ट करते हैं।

पाठ चयन

जब उपयोगकर्ता इसके साथ इंटरैक्ट करता है तो जिस तरह से सामग्री का चयन किया जाता है उसे बदलें।

उपयोगकर्ता द्वारा क्लिक किए जाने पर यह पैराग्राफ पूरी तरह से चुना जाएगा।

इस अनुच्छेद में डिफ़ॉल्ट चयन व्यवहार है।

उपयोगकर्ता द्वारा क्लिक करने पर यह पैराग्राफ चयन योग्य नहीं होगा।

<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>

सूचक घटनाएं

बूटस्ट्रैप तत्व इंटरैक्शन को रोकने या जोड़ने के लिए प्रदान करता है .pe-noneऔर कक्षाएं प्रदान करता है।.pe-auto

इस लिंक पर क्लिक नहीं किया जा सकता है।

इस लिंक पर क्लिक किया जा सकता है (यह डिफ़ॉल्ट व्यवहार है)।

इस लिंक पर क्लिक नहीं किया जा सकता क्योंकि pointer-eventsसंपत्ति अपने माता-पिता से विरासत में मिली है। हालांकि, इस लिंक की एक pe-autoकक्षा है और इसे क्लिक किया जा सकता है।

<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>
.pe-noneवर्ग (और सीएसएस संपत्ति यह pointer-eventsसेट करता है) केवल एक सूचक (माउस, स्टाइलस, स्पर्श) के साथ बातचीत को रोकता है। के साथ लिंक और नियंत्रण .pe-none, डिफ़ॉल्ट रूप से, अभी भी ध्यान देने योग्य हैं और कीबोर्ड उपयोगकर्ताओं के लिए कार्रवाई योग्य हैं। यह सुनिश्चित करने के लिए कि कीबोर्ड उपयोगकर्ताओं के लिए भी वे पूरी तरह से निष्प्रभावी हैं, आपको और विशेषताओं को जोड़ने की आवश्यकता हो सकती है जैसे tabindex="-1"(उन्हें कीबोर्ड फ़ोकस प्राप्त करने से रोकने के लिए) और aria-disabled="true"(इस तथ्य को व्यक्त करने के लिए कि वे सहायक तकनीकों के लिए प्रभावी रूप से अक्षम हैं), और संभवतः जावास्क्रिप्ट का उपयोग करने के लिए उन्हें कार्रवाई योग्य होने से पूरी तरह से रोकें। प्रपत्र नियंत्रणों के लिए, disabledइसके बजाय HTML विशेषता का उपयोग करने पर विचार करें।

सास

यूटिलिटीज एपीआई

इंटरेक्शन यूटिलिटीज को हमारी यूटिलिटीज एपीआई में scss/_utilities.scss. उपयोगिताओं API का उपयोग करना सीखें।

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