बूटस्ट्रैप 3 में `डेटा-लक्ष्य` विशेषता क्या है?

93

क्या आप मुझे बता सकते हैं कि data-targetबूटस्ट्रैप 3 द्वारा उपयोग की जाने वाली विशेषता के पीछे की प्रणाली या व्यवहार क्या है ?

मुझे पता है कि डेटा-टॉगल ग्राफ़िकल फ़ंक्शनलिटी के बूटस्ट्रैप के एपीआई जावास्क्रिप्ट को लक्षित करने के लिए उपयोग किया जाता है।

twitter-bootstrap-3

— darkomen
स्रोत

112

data-targetआपके जीवन को आसान बनाने के लिए बूटस्ट्रैप द्वारा उपयोग किया जाता है। आपको (ज्यादातर) अपने पूर्व-निर्मित जावास्क्रिप्ट घटकों का उपयोग करने के लिए जावास्क्रिप्ट की एक पंक्ति लिखने की आवश्यकता नहीं है ।

data-targetविशेषता एक CSS चयनकर्ता कि HTML तत्व को अंक बदल जाएगा कि शामिल करना चाहिए।

बीएस 3 से मोडल उदाहरण कोड :

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  [...]
</div>

इस उदाहरण में, बटन है data-target="#myModal", यदि आप उस पर क्लिक करते हैं, <div id="myModal">...</div>तो संशोधित किया जाएगा (इस मामले में फीका में)। ऐसा इसलिए होता है क्योंकि #myModalCSS चयनकर्ता उन तत्वों को इंगित करता है जिनके पास मूल्य के idसाथ एक विशेषता है myModal।

HTML5 "डेटा-" विशेषता के बारे में अधिक जानकारी: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

— Pascalmh
स्रोत

यह चयनकर्ता CSS इंजन जैसा है और कुछ नहीं?

— अंधेरे में

@ माइल्टोन - बिल्कुल, पसंद नहीं। data-targetएक CSS चयनकर्ता को स्वीकार करता है जो संबंधित तत्व को इंगित करता है।

— फिस्टुके

18

टॉगल बूटस्ट्रैप को बताता है कि क्या करना है और लक्ष्य बूटस्ट्रैप को बताता है कि कौन सा तत्व खुलने वाला है। इसलिए जब भी उस तरह के लिंक पर क्लिक किया जाता है, तो "basicModal" आईडी के साथ एक मोडल दिखाई देगा।

— user3098847
स्रोत