व्यक्तिगत या संकलित

प्लगइन कें व्यक्तिगत रूप सं शामिल कैल जा सकय छै (हालांकि किछ कें निर्भरता कें आवश्यकता छै), या एकहि बेर मे सबटा. bootstrap.js आओर bootstrap.min.js दुनू मे सभ प्लगइन एकटा फाइल मे रहैत अछि.

डेटा विशेषताएँ

अहां सब बूटस्ट्रैप प्लगइन के उपयोग विशुद्ध रूप सं मार्कअप एपीआई के माध्यम सं बिना जावास्क्रिप्ट के एकटा लाइन लिखने क सकय छी. ई बूटस्ट्रैप केरऽ प्रथम श्रेणी केरऽ एपीआई छै आरू प्लगइन केरऽ उपयोग करला प॑ आपकऽ पहिलऽ विचार होना चाहियऽ ।

कहल गेल अछि जे किछु परिस्थिति मे एहि कार्यक्षमता केँ बंद करब वांछनीय भ' सकैत अछि. अत: हम `'data-api'` स े नामस्पेस ककए गए बॉडी नेमस्पेस पर सब इवेंट क े अनबाइंड करक े डाटा एट्रिब्यूट एपीआई क े अक्षम करन े की क्षमता भी प्रदान करते ह ै | ई एना लगैत अछि : १.

$ ( 'शरीर' ) । बंद ( '.डाटा-एपीआई' ) .

वैकल्पिक रूप सं, कोनों विशिष्ट प्लगइन कें लक्षित करय कें लेल, बस प्लगइन कें नाम कें एकटा नेमस्पेस कें रूप मे डाटा-एपीआई नेमस्पेस कें साथ अइ तरह शामिल करूं:

$ ( 'शरीर' ) । बंद ( '.अलर्ट.डाटा-एपीआई' ) .

प्रोग्रामेटिक एपीआई

हमरऽ ई भी मानना ​​छै कि आहाँ क॑ विशुद्ध रूप स॑ जावास्क्रिप्ट एपीआई के माध्यम स॑ सब बूटस्ट्रैप प्लगइन के उपयोग करै म॑ सक्षम होना चाहियऽ । सबटा सार्वजनिक एपीआई एकल, श्रृंखलाबद्ध विधियक छै, आ संग्रहण कें वापस करयत छै जइ पर कार्य कैल गेल छै.

$ ( ".btn.खतरा" ). बटन ( "टॉगल" ). addClass ( "वसा" ) 1।

सब विधियक कें एकटा वैकल्पिक विकल्प वस्तु, एकटा स्ट्रिंग जे कोनों विशेष विधि कें लक्षित करयत छै, या किछु नहि (जे डिफ़ॉल्ट व्यवहार कें साथ एकटा प्लगइन कें आरंभ करयत छै) कें स्वीकार करबाक चाहि:

$ ( "# मेरा मोडल" ). modal () // डिफ़ॉल्ट के साथ आरंभ                       
$ ( "# मेरा मोडल" ). modal ({ keyboard : false }) // कोनो कीबोर्ड के साथ आरंभ कएल गेल     
$ ( "# मेरा मोडल" ). modal ( 'show' ) // तुरंत दिखाएँ आरंभ करता है और आह्वान करता है |                

प्रत्येक प्लगइन एक `कंस्ट्रक्टर` गुण पर अपन कच्चा कंस्ट्रक्टर क सेहो उजागर करैत अछि: $.fn.popover.Constructor. यदि अहाँ कोनो विशेष प्लगइन इंस्टेंस प्राप्त करय चाहैत छी, त' ओकरा सीधा कोनो तत्व सँ पुनः प्राप्त करू: $('[rel=popover]').data('popover').

कोनो द्वंद्व नहि

कखनो काल अन्य यूआई फ्रेमवर्क के साथ बूटस्ट्रैप प्लगइन के उपयोग करनाय आवश्यक भ जायत छै. एहि परिस्थिति मे नेमस्पेस टक्कर कखनो काल भ सकैत अछि । यदि एहन भ' गेल त' अहाँ .noConflictओहि प्लगइन पर कॉल क' सकैत छी जकर मान वापस करय चाहैत छी.

var बूटस्ट्रैपबटन = $ । fn के . बटन के . noConflict () // पूर्व निर्धारित मान पर $.fn.button वापस करू 
$ . fn के . bootstrapBtn = bootstrapButton             // $ ().bootstrapBtn के बूटस्ट्रैप कार्यक्षमता दे

घटनाक्रम

