मोडल के बारे में

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

स्थिर उदाहरण

नीचाँ एकटा स्थिर रूपसँ रेंडर कएल गेल मोडल अछि ।

लाइव डेमो

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

बूटस्ट्रैप-मोडल का प्रयोग

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

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

विकल्प

मार्कअप

जावास्क्रिप्ट के एक लाइन लिखने बिना अहां अपन पेज पर मोडल के आसानी सं सक्रिय क सकय छी. बस data-toggle="modal"एकटा नियंत्रक तत्व पर सेट करू जकरा संग अछि data-target="#foo"या href="#foo"जे एकटा मोडल तत्व आईडी स मेल खाइत अछि, आ जखन क्लिक कएल जाएत तखन ई अहाँक मोडल लॉन्च करत ।

साथ ही, अपनऽ मोडल इंस्टेंस म॑ विकल्प जोड़ै लेली, बस ओकरा या त॑ नियंत्रण तत्व या खुद मोडल मार्कअप प॑ अतिरिक्त डाटा विशेषता के रूप म॑ शामिल करलऽ जाय ।

<a class = "btn" data-toggle = "मोडल" href = "#myModal" > मोडल लॉन्च करू </a>    

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

विधियाँ

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

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

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

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

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

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

.modal('देखाउ')

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

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

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

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

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

घटनाक्रम

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

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

ड्रॉपडाउन के बारे में

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

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

ड्रॉपडाउन के परीक्षण करय लेल नीचा देल गेल नवबार आ गोली मे देल गेल ड्रॉपडाउन nav लिंक पर क्लिक करू.

• नियमित लिंक
• ड्रॉपडाउन
  • Action
  • Another action
  • Something else here
  • Separated link
• ड्रॉपडाउन 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ड्रॉपडाउन 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js क उपयोग करब

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

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

मार्कअप

कोनों तत्व मे जल्दी सं ड्रॉपडाउन कार्यक्षमता जोड़य कें लेल बस जोड़ूं data-toggle="dropdown"आ कोनों वैध बूटस्ट्रैप ड्रॉपडाउन स्वचालित रूप सं सक्रिय भ जायत.

<ul class = "नव नव-गोलियाँ" > 
  <li class = "सक्रिय" ><a href = "#" > नियमित लिंक </a></li>  
  <li वर्ग = "ड्रॉपडाउन" आईडी = "मेनू1" >  
    <a class = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "# मेनू1" >   
      ड्रॉपडाउन
      <b class = "कैरेट" </b> 
    </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      <li><a href = "#" > क्रिया </a></li> 
      <li><a href = "#" > एकटा आओर क्रिया </a></li> 
      <li><a href = "#" > एतय किछु आओर </a></li> 
      <li class = "विभाजक" </li> 
      <li><a href = "#" > अलग कएल गेल लिंक </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "नव नव-गोलियाँ" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" डेटा-लक्ष्य = "#" href = "पथ/टू/पेज.html" >    
      ड्रॉपडाउन
      <b class = "कैरेट" </b> 
    </a>
    <ul वर्ग = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

विधियाँ

$ (). ड्रॉपडाउन ()।

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

स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति कें आधार पर स्वचालित रूप सं nav लक्ष्य अपडेट करय कें लेल छै.

उदाहरण scrollspy के साथ नवबार

नीचा देल गेल क्षेत्र के स्क्रॉल करू आ नेविगेशन अपडेट देखू. ड्रॉपडाउन सब आइटम के सेहो हाइलाइट कएल जाएत. एकरा आजमाउ!

bootstrap-scrollspy.js क उपयोग करब

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

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

मार्कअप

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

<body data-spy = "स्क्रॉल" > ... </body>  

विधियाँ

.scrollspy ('ताजा') .

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

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

विकल्प

घटनाक्रम

इ प्लगइन स्थानीय सामग्री कें माध्यम सं संक्रमण कें लेल त्वरित, गतिशील टैब आ गोली कार्यक्षमता जोड़य छै.

उदाहरण टैब

नुकायल फलक कें बीच टॉगल करय कें लेल नीचा देल गेल टैब पर क्लिक करूं, ड्रॉपडाउन मेनू कें माध्यम सं सेहो.

