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

प्लगइन वैयक्तिकरित्या समाविष्ट केले जाऊ शकतात (जरी काहींना अवलंबित्व आवश्यक आहे), किंवा सर्व एकाच वेळी. bootstrap.js आणि bootstrap.min.js दोन्हीमध्ये एकाच फाईलमध्ये सर्व प्लगइन असतात.

डेटा विशेषता

तुम्ही JavaScript ची एक ओळ न लिहिता मार्कअप API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरू शकता. हे बूटस्ट्रॅपचे प्रथम श्रेणी API आहे आणि प्लगइन वापरताना तुमचा प्रथम विचार केला पाहिजे.

ते म्हणाले, काही परिस्थितींमध्ये ही कार्यक्षमता बंद करणे इष्ट असू शकते. म्हणून, आम्ही `डेटा-एपीआय'` ने बॉडी नेमस्पेसवरील सर्व इव्हेंट्स अनबाइंड करून डेटा विशेषता API अक्षम करण्याची क्षमता देखील प्रदान करतो. हे असे दिसते:

$ ( 'शरीर' ). बंद ( '.data-api' )

वैकल्पिकरित्या, विशिष्ट प्लगइनला लक्ष्य करण्यासाठी, फक्त प्लगइनचे नाव नेमस्पेस म्हणून डेटा-एपीआय नेमस्पेससह समाविष्ट करा:

$ ( 'शरीर' ). बंद ( '.alert.data-api' )

प्रोग्रामॅटिक API

आम्हाला विश्वास आहे की तुम्ही JavaScript API द्वारे सर्व बूटस्ट्रॅप प्लगइन पूर्णपणे वापरण्यास सक्षम असाल. सर्व सार्वजनिक API एकल, साखळी पद्धती आहेत आणि त्यावर कारवाई केलेले संकलन परत करतात.

$ ( ".btn. धोका" ). बटण ( "टॉगल" ). addClass ( "चरबी" )

सर्व पद्धतींनी पर्यायी पर्याय ऑब्जेक्ट, विशिष्ट पद्धतीला लक्ष्य करणारी स्ट्रिंग किंवा काहीही (जे डीफॉल्ट वर्तनासह प्लगइन सुरू करते) स्वीकारले पाहिजे:

$ ( "#myModal" ). modal () // डीफॉल्टसह आरंभ केलेले                       
$ ( "#myModal" ). modal ({ keyboard : false }) // कीबोर्डशिवाय आरंभ केलेले     
$ ( "#myModal" ). modal ( 'शो' ) // आरंभ करतो आणि लगेच शोला आमंत्रित करतो                

प्रत्येक प्लगइन त्याच्या रॉ कन्स्ट्रक्टरला `कन्स्ट्रक्टर` गुणधर्मावर देखील उघड करते: $.fn.popover.Constructor. तुम्ही विशिष्ट प्लगइन उदाहरण मिळवू इच्छित असल्यास, ते थेट घटकावरून पुनर्प्राप्त करा: $('[rel=popover]').data('popover').

संघर्ष नाही

कधीकधी इतर UI फ्रेमवर्कसह बूटस्ट्रॅप प्लगइन वापरणे आवश्यक असते. या परिस्थितीत, नेमस्पेसची टक्कर अधूनमधून होऊ शकते. असे झाल्यास, तुम्ही .noConflictज्या प्लगइनचे मूल्य परत करू इच्छिता त्यावर कॉल करू शकता.

var bootstrapButton = $ . fn _ बटण _ noConflict () // $.fn.button पूर्वी नियुक्त केलेल्या मूल्यावर परत करा 
$ . fn _ bootstrapBtn = बूटस्ट्रॅप बटण             // $().bootstrapBtn बूटस्ट्रॅप कार्यक्षमता द्या

कार्यक्रम