बूटस्ट्रैप अधिकांश प्लगइन कें अद्वितीय क्रियाक कें लेल कस्टम घटना प्रदान करयत छै. सामान्यतः ई सब अव्यय आ भूतकाल रूप मे अबैत अछि - जतय showकोनो घटनाक आरम्भ मे अव्यय (ex. ) ट्रिगर होइत अछि , आ ओकर भूतकाल रूप (ex. shown) कोनो क्रियाक पूर्णता पर ट्रिगर होइत अछि |

सभ अव्यय घटना preventDefault कार्यक्षमता प्रदान करैत अछि. एहि स कोनो क्रिया क शुरू होएबा स पहिने ओकर निष्पादन कए रोकबाक क्षमता भेटैत अछि ।

$ ( '# मेरा मोडल' ). पर ( 'देखें' , फंक्शन ( ई ) {   
    अगर (! डेटा ) return ई । preventDefault () // मोडल केँ देखाओल जेबाक रोकैत अछि   
}) के।

संक्रमण के बारे में

सरल संक्रमण प्रभावक कें लेल, अन्य जेएस फाइल कें साथ एक बेर bootstrap-transition.js कें शामिल करूं. यदि अहां संकलित (अथवा लघुकृत) bootstrap.js क उपयोग क रहल छी , त एकरा शामिल करय क जरूरत नहि अछि-ई पहिने स अछि.

प्रयोग केस

संक्रमण प्लगइन क किछु उदाहरण:

• मोडल में फिसलन या फीका पड़ना
• टैब बाहर फीका पड़ रहल अछि
• अलर्ट फीका पड़ रहल अछि
• हिंडोला फलक फिसलने

उदाहरण के लिये

मोडल सुव्यवस्थित, मुदा लचीला, संवाद संकेत न्यूनतम आवश्यक कार्यक्षमता आ स्मार्ट डिफ़ॉल्ट कें साथ छै.

स्थिर उदाहरण

हेडर, बॉडी, आ पाद लेख मे क्रियाक सेट के संग एकटा रेंडर मोडल.

<div class = "मोडल छिपाना फीका" > 
  <div वर्ग = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "मोडल" aria-hidden = "सत्य" > × </बटन>    
    <h3> मोडल हेडर </h3>
  </div>
  <div वर्ग = "मोडल-शरीर" > 
    <p> एकटा महीन शरीर... </p>
  </div>
  <div वर्ग = "मोडल-पाद लेख" > 
    <a href = "#" वर्ग = "btn" > बंद करू </a>  
    <a href = "#" class = "btn btn-primary" > परिवर्तन सहेजू </a>  
  </div>
</div>

लाइव डेमो

नीचा देल गेल बटन पर क्लिक कए जावास्क्रिप्ट क माध्यम स कोनो मोडल कए टॉगल करू। ई नीचाँ सरकि क' पन्नाक ऊपरसँ फीका भ' जायत।

<!-- मोडल ट्रिगर करबाक लेल बटन -->
<a href = "#myModal" भूमिका = "बटन" वर्ग = "btn" डेटा-टॉगल = "मोडल" > डेमो मोडल लॉन्च करू </a>    
 
<!-- मोडल -->
<div id = "myModal" वर्ग = "मोडल छिपाओ फीका" tabindex = "-1" भूमिका = "संवाद" aria-labelledby = "myModalLabel" aria -hidden = "सत्य" >      
  <div वर्ग = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "मोडल" aria-hidden = "सत्य" > × </बटन>    
    <h3 id = "myModalLabel" > मोडल हेडर </h3> 
  </div>
  <div वर्ग = "मोडल-शरीर" > 
    <p> एकटा महीन शरीर... </p>
  </div>
  <div वर्ग = "मोडल-पाद लेख" > 
    <button class = "btn" data-dismiss = "मोडल" aria-hidden = "सत्य" > बंद करू </button>   
    <button class = "btn btn-primary" > परिवर्तन सहेजू </button> 
  </div>
</div>

प्रयोग

डेटा विशेषता के माध्यम से

जावास्क्रिप्ट लिखने बिना कोनो मोडल सक्रिय करू। एकटा नियंत्रक तत्व पर सेट करू data-toggle="modal", जेना एकटा बटन, एकटा data-target="#foo"या href="#foo"टॉगल करय कें लेल एकटा विशिष्ट मोडल कें लक्षित करय कें लेल.

<button type = "button" data-toggle = "मोडल" data-target = "#myModal" > मोडल लॉन्च करू </button>   

जावास्क्रिप्ट के माध्यम से

myModalजावास्क्रिप्ट के एकल लाइन के साथ id के साथ एक मोडल कॉल करें:

$ ( '# मेरा मोडल' ). मोडल ( विकल्प ) 1।

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

विधियाँ

.मोडल (विकल्प) 1।

एकटा मोडल के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object.

$ ( '# मेरा मोडल' ). मोडल ({ 1।
  कीबोर्ड : गलत 
}) के।

.मोडल ('टॉगल') .

मैन्युअल रूप स एकटा मोडल टॉगल करैत अछि।

$ ( '# मेरा मोडल' ). मोडल ( 'टॉगल' ) २ .

.modal('देखाउ')

मैन्युअल रूप स एकटा मोडल खोलैत अछि।

$ ( '# मेरा मोडल' ). मोडल ( 'देखाउ' ) २ .

.modal('छुपाएँ') .

मैन्युअल रूप स एकटा मोडल नुकाबैत अछि।

$ ( '# मेरा मोडल' ). मोडल ( 'छुपाउ' ) २ .

घटनाक्रम

बूटस्ट्रैप केरऽ मोडल क्लास मोडल कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै ।

$ ( '# मेरा मोडल' ). पर ( 'छुपा' , फंक्शन () {   
  // किछु करू...
}) के।

उदाहरण के लिये

एहि सरल प्लगइन सं लगभग कोनो चीज मे ड्रॉपडाउन मेनू जोड़ू, जाहि मे नवबार, टैब, आ गोली शामिल अछि.

एक नवबर के भीतर

टैब के भीतर

प्रयोग

डेटा विशेषता के माध्यम से

data-toggle="dropdown"ड्रॉपडाउन टॉगल करय लेल कोनो लिंक या बटन मे जोड़ू .

<div वर्ग = "ड्रॉपडाउन" > 
  <a class = "ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" > ड्रॉपडाउन ट्रिगर </a>   
  <ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

यूआरएल केँ बरकरार रखबाक लेल, data-targetकेर बदला विशेषताक प्रयोग करू href="#".

<div वर्ग = "ड्रॉपडाउन" > 
  <a class = "ड्रॉपडाउन-टॉगल" id = "dLabel" भूमिका = "बटन" डेटा-टॉगल = "ड्रॉपडाउन" डेटा-लक्ष्य = "#" href = "/पृष्ठ.html" >      
    ड्रॉपडाउन
    <b class = "कैरेट" </b> 
  </a>
  <ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

जावास्क्रिप्ट के माध्यम से

जावास्क्रिप्ट के माध्यम स ड्रॉपडाउन के कॉल करू:

$ ( '.ड्रॉपडाउन-टॉगल' ). ड्रॉपडाउन () 1।

विकल्प

कोनो नहि

विधियाँ

$ (). ड्रॉपडाउन ('टॉगल')।

कोनों देल गेल नवबार या टैब नेविगेशन कें लेल मेनू टॉगल करय कें लेल एकटा प्रोग्रामेटिक एपीआई.

नवबार में उदाहरण

स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति कें आधार पर स्वचालित रूप सं nav लक्ष्य अपडेट करय कें लेल छै. नवबार के नीचा के क्षेत्र के स्क्रॉल करू आ सक्रिय वर्ग बदलैत देखू. ड्रॉपडाउन सब आइटम के सेहो हाइलाइट कएल जाएत.

प्रयोग

डेटा विशेषता के माध्यम से

अपनऽ टॉपबार नेविगेशन म॑ स्क्रॉलस्पी व्यवहार क॑ आसानी स॑ जोड़ै लेली, बस data-spy="scroll"वू तत्व म॑ जोड़ऽ जेकरा प॑ आपने जासूसी करना चाहै छियै (सबसे आम तौर प॑ ई शरीर होतै) आरू data-target=".navbar"ई चुनै लेली कि कोन नेव के उपयोग करलऽ जाय । अहाँ कोनो घटकक संग scrollspy क उपयोग करए चाहब .nav.

<body data-spy = "स्क्रॉल" डेटा-लक्ष्य = ".navbar" > ... </body>  

जावास्क्रिप्ट के माध्यम से

जावास्क्रिप्ट के माध्यम स स्क्रॉलस्पाई के कॉल करू:

$ ( '# नवबार' )। स्क्रॉलस्पी () 1।

विधियाँ

.scrollspy ('ताजा') .

DOM स तत्व जोड़ै या हटाबै के साथ scrollspy क उपयोग करला पर, आहाँ क रिफ्रेश विधि क ऐन्हऽ कॉल करै के जरूरत होतै:

$ ( '[डेटा-जासूस = "स्क्रॉल"]' ). प्रत्येक ( फ़ंक्शन () { .  
  var $ जासूस = $ ( ई )। scrollspy ( 'ताजा' ) २ .
});

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-offset="".