• घर
• रूपरेखा
• ड्रॉपडाउन
  • @fat
  • @mdo

bootstrap-tab.js क उपयोग करब

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

$ ( '# मेरा टैब एक' ). क्लिक करू ( फंक्शन ( ई ) { .  
  ई . 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 के उपयोग करै छै, आरू स्थानीय शीर्षक भंडारण लेली डाटा-विशेषता.

टूलटिप्स के उदाहरण उपयोग

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

bootstrap-tooltip.js क उपयोग करब

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

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

विकल्प

मार्कअप

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

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

विधियाँ

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

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

.tooltip ('देखाउ')

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

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

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

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

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

.tooltip ('टॉगल') .

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

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

पोपोवर के बारे में

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

* टूलटिप शामिल करबाक आवश्यकता अछि

उदाहरण होवर पोपोवर

पॉपओवर ट्रिगर करबाक लेल बटन पर माउस लगाउ।

bootstrap-popover.js क उपयोग करब

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

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

विकल्प

मार्कअप

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

विधियाँ

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

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

.popover('देखाउ')

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

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

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

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

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

.popover('टॉगल') .

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

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

अलर्ट के बारे में

अलर्ट प्लगइन अलर्ट मे निकट कार्यक्षमता जोड़य कें लेल एकटा छोट वर्ग छै.

उदाहरण अलर्ट

अलर्ट प्लगइन नियमित अलर्ट संदेशक पर काज करएयत छै, आ संदेशक कें ब्लॉक करएयत छै.

bootstrap-alert.js क उपयोग करब

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

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

मार्कअप

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

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

विधियाँ

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

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

.alert ('बंद') .

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

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

घटनाक्रम

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

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

विषय में

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

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

राज्य आओर टॉगल के लेल बटन प्लगइन के उपयोग करू.

bootstrap-button.js क उपयोग करब

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

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

मार्कअप

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

<!-- एकटा बटन पर टॉगलिंग केँ सक्रिय करबाक लेल data-toggle="button" जोड़ू -->
<button class = "btn" data-toggle = "बटन" > एकल टॉगल </बटन>  
 
<!-- btn-group पर चेकबॉक्स शैली टॉगलिंग क लेल data-toggle="buttons-checkbox" जोड़ू -->
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  <button class = "btn" > बाम </button> 
  <button class = "btn" > मध्य </बटन> 
  <button class = "btn" > दाहिना </बटन> 
</div>
 
<!-- btn-group पर रेडियो शैली टॉगलिंग क लेल data-toggle="buttons-radio" जोड़ू -->
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  <button class = "btn" > बाम </button> 
  <button class = "btn" > मध्य </बटन> 
  <button class = "btn" > दाहिना </बटन> 
</div>

विधियाँ

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

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

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

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

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

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

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

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

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

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

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

विषय में

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

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

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

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

bootstrap-collapse.js क उपयोग करब

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

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

विकल्प

मार्कअप

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

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

विधियाँ

.collapse(विकल्प) .

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

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

.collapse ('टॉगल') .

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

.collapse('देखाउ')

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

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

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

घटनाक्रम

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

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

विषय में

तत्वक कें माध्यम सं साइकिल चलावय कें लेल एकटा जेनेरिक प्लगइन. एकटा मस्ती-मस्ती।

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

नीचा देल गेल स्लाइड शो देखू।

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

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

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

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

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

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

‹ क . › .

bootstrap-carousel.js क उपयोग करब

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

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

विकल्प

मार्कअप

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

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

विधियाँ

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

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

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

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

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

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

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

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

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

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

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

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

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

घटनाक्रम

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

विषय में

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

उदाहरण

टाइपएहेड परिणाम देखाबय लेल नीचा देल गेल फील्ड मे टाइप करब शुरू करू.

bootstrap-typeahead.js क उपयोग करब

जावास्क्रिप्ट के माध्यम स टाइपएहेड के कॉल करू:

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

विकल्प

मार्कअप

टाइपएहेड कार्यक्षमता कें साथ कोनों तत्व कें पंजीकृत करय कें लेल डाटा विशेषता जोड़ूं.

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

विधियाँ

.typeahead (विकल्प) .

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