बूटस्ट्रॅप बहुतेक प्लगइनच्या अद्वितीय क्रियांसाठी सानुकूल इव्हेंट प्रदान करते. सामान्यतः, हे अनंत आणि भूतकाळातील कृदंत स्वरूपात येतात - जिथे अनंत (उदा. show) एखाद्या घटनेच्या प्रारंभी ट्रिगर केले जाते आणि त्याचे भूतकाळातील कृदंत स्वरूप (उदा. shown) क्रिया पूर्ण झाल्यावर ट्रिगर होते.

सर्व अनंत घटना पूर्वनिर्धारित कार्यक्षमता प्रतिबंधित करतात. हे कृती सुरू होण्यापूर्वी त्याची अंमलबजावणी थांबविण्याची क्षमता प्रदान करते.

$ ( '#myModal' ). वर ( 'शो' , फंक्शन ( ई ) {   
    जर (! डेटा ) परत करा ई . प्रतिबंधित डीफॉल्ट () // मॉडेल दर्शविण्यापासून थांबवते   
})

संक्रमणांबद्दल

साध्या संक्रमण प्रभावांसाठी, इतर JS फायलींसोबत bootstrap-transition.js एकदा समाविष्ट करा. जर तुम्ही संकलित (किंवा मिनिफाइड) bootstrap.js वापरत असाल , तर हे समाविष्ट करण्याची गरज नाही—ते आधीपासून आहे.

केसेस वापरा

संक्रमण प्लगइनची काही उदाहरणे:

• मोडल्समध्ये स्लाइडिंग किंवा फेडिंग
• टॅब लुप्त होत आहे
• अलर्ट बाहेर लुप्त होत आहे
• सरकता कॅरोसेल पटल

उदाहरणे

मॉडेल्स सुव्यवस्थित, परंतु लवचिक, किमान आवश्यक कार्यक्षमतेसह आणि स्मार्ट डीफॉल्टसह संवाद प्रॉम्प्ट करतात.

स्थिर उदाहरण

शीर्षलेख, मुख्य भाग आणि तळटीपमधील क्रियांच्या संचासह प्रस्तुत केलेले मॉडेल.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> मॉडेल शीर्षलेख </h3>
  </div>
  <div वर्ग = "मॉडल-बॉडी" > 
    <p> एक सुरेख शरीर… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > बंद करा </a>  
    <a href="#" class="btn btn-primary" > बदल जतन करा </a> _  
  </div>
</div>

थेट डेमो

खालील बटणावर क्लिक करून JavaScript द्वारे मॉडेल टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.

<!-- मोडल ट्रिगर करण्यासाठी बटण -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > डेमो मॉडेल लाँच करा </a>    
 
<!-- मॉडेल -->
<div id = "myModal" वर्ग = "modal hide fade" tabindex = "-1" भूमिका = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > मॉडेल शीर्षलेख </h3> 
  </div>
  <div वर्ग = "मॉडल-बॉडी" > 
    <p> एक सुरेख शरीर… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > बंद करा </button>   
    <button class = "btn btn-primary" > बदल जतन करा </button> 
  </div>
</div>

वापर

डेटा विशेषतांद्वारे

JavaScript न लिहिता एक मॉडेल सक्रिय करा. कंट्रोलर घटकावर सेट करा data-toggle="modal", जसे की बटणासह, data-target="#foo"किंवा href="#foo"टॉगल करण्यासाठी विशिष्ट मॉडेल लक्ष्य करण्यासाठी.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > मोडल लाँच करा </button>   

JavaScript द्वारे

myModalJavaScript च्या एका ओळीसह id सह मॉडेल कॉल करा :

$ ( '#myModal' ). मॉडेल ( पर्याय )

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-backdrop="".

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

पद्धती

.modal(पर्याय)

तुमची सामग्री मॉडेल म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

$ ( '#myModal' ). मॉडेल ({
  कीबोर्ड : असत्य 
})

.modal('टॉगल')

मॅन्युअली एक मॉडेल टॉगल करते.

$ ( '#myModal' ). मॉडेल ( 'टॉगल' )

.modal('शो')