घटनाक्रम

उदाहरण टैब

स्थानीय सामग्री कें फलक कें माध्यम सं संक्रमण कें लेल त्वरित, गतिशील टैब कार्यक्षमता जोड़ूं, ड्रॉपडाउन मेनू कें माध्यम सं सेहो.

प्रयोग

जावास्क्रिप्ट कें माध्यम सं टैब करय योग्य टैब कें सक्षम करूं (प्रत्येक टैब कें व्यक्तिगत रूप सं सक्रिय करय कें जरूरत छै):

$ ( '# मेरा टैब एक' ). क्लिक करू ( फंक्शन ( ई ) { .  
  ई . preventDefault ();
  $ ( ई ) । tab ( 'देखाउ' );
}) के।

अहां अलग-अलग टैब कें कई तरह सं सक्रिय कयर सकय छी:

$ ( '# myTab एक [href="#प्रोफाइल"]' ). tab ( 'देखाउ' ); // नाम से टैब चुनें 
$ ( '# myTab एक: पहिल' ). tab ( 'देखाउ' ); // पहिल टैब चुनू 
$ ( '# myTab एक: अंतिम' ). tab ( 'देखाउ' ); // अंतिम टैब चुनें 
$ ( '# myTab ली: समीकरण (2) एक' ). tab ( 'देखाउ' ); // तेसर टैब चुनू (0-अनुक्रमित) 

मार्कअप

data-toggle="tab"अहां कोनों तत्व कें निर्दिष्ट करय या data-toggle="pill"कोनों तत्व पर बिना कोनों जावास्क्रिप्ट लिखने टैब या गोली नेविगेशन कें सक्रिय कयर सकय छी . navटैब मे आओर nav-tabsक्लास जोड़ला सं ulबूटस्ट्रैप टैब स्टाइलिंग लागू होएत.

<ul class = "नव नव-टैब" > 
  <li><a href = "#घर" डेटा-टॉगल = "टैब" > घर </a></li>  
  <li><a href = "#प्रोफाइल" data-toggle = "टैब" > प्रोफाइल </a></li>  
  <li><a href = "#messages" data-toggle = "टैब" > संदेश </a></li>  
  <li><a href = "#सेटिंग्स" data-toggle = "टैब" > सेटिंग्स </a></li>  
</ul>

विधियाँ

$ ().टैब

एकटा टैब तत्व आ सामग्री कंटेनर कें सक्रिय करयत छै. टैब मे या त एकटा data-targetया एकटा hrefटारगेटिंग एकटा कंटेनर नोड कें डीओएम मे होबाक चाही.

<ul वर्ग = "नव नव-टैब" आईडी = "myTab" >  
  <li class = "सक्रिय" ><a href = "#घर" > घर </a></li>  
  <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> 
  <li><a href = "#messages" > संदेश </a></li> 
  <li><a href = "#सेटिंग्स" > सेटिंग्स </a></li> 
</ul>
 
<div वर्ग = "टैब-सामग्री" > 
  <div class = "टैब-पैन सक्रिय" id = "घर" > ... </div>  
  <div class = "टैब-पैन" id = "प्रोफाइल" > ... </div>  
  <div class = "टैब-पैन" id = "संदेश" > ... </div>  
  <div class = "टैब-पैन" id = "सेटिंग्स" > ... </div>  
</div>
 
<स्क्रिप्��>
  $ ( फंक्शन () { 1।  
    $ ( '# myTab एक: अंतिम' ). tab ( 'देखाउ' );
  }) के।
</स्क्रिप्ट>

घटनाक्रम

$ ( 'एक [डेटा-टॉगल = "टैब"]' ). पर ( 'दिखाया' , फंक्शन ( ई ) {   
  ई . लक्ष्य // सक्रिय टैब
  ई . relatedTarget // पिछला टैब
}) के।

उदाहरण के लिये

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइन स प्रेरित; टूलटिप्स एकटा अपडेट संस्करण छै, जे छवि पर निर्भर नै छै, एनीमेशन लेली CSS3 के उपयोग करै छै, आरू स्थानीय शीर्षक भंडारण लेली डाटा-विशेषता के उपयोग करै छै.

प्रदर्शन कारण सं, टूलटिप आ पॉपओवर डाटा-एपीआई ऑप्ट इन अछि, मतलब अहां कें ओकरा स्वयं आरंभ करनाय होयत .

टूलटिप्स देखबाक लेल नीचा देल गेल लिंक पर माउस करू:

चार दिशा

इनपुट समूहों में टूलटिप्स

