परस्पर क्रियाएँ

पाठ चयन

जखन उपयोगकर्ता ओकरा सं बातचीत करय छै तखन सामग्री कें चयन करय कें तरीका बदलूं.

<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

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

यदि संभव हो त एकर सरल समाधान अछि :

• disabledफॉर्म नियंत्रण क लेल, एचटीएमएल विशेषता जोड़ू .

• लिंक के लेल, विशेषता हटाउ href, एकरा गैर-इंटरएक्टिव एंकर या प्लेसहोल्डर लिंक बनाउ.

सस्स

उपयोगिता एपीआई

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

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