मॅन्युअली एक मॉडेल उघडते.

$ ( '#myModal' ). मॉडेल ( 'शो' )

.modal('लपवा')

मॅन्युअली एक मॉडेल लपवते.

$ ( '#myModal' ). मॉडेल ( 'लपवा' )

कार्यक्रम

बूटस्ट्रॅपचा मॉडेल क्लास मोडल फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#myModal' ). वर ( 'लपलेले' , कार्य () {   
  // काहीतरी कर…
})

उदाहरणे

नॅव्हबार, टॅब आणि गोळ्यांसह या साध्या प्लगइनसह जवळजवळ कोणत्याही गोष्टीमध्ये ड्रॉपडाउन मेनू जोडा.

नवबाराच्या आत

टॅबमध्ये

वापर

डेटा विशेषतांद्वारे

data-toggle="dropdown"ड्रॉपडाउन टॉगल करण्यासाठी लिंक किंवा बटणावर जोडा .

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

URL अखंड ठेवण्यासाठी, data-targetऐवजी विशेषता वापरा href="#".

<div वर्ग = "ड्रॉपडाउन" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ड्रॉपडाउन
    <b class = "caret" ></b> 
  </a>
  <ul class = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScript द्वारे

JavaScript द्वारे ड्रॉपडाउन कॉल करा:

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

पर्याय

काहीही नाही

पद्धती

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

दिलेल्या नॅव्हबार किंवा टॅब केलेल्या नेव्हिगेशनसाठी मेनू टॉगल करण्यासाठी प्रोग्रामेटिक एपीआय.

नवबारमधील उदाहरण

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

वापर

डेटा विशेषतांद्वारे

तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्हाला ज्या घटकाची टेहळणी करायची आहे (बहुतेक ते मुख्य भाग असेल) आणि data-target=".navbar"कोणती नेव्ही वापरायची ते निवडा. तुम्हाला एका .navघटकासह scrollspy वापरायचा आहे.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

JavaScript द्वारे

JavaScript द्वारे scrollspy ला कॉल करा:

$ ( '#navbar' ). scrollspy ()

पद्धती

.scrollspy('रिफ्रेश')

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

$ ( '[डेटा-स्पाय="स्क्रोल"]' ). प्रत्येक ( कार्य () {  
  var $spy = $ ( हे ). scrollspy ( 'रिफ्रेश' )
});

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset="".

कार्यक्रम

उदाहरण टॅब

स्थानिक सामग्रीच्या उपखंडातून संक्रमण करण्यासाठी द्रुत, डायनॅमिक टॅब कार्यक्षमता जोडा, अगदी ड्रॉपडाउन मेनूद्वारे.

वापर

JavaScript द्वारे टॅब करण्यायोग्य टॅब सक्षम करा (प्रत्येक टॅब स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):

$ ( '#myTab a' ). क्लिक करा ( कार्य ( e ) {  
  ई _ प्रतिबंधित डीफॉल्ट ();
  $ ( हे ). टॅब ( 'शो' );
})

तुम्ही वैयक्तिक टॅब अनेक प्रकारे सक्रिय करू शकता:

$ ( '#myTab a[href="#profile"]' ). टॅब ( 'शो' ); // नावानुसार टॅब निवडा 
$ ( '#myTab a:first' ). टॅब ( 'शो' ); // पहिला टॅब निवडा 
$ ( '#myTab a:last' ). टॅब ( 'शो' ); // शेवटचा टॅब निवडा 
$ ( '#myTab li:eq(2) a' ). टॅब ( 'शो' ); // तिसरा टॅब निवडा (0-अनुक्रमित) 

मार्कअप

तुम्ही कोणतेही JavaScript न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"किंवा त्यावर. टॅबमध्ये आणि वर्ग data-toggle="pill"जोडल्याने बूटस्ट्रॅप टॅब शैली लागू होईल.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > प्रोफाइल </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > संदेश </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > सेटिंग्ज </a></li>  
</ul>