बूटस्ट्रैप इनपुट समूहक कें साथ टूलटिप्स आ पॉपओवर कें उपयोग करयत समय, अहां कें containerअवांछित दुष्प्रभाव सं बचय कें लेल (नीचा दस्तावेजबद्ध) विकल्प सेट करय कें होयत.

प्रयोग

जावास्क्रिप्ट के माध्यम स टूलटिप के ट्रिगर करू:

$ ( '# उदाहरण' ). टूलटिप ( विकल्प ) .

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-animation="".

मार्कअप

<a href = "#" data-toggle = "टूलटिप" title = "पहिल टूलटिप" > हमरा पर मंडराउ </a>   

विधियाँ

$ (). टूलटिप (विकल्प) 1।

एकटा तत्व संग्रह मे एकटा टूलटिप हैंडलर संलग्न करैत अछि.

.tooltip ('देखाउ')

कोनो तत्व के टूलटिप के खुलासा करैत अछि.

$ ( '# तत्व' )। टूलटिप ( 'देखाउ' )

.tooltip ('छुपाएँ')

कोनो तत्वक टूलटिपकेँ नुकाबैत अछि।

$ ( '# तत्व' )। tooltip ( 'छुपाएँ' ) .

.tooltip ('टॉगल') .

कोनो तत्वक टूलटिप टॉगल करैत अछि.

$ ( '# तत्व' )। टूलटिप ( 'टॉगल' ) .

.tooltip('नष्ट करब')

कोनो तत्वक टूलटिपकेँ नुकाबैत अछि आ नष्ट करैत अछि ।

$ ( '# तत्व' )। tooltip ( 'नष्ट करब' )

उदाहरण के लिये

द्वितीयक जानकारी कें आवास कें लेल कोनों तत्व मे सामग्री कें छोट-छोट ओवरले जोड़ूं, जेना कि आईपैड पर छै. पॉपओवर ट्रिगर करबाक लेल बटन पर माउस लगाउ। टूलटिप शामिल करबाक आवश्यकता अछि।

स्थिर पोपोवर

चारि विकल्प उपलब्ध अछि : ऊपर, दाहिना, नीचाँ, आ बामा संरेखित ।

कोनों मार्कअप जे पॉपओवर कें रूप मे दिखाएल गेल छै, जावास्क्रिप्ट आ कोनों dataविशेषता कें भीतर सामग्री सं उत्पन्न नहि कैल गेल छै.

लाइव डेमो

चार दिशा

प्रयोग

जावास्क्रिप्ट के माध्यम स पॉपओवर सक्षम करू:

$ ( '# उदाहरण' ). पोपोवर ( विकल्प ) 1।

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-animation="".

मार्कअप

प्रदर्शन कारण सं, टूलटिप आ पॉपओवर डाटा-एपीआई ऑप्ट इन छै.अगर अहां एकर उपयोग करय चाहय छी त बस एकटा चयनकर्ता विकल्प निर्दिष्ट करूं.

विधियाँ

$ ().popover (विकल्प) 1।

एक तत्व संग्रह के लिये पोपोवर आरंभ करता है |

.popover('देखाउ')

एक तत्व पॉपओवर प्रकट करता है।

$ ( '# तत्व' )। popover ( 'देखाउ' ) २ .

.popover('छुपाएँ') .

एक तत्व पॉपओवर छिपाता है।

$ ( '# तत्व' )। पोपोवर ( 'छुपाउ' ) २ .

.popover('टॉगल') .

एक तत्व पॉपओवर टॉगल करैत अछि।

$ ( '# तत्व' )। popover ( 'टॉगल' ) २ .

.popover('नष्ट') .

कोनो तत्व के पोपोवर के नुका क नष्ट क दैत अछि।

$ ( '# तत्व' )। पोपोवर ( 'नष्ट' ) २ .

उदाहरण अलर्ट

एहि प्लगइन क संग सभ अलर्ट संदेश मे खारिज कार्यक्षमता जोड़ू.

प्रयोग

जावास्क्रिप्ट के माध्यम स एकटा अलर्ट के खारिज करब सक्षम करू:

$ ( ".सचेतक" )। अलर्ट () 1।

मार्कअप

बस data-dismiss="alert"अपन बंद बटन पर जोड़ू जे स्वचालित रूप सं एकटा अलर्ट बंद कार्यक्षमता देबय.

<a class = "बंद करू" data-dismiss = "सचेतक" href = "#" > × </a>   

विधियाँ

$ (). अलर्ट ()।