पद्धती

$().टॅब

टॅब घटक आणि सामग्री कंटेनर सक्रिय करते. टॅबमध्ये DOM मध्ये कंटेनर नोडला लक्ष्य करणारा एक data-targetकिंवा एक असावा.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > घर </a></li>  
  <li><a href = "#profile" > प्रोफाइल </a></li> 
  <li><a href = "#messages" > संदेश </a></li> 
  <li><a href = "#settings" > सेटिंग्ज </a></li> 
</ul>
 
<div वर्ग = "टॅब-सामग्री" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "सेटिंग्ज" > ... </div>  
</div>
 
<script>
  $ ( कार्य () {  
    $ ( '#myTab a:last' ). टॅब ( 'शो' );
  })
</script>

कार��यक्रम

$ ( 'a[data-toggle="tab"]' ). वर ( 'दर्शविले' , कार्य ( ई ) {   
  ई _ लक्ष्य // सक्रिय टॅब
  ई _ संबंधित लक्ष्य // मागील टॅब
})

उदाहरणे

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

कार्यप्रदर्शन कारणांसाठी, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत, म्हणजे तुम्ही ते स्वतःच सुरू केले पाहिजेत .

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

चार दिशा

इनपुट गटांमध्ये टूलटिप्स

बूटस्ट्रॅप इनपुट गटांसह टूलटिप आणि पॉपओव्हर्स वापरताना, containerअवांछित दुष्परिणाम टाळण्यासाठी तुम्हाला (खाली दस्तऐवजीकरण केलेले) पर्याय सेट करावा लागेल.

वापर

JavaScript द्वारे टूलटिप ट्रिगर करा:

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

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

मार्कअप

<a href = "#" data-toggle = "tooltip" title = "first tooltip" > माझ्यावर फिरवा </a>   

पद्धती

$().टूलटिप(पर्याय)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

.टूलटिप('शो')

घटकाची टूलटिप प्रकट करते.

$ ( '#element' ). टूलटिप ( 'शो' )

.टूलटिप('लपवा')

घटकाची टूलटिप लपवते.

$ ( '#element' ). टूलटिप ( 'लपवा' )

.टूलटिप('टॉगल')

घटकाची टूलटिप टॉगल करते.

$ ( '#element' ). टूलटिप ( 'टॉगल' )

.टूलटिप('नष्ट')

घटकाची टूलटिप लपवते आणि नष्ट करते.

$ ( '#element' ). टूलटिप ( 'नाश करा' )

उदाहरणे

गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा. पॉपओव्हर ट्रिगर करण्यासाठी बटणावर फिरवा. टूलटिप समाविष्ट करणे आवश्यक आहे.

स्थिर पॉपओव्हर

चार पर्याय उपलब्ध आहेत: वर, उजवीकडे, तळाशी आणि डावीकडे संरेखित.

जावास्क्रिप्ट आणि विशेषतामधील सामग्रीमधून पॉपओव्हर्स म्हणून कोणतेही मार्कअप दाखवले जात नाही data.

थेट डेमो

चार दिशा

वापर

JavaScript द्वारे popovers सक्षम करा:

$ ( '#उदाहरण' ). पॉपओव्हर ( पर्याय )

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-animation="".

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्हाला त्यांचा वापर करायचा असेल तर फक्त निवडक पर्याय निर्दिष्ट करा.

पद्धती

$().पॉपओव्हर(पर्याय)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('शो')

घटक पॉपओव्हर प्रकट करते.

$ ( '#element' ). पॉपओव्हर ( 'शो' )

.popover('लपवा')

एक घटक पॉपओव्हर लपवते.

$ ( '#element' ). पॉपओव्हर ( 'लपवा' )

.popover('टॉगल')

घटक पॉपओव्हर टॉगल करते.

$ ( '#element' ). पॉपओव्हर ( 'टॉगल' )

.popover('नष्ट')

घटकाचे पॉपओव्हर लपवते आणि नष्ट करते.