सब अलर्ट कें करीबी कार्यक्षमता कें साथ लपेटैत छै. बंद रहला पर अहां कें अलर्ट कें एनिमेट आउट करय कें लेल, सुनिश्चित करूं कि ओकरा पर पहिने सं .fadeआ .inक्लास लागू छै.

.alert ('बंद') .

एकटा अलर्ट बंद करैत अछि।

$ ( ".सचेतक" )। अलर्ट ( 'बंद' ) २ .

घटनाक्रम

बूटस्ट्रैप कें अलर्ट क्लास अलर्ट कार्यक्षमता मे हुक करय कें लेल किच्छू घटनाक कें उजागर करयत छै.

$ ( '#हमर-सचेतक' ). bind ( 'बंद' , फंक्शन () {   
  // किछु करू...
}) के।

उदाहरण प्रयोग

बटन स बेसी करू। नियंत्रण बटन राज्यक या टूलबार जैना अधिक घटक कें लेल बटन कें समूह बनावा.

स्टेटफुल

data-loading-text="Loading..."एकटा बटन पर लोडिंग स्टेट क उपयोग करबाक लेल जोड़ू .

<button type = "button" class = "btn btn-primary" data-loading-text = "लोडिंग..." > लोडिंग स्थिति </button>   

एकल टॉगल

data-toggle="button"एकटा बटन पर टॉगलिंग सक्रिय करबाक लेल जोड़ू .

<बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" data-toggle = "बटन" > एकल टॉगल </button>   

चेकबॉक्स

data-toggle="buttons-checkbox"btn-group पर चेकबॉक्स शैली टॉगलिंग क लेल जोड़ू .

<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बाम </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दाहिना </बटन>  
</div>

रेडियो

data-toggle="buttons-radio"btn-group पर रेडियो शैली टॉगलिंग क लेल जोड़ू .

<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बाम </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दाहिना </बटन>  
</div>

प्रयोग

जावास्क्रिप्ट के माध्यम स बटन सक्षम करू:

$ ( '.नव-टैब' ). बटन () 1।

मार्कअप

डेटा विशेषता बटन प्लगइन कें अभिन्न अंग छै. विभिन्न मार्कअप प्रकारक लेल नीचा देल गेल उदाहरण कोड देखू.

विकल्प

कोनो नहि

विधियाँ

$ (). बटन ('टॉगल')।

पुश स्टेट टॉगल करैत अछि। बटन कें ओ रूप दयत छै की इ सक्रिय भ गेल छै.

<बटन प्रकार = "बटन" वर्ग = "btn" डेटा-टॉगल = "बटन" > ... </बटन>    

$ (). बटन ('लोडिंग')

बटन स्थिति क॑ लोडिंग म॑ सेट करै छै - बटन क॑ अक्षम करै छै आरू पाठ क॑ लोडिंग म॑ स्वैप करै छै. डेटा विशेषता क उपयोग कए बटन तत्व पर पाठ लोड करब परिभाषित करबाक चाही data-loading-text.

<button type = "बटन" class = "btn" data-loading-text = "सामान लोड कर रहल अछि ..." > ... </button>    

$ (). बटन ('रीसेट')।

बटन स्थिति रीसेट करैत अछि - पाठ केँ मूल पाठ मे स्वैप करैत अछि.

$ (). बटन (स्ट्रिंग) 1।

बटन स्थिति रीसेट करैत अछि - कोनो डेटा परिभाषित पाठ स्थिति मे पाठ स्वैप करैत अछि.

<बटन प्रकार = "बटन" वर्ग = "btn" डेटा-पूर्ण-पाठ = "समाप्त!" > ... </बटन>    
<स्क्रिप्ट>
  $ ( '.btn' ) । बटन ( 'पूर्ण' ) .
</स्क्रिप्ट>

विषय में

अकॉर्डियन आ नेविगेशन जैना संकुचित घटक कें लेल आधार शैली आ लचीला समर्थन प्राप्त करूं.

* संक्रमण प्लगइन कें शामिल करनाय आवश्यक छै.

उदाहरण अकॉर्डियन

संकुचन प्लगइन क उपयोग कए हम एकटा सरल अकॉर्डियन शैली विजेट बनेलहुं:

<div वर्ग = "अकॉर्डियन" id = "अकॉर्डियन2" >  
  <div वर्ग = "अकॉर्डियन-समूह" > 
    <div class = "अकॉर्डियन-शीर्षक" > 
      <a class = "अकॉर्डियन-टॉगल" data-toggle = "collapse" data-parent = "# accordion2" href = "#collapseOne" >    
        संकुचित समूह मद # 1
      </a>
    </div>
    <div id = "collapseOne" class = "अकॉर्डियन-शरीर में पतन" >  
      <div class = "अकॉर्डियन-आन्तरिक" > 
        एनिम परिआतुर क्लिच...
      </div>
    </div>
  </div>
  <div वर्ग = "अकॉर्डियन-समूह" > 
    <div class = "अकॉर्डियन-शीर्षक" > 
      <a class = "अकॉर्डियन-टॉगल" data-toggle = "collapse" data-parent = "# accordion2" href = "#collapseTwo" >    
        संकुचित समूह मद # 2
      </a>
    </div>
    <div id = "collapseTwo" class = "अकॉर्डियन-शरीर के पतन" >  
      <div class = "अकॉर्डियन-आन्तरिक" > 
        एनिम परिआतुर क्लिच...
      </div>
    </div>
  </div>
</div>
...

अहां बिना अकॉर्डियन मार्कअप के प्लगइन के उपयोग सेहो क सकय छी. कोनो बटन के दोसर तत्व के विस्तार आ संकुचन के टॉगल बनाउ.

<बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन -खतरा" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >    
  सरल संकुचित
</बटन>
 
<div id = "डेमो" वर्ग = "में संकुचन" > ... </div>  

प्रयोग

डेटा विशेषता के माध्यम से

बस एकटा संकुचित तत्व के नियंत्रण स्वचालित रूप स असाइन करय लेल तत्व के जोड़ू data-toggle="collapse"आओर एकटा के. data-targetविशेषता एकटा css चयनकर्ता कें स्वीकार करयत छै जइ data-targetपर संकुचन लागू करयत छै. collapseसंकुचित तत्व मे क्लास अवश्य जोड़ू । जँ अहाँ चाहैत छी जे ई पूर्वनिर्धारित रूपसँ खुजए, तँ अतिरिक्त वर्ग जोड़ू in.

एकटा संकुचित नियंत्रण मे अकॉर्डियन-जैसा समूह प्रबंधन जोड़बाक लेल, डेटा विशेषता जोड़ू data-parent="#selector". एकरा क्रिया मे देखबाक लेल डेमो देखू।

जावास्क्रिप्ट के माध्यम से

के साथ मैन्युअल रूप स सक्षम करू:

$ ( ".संकुचित करब" ). ढहब () २.

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-parent="".

विधियाँ

.collapse(विकल्प) .

एकटा संकुचित तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object.

$ ( '# मेरासंकुचित' ). संकुचन ({
  toggle : गलत 
}) के।

.collapse ('टॉगल') .

कोनो संकुचन योग्य तत्व केँ देखाओल गेल अथवा नुकाएल मे टॉगल करैत अछि.

.collapse('देखाउ')

एकटा संकुचित तत्व देखाबैत अछि।

.collapse('छुपाएँ') .

एकटा संकुचित तत्वकेँ नुकाबैत अछि।

घटनाक्रम

बूटस्ट्रैप केरऽ कोलैप्स क्लास कोलैप्स कार्यक्षमता म॑ हुक करै लेली कुछ घटना क॑ उजागर करै छै ।

$ ( '# मेरासंकुचित' ). पर ( 'छुपा' , फंक्शन () {   
  // किछु करू...
}) के।

उदाहरण हिंडोला

नीचा देल गेल स्लाइड शो हिंडोला जैना तत्वक कें माध्यम सं साइकिल चलावय कें लेल एकटा जेनेरिक प्लगइन आ घटक कें दर्शा रहल छै.

पहिल थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

दोसर थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

तेसर थंबनेल लेबल

क्रास जस्टो ओडियो, डापिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

‹ क . › .

<div id = "myCarousel" वर्ग = "हिंडोला स्लाइड" >  
  <ol class = "हिंडोला-सूचक" > 
    <li data-target = "#myCarousel" data-slide-to = "0" वर्ग = "सक्रिय" ></li>   
    <li data-target = "#myCarousel" डेटा-स्लाइड-टू = "1" ></li>  
    <li data-target = "#myCarousel" डेटा-स्लाइड-टू = "2" ></li>  
  </ol>
  <!-- हिंडोला आइटम -->
  <div वर्ग = "हिंडोला-आन्तरिक" > 
    <div class = "सक्रिय आइटम" > ... </div> 
    <div वर्ग = "आइटम" > ... </div> 
    <div वर्ग = "आइटम" > ... </div> 
  </div>
  <!-- हिंडोला नव -->
  <a class = "हिंडोला-नियंत्रण बाएँ" href = "#myCarousel" data-slide = "पिछला" > ‹ </a>   
  <a class = "हिंडोला-नियंत्रण अधिकार" href = "#myCarousel" डेटा-स्लाइड = "अगला" > › </a>   