$ ( '#element' ). पॉपओव्हर ( 'नष्ट' )

उदाहरणे सूचना

या प्लगइनसह सर्व अलर्ट संदेशांमध्ये डिसमिस कार्यक्षमता जोडा.

वापर

JavaScript द्वारे अलर्ट डिसमिस करणे सक्षम करा:

$ ( ". अलर्ट" ). इशारा ()

मार्कअप

data-dismiss="alert"अलर्ट क्लोज कार्यक्षमता स्वयंचलितपणे देण्यासाठी फक्त तुमच्या क्लोज बटणावर जोडा .

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

पद्धती

$().सूचना()

जवळच्या कार्यक्षमतेसह सर्व अलर्ट गुंडाळते. तुमच्‍या सूचना बंद केल्‍यावर अॅनिमेट करण्‍यासाठी, त्‍यांना आधीपासून लागू केलेला वर्ग .fadeआणि वर्ग आहे याची खात्री करा..in

.alert('बंद')

सूचना बंद करते.

$ ( ". अलर्ट" ). इशारा ( 'बंद' )

कार्यक्रम

बूटस्ट्रॅपचा अॅलर्ट क्लास अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#my-alert' ). bind ( 'बंद' , कार्य () {   
  // काहीतरी कर…
})

उदाहरण वापर

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

स्टेटफुल

data-loading-text="Loading..."बटणावर लोडिंग स्थिती वापरण्यासाठी जोडा .

<button type = "button" class = "btn btn-primary" data-loading-text = "लोड करत आहे..."    > लोड होत आहे स्थिती </button>

सिंगल टॉगल

data-toggle="button"एका बटणावर टॉगलिंग सक्रिय करण्यासाठी जोडा .

<button type = "button" class = "btn btn-primary" data-toggle = "button" > सिंगल टॉगल    </button>

चेकबॉक्स

data-toggle="buttons-checkbox"btn-ग्रुपवर चेकबॉक्स शैली टॉगल करण्यासाठी जोडा .

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > डावे </button>  
  <button type = "button" class = "btn btn-प्राथमिक" > मध्यम </ बटन>  
  <button type = "button" class = "btn btn-primary" > उजवे </ बटन>  
</div>

रेडिओ

data-toggle="buttons-radio"btn-ग्रुपवर रेडिओ शैली टॉगलसाठी जोडा .

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > डावे </button>  
  <button type = "button" class = "btn btn-प्राथमिक" > मध्यम </ बटन>  
  <button type = "button" class = "btn btn-primary" > उजवे </ बटन>  
</div>

वापर

JavaScript द्वारे बटणे सक्षम करा:

$ ( '.nav-टॅब' ). बटण ()

मार्कअप

बटण प्लगइनसाठी डेटा विशेषता अविभाज्य आहेत. विविध मार्कअप प्रकारांसाठी खालील उदाहरण कोड पहा.

पर्याय

काहीही नाही

पद्धती

$().बटण('टॉगल')

टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.

<button type = "button" class = "btn" data-toggle = "button" > … </button>    

$().बटण('लोड करत आहे')

बटण स्थिती लोड करण्यासाठी सेट करते - बटण अक्षम करते आणि मजकूर लोड करण्यासाठी मजकूर बदलते. डेटा विशेषता वापरून लोडिंग मजकूर बटण घटकावर परिभाषित केला पाहिजे data-loading-text.

<button type = "button" class = "btn" data-loading-text = "सामग्री लोड करत आहे..." > ... </button>    

$().बटण('रीसेट')

बटण स्थिती रीसेट करते - मजकूर मूळ मजकुरामध्ये बदलतो.

$().बटण(स्ट्रिंग)

बटण स्थिती रीसेट करते - कोणत्याही डेटा परिभाषित मजकूर स्थितीत मजकूर स्वॅप करते.

<button type = "button" class = "btn" data-complete-text = "पूर्ण!" > ... </ बटन>    
<script>
  $ ( '.btn' ). बटण ( 'पूर्ण' )
</script>

बद्दल

अ‍ॅकॉर्डियन्स आणि नेव्हिगेशन सारख्या संकुचित घटकांसाठी बेस शैली आणि लवचिक समर्थन मिळवा.

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

एकॉर्डियनचे उदाहरण

कोलॅप्स प्लगइन वापरून, आम्ही एक साधे एकॉर्डियन शैलीचे विजेट तयार केले:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a वर्ग = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseOne" >    
        संकुचित करण्यायोग्य गट आयटम #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body collapse in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a वर्ग = "accordion-toggle" data-toggle = "colapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        संकुचित करण्यायोग्य गट आयटम #2
      </a>
    </div>
    <div id = "collapseTwo" वर्ग = "accordion-body collapse" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

तुम्ही अॅकॉर्डियन मार्कअपशिवाय प्लगइन देखील वापरू शकता. दुसर्‍या घटकाचा विस्तार आणि कोलॅप्सिंग टॉगल करण्यासाठी बटण बनवा.

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

वापर

डेटा विशेषतांद्वारे

संकुचित करण्यायोग्य घटकाचे नियंत्रण स्वयंचलितपणे नियुक्त करण्यासाठी फक्त घटकामध्ये जोडा data-toggle="collapse"आणि a . विशेषता संकुचित लागू करण्यासाठी css निवडक स्वीकारते data-target. संकुचित घटकामध्ये data-targetवर्ग जोडण्याची खात्री करा . collapseतुम्हाला ते डीफॉल्ट उघडायचे असल्यास, अतिरिक्त वर्ग जोडा in.

संकुचित नियंत्रणामध्ये एकॉर्डियन-सारखे गट व्यवस्थापन जोडण्यासाठी, डेटा विशेषता जोडा data-parent="#selector". हे कृतीत पाहण्यासाठी डेमोचा संदर्भ घ्या.

JavaScript द्वारे

यासह व्यक्तिचलितपणे सक्षम करा:

$ ( ". कोलॅप्स" ). कोसळणे ()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-parent="".

पद्धती

.कोलॅप्स(पर्याय)

तुमची सामग्री संकुचित करण्यायोग्य घटक म्हणून सक्रिय करते. पर्यायी पर्याय स्वीकारतो object.

$ ( '#myCollapsible' ). संकुचित ({
  टॉगल : खोटे 
})

.कोलॅप्स('टॉगल')

दर्शविण्यासाठी किंवा लपविण्यासाठी संकुचित करण्यायोग्य घटक टॉगल करते.

.कोलॅप्स('शो')

एक संकुचित घटक दर्शविते.

.कोलॅप्स ('लपवा')

संकुचित करता येणारा घटक लपवतो.

कार्यक्रम

बूटस्ट्रॅपचा कोलॅप्स क्लास कोलॅप्स फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#myCollapsible' ). वर ( 'लपलेले' , कार्य () {   
  // काहीतरी कर…
})

कॅरोसेलचे उदाहरण

खालील स्लाइडशो कॅरोसेल सारख्या घटकांद्वारे सायकलिंगसाठी एक सामान्य प्लगइन आणि घटक दर्शवितो.

प्रथम लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

दुसरे लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

तिसरा लघुप्रतिमा लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

‹ ›

<div id = "myCarousel" वर्ग = "कॅरोसेल स्लाइड" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- कॅरोसेल आयटम -->
  <div class = "carousel-inner" > 
    <div वर्ग = "सक्रिय आयटम" > … </div> 
    <div वर्ग = "आयटम" > … </div> 
    <div वर्ग = "आयटम" > … </div> 
  </div>
  <!-- कॅरोसेल नेव्ही -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

वापर

डेटा विशेषतांद्वारे