</div>

प्रयोग

डेटा विशेषता के माध्यम से

हिंडोला कें स्थिति कें आसानी सं नियंत्रित करय कें लेल डाटा विशेषताक कें उपयोग करूं. data-slideकीवर्ड स्वीकार करै छै prevया next, जे स्लाइड स्थिति क॑ ओकरऽ वर्तमान स्थिति के सापेक्ष बदलै छै. वैकल्पिक रूप स, data-slide-toएक कच्चा स्लाइड सूचकांक कए हिंडोला कए पास करबाक लेल उपयोग करू data-slide-to="2", जे कूद क' स्लाइड स्थिति कए एकटा विशेष अनुक्रमणिका स शुरू होइत अछि 0।

जावास्क्रिप्ट के माध्यम से

मैन्युअल रूप स हिंडोला के कॉल करू:

$ ( '.हिंडोला' ). हिंडोला () 1।

विकल्प

विकल्पक कें डाटा विशेषताक या जावास्क्रिप्ट्ज कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-interval="".

विधियाँ

.हिंडोला (विकल्प) 1।

एकटा वैकल्पिक विकल्पक कें साथ हिंडोला कें आरंभ करयत छै objectआ आइटम कें माध्यम सं साइकिल चलानाय शुरू करयत छै.

$ ( '.हिंडोला' ). हिंडोला ({
  अंतराल : 2000 के 
}) के।

.हिंडोला ('चक्र')।

हिंडोला आइटम के माध्यम स बामा स दाहिना दिस चक्र।

.हिंडोला('विराम') २.

हिंडोला के आइटम के माध्यम सं साइकिल चलाबय सं रोकैत अछि.

.हिंडोला(संख्या) .

हिंडोला क॑ एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) प॑ चक्र करै छै ।

.हिंडोला('पिछला')

पिछला आइटम पर चक्र।

.हिंडोला('अगला')

अगिला आइटम पर चक्र।

घटनाक्रम

बूटस्ट्रैप केरऽ हिंडोला वर्ग हिंडोला कार्यक्षमता म॑ हुक करै लेली दू घटना क॑ उजागर करै छै ।

उदाहरण

कोनों भी फॉर्म टेक्स्ट इनपुट कें साथ जल्दी सं सुरुचिपूर्ण टाइपहेड्स बनावा कें लेल एकटा बुनियादी, आसानी सं विस्तारित प्लगइन.

<इनपुट प्रकार = "पाठ" डेटा-प्रदान = "typeahead" >  

अहां सेट करय चाहब जे autocomplete="off"डिफ़ॉल्ट ब्राउज़र मेनू कें बूटस्ट्रैप टाइपएहेड ड्रॉपडाउन पर देखय सं रोकय.

प्रयोग

डेटा विशेषता के माध्यम से

टाइपएहेड कार्यक्षमता कें साथ कोनों तत्व कें पंजीकृत करय कें लेल डाटा विशेषताक कें जोड़य जैना की उपरोक्त उदाहरण मे दिखायल गेलय छै.

जावास्क्रिप्ट के माध्यम से

टाइपएहेड केँ मैन्युअल रूप सँ एहि सँ कॉल करू:

$ ( '.टाइपएहेड' ). टाइपएहेड () 1।

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-source="".

विधियाँ

.typeahead (विकल्प) .

एकटा टाइपएहेड क संग एकटा इनपुट कए आरंभ करैत अछि.

उदाहरण

बामा कात उपनेविगेशन प्रत्यय प्लगइन के लाइव डेमो अछि.

प्रयोग

डेटा विशेषता के माध्यम से

कोनो भी तत्व म॑ आसानी स॑ एफिक्स व्यवहार जोड़ै data-spy="affix"लेली, बस वू तत्व म॑ जोड़ै छै जेकरा प॑ आपने जासूसी करना चाहै छियै । तखन ऑफसेट के प्रयोग ई परिभाषित करय लेल करू जे कोनो तत्व के पिनिंग के कहिया चालू आ बंद करब.

<div data-spy = "affix" डेटा-ऑफसेट-शीर्ष = "200" > ... </div>  

जावास्क्रिप्ट के माध्यम से

जावास्क्रिप्ट के माध्यम स प्रत्यय प्लगइन के कॉल करू:

$ ( '# नवबार' )। प्रत्यय () 1।

विकल्प

विकल्पक कें डाटा एट्रिब्यूट या जावास्क्रिप्ट कें माध्यम सं पास कैल जा सकय छै. डेटा विशेषताक लेल, विकल्प नाम केँ data-, मे संलग्न करू , जेना data-offset-top="200".