कॅरोसेलची स्थिती सहजपणे नियंत्रित करण्यासाठी डेटा विशेषता वापरा. data-slideकीवर्ड स्वीकारते prevकिंवा next, जे स्‍लाइड स्‍थान बदलते स्‍लाइड स्‍थितीच्‍या वर्तमान स्‍थितीशी संबंधित. वैकल्पिकरित्या, data-slide-toकॅरोसेलला रॉ स्लाइड इंडेक्स पास करण्यासाठी वापरा data-slide-to="2", ज्याने स्लाईडची स्थिती एका विशिष्ट निर्देशांकावर उडी मारली आहे 0.

JavaScript द्वारे

यासह कॅरोसेलला मॅन्युअली कॉल करा:

$ ( '. कॅरोसेल' ). कॅरोसेल ()

पर्याय

डेटा विशेषता किंवा JavaScriptz द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-interval="".

पद्धती

कॅरोसेल(पर्याय)

पर्यायी पर्यायांसह कॅरोसेल objectसुरू करते आणि आयटममधून सायकल चालवण्यास सुरुवात करते.

$ ( '. कॅरोसेल' ). कॅरोसेल ({
  मध्यांतर : 2000 
})

कॅरोसेल ('सायकल')

कॅरोसेल आयटममधून डावीकडून उजवीकडे सायकल.

.carousel('विराम द्या')

कॅरोसेलला आयटममधून सायकल चालवण्यापासून थांबवते.

कॅरोसेल(संख्या)

कॅरोसेलला एका विशिष्‍ट फ्रेमवर (0 आधारित, अॅरे प्रमाणे) सायकल करते.

कॅरोसेल('मागील')

मागील आयटमवर सायकल.

कॅरोसेल ('पुढील')

पुढील आयटमवर सायकल.

कार्यक्रम

बूटस्ट्रॅपचा कॅरोसेल क्लास कॅरोसेल कार्यक्षमतेमध्ये जोडण्यासाठी दोन इव्हेंट्स उघड करतो.

उदाहरण

कोणत्याही फॉर्म मजकूर इनपुटसह त्वरीत मोहक टाइपहेड तयार करण्यासाठी मूलभूत, सहज विस्तारित प्लगइन.

<इनपुट प्रकार = "मजकूर" डेटा-प्रदान = "टाइपहेड" >  

autocomplete="off"बूटस्ट्रॅप टाइपहेड ड्रॉपडाउनवर डीफॉल्ट ब्राउझर मेनू दिसण्यापासून प्रतिबंधित करण्यासाठी तुम्ही सेट करू इच्छित असाल .

वापर

डेटा विशेषतांद्वारे

वरील उदाहरणात दाखवल्याप्रमाणे टाइपहेड कार्यक्षमतेसह घटकाची नोंदणी करण्यासाठी डेटा विशेषता जोडा.

JavaScript द्वारे

टाइपहेडला मॅन्युअली कॉल करा:

$ ( '.typeahead' ). टाइपहेड ()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-source="".

पद्धती

.typeahead(पर्याय)

टाइपहेडसह इनपुट सुरू करते.

उदाहरण

डावीकडील सबनेव्हिगेशन हे ऍफिक्स प्लगइनचे थेट डेमो आहे.

वापर

डेटा विशेषतांद्वारे

कोणत्याही घटकावर सहजतेने affix वर्तन जोडण्यासाठी, फक्त data-spy="affix"तुम्हाला ज्या घटकाची हेरगिरी करायची आहे त्यात जोडा. नंतर घटकाचे पिनिंग चालू आणि बंद केव्हा टॉगल करायचे ते परिभाषित करण्यासाठी ऑफसेट वापरा.

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

JavaScript द्वारे

JavaScript द्वारे affix प्लगइनवर कॉल करा:

$ ( '#navbar' ). जोडणे ()

पर्याय

डेटा विशेषता किंवा JavaScript द्वारे पर्याय पास केले जाऊ शकतात. डेटा विशेषतांसाठी, पर्यायाचे नाव , मध्ये data-प्रमाणे जोडा data-offset-top="200".