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

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

डेटा गुणधर्म

तुमी सगळे Bootstrap प्लगइन शुध्दपणान मार्कअप API वरवीं वापरूं येतात, जावास्क्रिप्टाची एकूय ओळ बरयनासतना. हो Bootstrap चो पयलो वर्ग API आसा आनी प्लगइन वापरतना तुमचो पयलो विचार आसपाक जाय.

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

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

पर्यायीपणान, विशिश्ट प्लगइनाक लक्ष्य करपाक, फकत प्लगइनाचे नांव नांवस्थान म्हणून डेटा-api नांवस्थाना वांगडा अशे तरेन समाविष्ट करात:

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

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

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

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

सगळ्या पद्दतींनी पर्यायी पर्याय वस्तू, विशिश्ट पद्दतीक लक्ष्य करपी स्ट्रिंग स्वीकारपाक जाय, वा कांयच ना (जें मुलभूत वर्तनान प्लगइन सुरू करता):

$ ( "#मायमोडल" ). modal () // मुलभूतां सयत आरंभ केला                       
$ ( "#मायमोडल" ). modal ({ keyboard : false }) // कीबोर्ड नाशिल्ल्यान आरंभ केला     
$ ( "#मायमोडल" ). modal ( 'show' ) // दाखोवपाक रोखडेंच आरंभ करता आनी आवाहन करता                

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

संघर्श ना

केन्ना केन्नाय हेर UI फ्रेमवर्कां वांगडा Bootstrap प्लगइन वापरप गरजेचें आसता. ह्या परिस्थितींत, नेमस्पेस टक्कर केन्ना केन्नाय जावंक शकता. अशें जाल्यार, तुमकां .noConflictमोल परत करपाक जाय आशिल्ल्या प्लगइनाचेर तुमी कॉल करूंक शकतात.

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

घडणुको

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

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

$ ( '#मायमोडल' ). on ( 'दाखोवचें' , फंक्शन ( ई ) { .   
    जर (! डेटा ) परत ई . preventDefault () // मोडल दाखोवपाक थांबयता   
}) हें .

संक्रमणां विशीं

साद्या संक्रमण परिणामांखातीर, हेर JS फायलींवांगडा एकदां bootstrap-transition.js समाविष्ट करात. तुमी संकलित (वा ल्हान केल्लें) bootstrap.js वापरतात जाल्यार , हें समाविष्ट करपाची गरज ना-तें पयलींच आसा.

वापर केस

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

• मोडलांत सरकप वा फिकट जावप
• टॅब भायर फिकट जावप
• फीडिंग आउट अलर्ट
• सरकपी हिंडोळा फलक

उदाहरणां

मोडल सुगम, पूण लवचीक, उण्यांत उणी गरज आशिल्ली कार्यक्षमताय आनी स्मार्ट मुलभूत आशिल्ले संवाद प्रॉम्प्ट आसात.

स्थिर उदाहरण

तळभागांत हेडर, बॉडी, आनी कृतीचो संच आशिल्लो रेंडर केल्लो मोडल.

<div class = "मोडल लिपोवप फीका करप" > 
  <div वर्ग = "मोडल-शीर्षक" > 
    <बटण प्रकार = "बटण" वर्ग = "बंद" डेटा-डिस्मिस = "मोडल" 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" role = "बटण" वर्ग = "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 class = "btn btn-primary" > बदल जतनाय घेयात </button> 
  </div> हें नांव
</div> हें नांव

वापर

डेटा गुणधर्मां वरवीं

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

<बटण प्रकार = "बटण" डेटा-टॉगल = "मोडल" डेटा-लक्ष्य = "#myModal" > मोडल सुरू करचें </बटण>   

जावास्क्रिप्ट वरवीं

myModalजावास्क्रिप्टाच्या एकाच ओळीन id आशिल्ल्या मोडलाक कॉल करात :

$ ( '#मायमोडल' ). मोडल ( पर्याय ) .

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-backdrop="".

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

पद्दती

.मोडल(पर्याय) .

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

$ ( '#मायमोडल' ). मोडल ({ 1).
  कीबोर्ड : खोटें 
}) हें .

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

हाताळणीन एक मोडल टॉगल करता.

$ ( '#मायमोडल' ). मोडल ( 'टॉगल' ) .

.मोडल('दाखोवचें') .

हाताळणीन एक मोडल उगडटा.

$ ( '#मायमोडल' ). मोडल ( 'दाखोवप' ) .

.मोडल('लिपोवप') .

हाताळणीन एक मोडल लिपयता.

$ ( '#मायमोडल' ). मोडल ( 'लिपोवप' ) .

घडणुको

बूटस्ट्रॅपाचो मोडल वर्ग मोडल कार्यक्षमतायांत हुक करपाखातीर कांय घडणुको उक्ती करता.

$ ( '#मायमोडल' ). on ( 'लिपलेले' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

उदाहरणां

ह्या साद्या प्लगइनान लागीं लागीं खंयच्याय वस्तूक ड्रॉपडावन मेनू जोडात, तातूंत नवबार, टॅब, आनी गोळ्यांचो आस्पाव आसा.

एक नवबार भितर

टॅबां भितर

वापर

डेटा गुणधर्मां वरवीं

data-toggle="dropdown"ड्रॉपडावन टॉगल करपाक दुव्यांत वा बटणांत जोडात .

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

URL अखंड दवरपाखातीर, च्या data-targetबदला गुणधर्म वापरात href="#".

<div वर्ग = "ड्रॉपडावन" > 
  <a class = "ड्रॉपडावन-टॉगल" id = "dLabel" भुमिका = "बटण" डेटा-टॉगल = "ड्रॉपडावन" डेटा-लक्ष्य = "#" href = "/page.html" >      
    ड्रॉपडावन करप
    <b वर्ग = "कॅरेट" </b> 
  </a> हें नांव
  <ul वर्ग = "ड्रॉपडावन-मेनू" भुमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul> हें नांव
</div> हें नांव

जावास्क्रिप्ट वरवीं

जावास्क्रिप्ट वरवीं ड्रॉपडावनांक कॉल करात:

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

पर्याय आसात

कांयच ना

पद्दती

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

दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाक मेनू टॉगल करपाखातीर एक प्रोग्रामेटिक api.

नवबारांत उदाहरण

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

वापर

डेटा गुणधर्मां वरवीं

तुमच्या टॉपबार नेव्हिगेशनांत scrollspy वर्तन सहज जोडपाक, फकत data-spy="scroll"तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकाक जोडात (चड करून हें कुडीचें आसतलें) आनी data-target=".navbar"खंयचो nav वापरचो तें निवडपाक. तुमकां घटका वांगडा scrollspy वापरपाची इत्सा जातली .nav.

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

जावास्क्रिप्ट वरवीं

जावास्क्रिप्ट वरवीं स्क्रोलस्पायक कॉल करात:

$ ( '#नवबार' ). स्क्रोलस्पी () 1.1.

पद्दती

.scrollspy('ताजें करचें') .

DOM वयल्यान घटक जोडपाक वा काडपा वांगडा scrollspy वापरतना, तुमकां रिफ्रेश पद्दत अशे तरेन कॉल करची पडटली:

$ ( '[डेटा-गुप्तचर="स्क्रॉल"]' ). प्रत्येक ( कार्य () { .  
  var $ गुप्तचर = $ ( हें ). scrollspy ( 'ताजें करचें' ) .
});

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-offset="".

घडणुको

उदाहरण टॅब

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

वापर

जावास्क्रिप्ट वरवीं टॅब करपाक येवपी टॅब सक्षम करात (दरेक टॅब वैयक्तीकपणान सक्रिय करपाची गरज आसा):

$ ( '#मायटॅब एक' ). क्लिक ( फंक्शन ( ई ) { .  
  इ . आडावपाक पूर्वनिर्धारीत ();
  $ ( हें ). tab ( 'दाखोवचें' );
}) हें .

तुमी जायत्या तरांनी वैयक्तीक टॅब सक्रिय करूंक शकतात:

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

मार्कअप करप

data-toggle="tab"तुमी फकत स्पश्ट करून वा data-toggle="pill"घटकाचेर कसलीच जावास्क्रिप्ट बरयनासतना टॅब वा पिल नेव्हिगेशन सक्रिय करूंक शकतात . navटॅबांत and nav-tabsवर्ग जोडल्यार ulबूटस्ट्रॅप टॅब स्टायलिंग लागू जातली.

<ul वर्ग = "nav nav-टॅब" > 
  <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लक्ष्य करपी एक कंटेनर नोड DOM त आसपाक जाय.

<ul वर्ग = "nav nav-टॅब" id = "मायटॅब" >  
  <li class = "सक्रीय" ><a href = "#घर" > घर </a></li>  
  <li><a href = "#प्रोफायल" > प्रोफायल </a></li> 
  <li><a href = "#संदेश" > संदेश </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 .  
    $ ( '#मायटॅब एक:निमाणें' ). tab ( 'दाखोवचें' );
  }) हें .
</script> हें नांव

घडणुको

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

उदाहरणां

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

कार्यक्षमताय कारणांक लागून, टूलटिप आनी पॉपओवर डेटा-एपीस ऑप्ट इन आसात, म्हळ्यार तुमी स्वता तांकां आरंभ करपाक जाय .

साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:

चार दिकां

इनपुट गटांत टूलटिप्स

बूटस्ट्रॅप इनपुट गटां वांगडा टूलटिप्स आनी पॉपओव्हर वापरतना, containerनाका आशिल्ले दुश्परिणाम टाळपाक तुमकां (सकयल दस्तावेजीत केल्लो) पर्याय सेट करचो पडटलो.

वापर

जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:

$ ( '# उदाहरण' ). साधनटिप ( पर्याय ) .

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-animation="".

मार्कअप करप

<a href = "#" data-toggle = "साधन टिप" title = "पयली साधन टिप" > म्हजेर होवर करात </a>   

पद्दती

$ ().साधन टिप (पर्याय)

घटक संग्रहाक टूलटिप हॅन्डलर जोडटा.

.tooltip('दाखोवचें') .

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

$ ( '# घटक' ). tooltip ( 'दाखोवचें' ) .

.tooltip('लिपोवप') .

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

$ ( '# घटक' ). tooltip ( 'लिपोवप' ) .

.tooltip('टॉगल') .

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

$ ( '# घटक' ). साधनटिप ( 'टॉगल' ) .

.tooltip('नाश करप') .

घटकाचो टूलटिप लिपयता आनी नश्ट करता.

$ ( '# घटक' ). tooltip ( 'नाश करप' ) .

उदाहरणां

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

स्थिर पोपोवर

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

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

लायव्ह डेमो

चार दिकां

वापर

जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:

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

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-animation="".

मार्कअप करप

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट इन आसात.तुमकां त्यो वापरपाक जाय जाल्यार फकत निवडक पर्याय निर्देशीत करात.

पद्दती

$ ().popover (पर्याय) 1.5.

घटक संग्रहाखातीर पोपोव्हर्स आरंभ करता.

.popover('दाखोवचें') .

एक तत्व पॉपओवर उक्तो करता.

$ ( '# घटक' ). popover ( 'दाखोवप' ) .

.popover('लिपोवप') .

एक तत्व पॉपओवर लिपयता.

$ ( '# घटक' ). पोपोव्हर ( 'लिपोवप' ) .

.popover('टॉगल') .

एक तत्व पॉपओवर टॉगल करता.

$ ( '# घटक' ). पोपोव्हर ( 'टॉगल' ) .

.popover('नाश करप') .

एका घटकाचो पोपोव्हर लिपयता आनी नश्ट करता.

$ ( '# घटक' ). popover ( 'नाश करप' ) .

देखीक सावधानताय

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

वापर

जावास्क्रिप्ट वरवीं इशारो काडून उडोवप सक्षम करात:

$ ( ".सचेतक" ). सावधान करप () .

मार्कअप करप

फकत data-dismiss="alert"तुमच्या बंद बटणांत जोडात आपोआप एक इशारो बंद कार्यक्षमताय दिवपाक.

<a class = "बंद करचें" data-dismiss = "अलर्ट" href = "#" > × </a> हें नांव   

पद्दती

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

सगळ्यो सावधानताय लागींच्या कार्यक्षमतेन गुठलायता. बंद आसतना तुमचीं सावधानताय भायर एनिमेट करपाक, तांकां पयलींच लागू केल्लो .fadeआनी वर्ग आसा हाची खात्री करात..in

.alert('बंद करचें') .

एक इशारो बंद करता.

$ ( ".सचेतक" ). alert ( 'बंद करचें' ) .

घडणुको

Bootstrap चो सावधान वर्ग सावधान कार्यक्षमतेक हुक करपा खातीर कांय घडणुको उक्ती करता.

$ ( '#म्हजी-अलर्ट' ). bind ( 'बंद' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

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

बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.

राज्यपूर्ण

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

<बटण प्रकार = "बटण" वर्ग = "btn btn-primary" data-loading-text = "लोड करप..." > लोड करप स्थिती </button>   

एकूच टॉगल करप

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

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

चेकबॉक्स आसा

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.1.

मार्कअप करप

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

पर्याय आसात

कांयच ना

पद्दती

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

पुश स्टेट टॉगल करता. बटणाक तें सक्रिय केलां अशें दिसप दिता.

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

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

बटण स्थिती लोड करपाक सेट करता - बटण अक्षम करता आनी मजकूर लोड करपाक मजकूर स्वॅप करता. डेटा गुणधर्म वापरून बटण घटकाचेर मजकूर लोड करपाची व्याख्या करची data-loading-text.

<बटण प्रकार = "बटण" वर्ग = "btn" डेटा-लोडिंग-मजकूर = "सामान लोड करप..." > ... </बटण>    

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

बटण स्थिती रिसेट करता - मजकूर मूळ मजकूरांत स्वॅप करता.

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

बटण स्थिती रिसेट करता - खंयच्याय डेटा व्याख्या केल्ल्या मजकूर स्थितींत मजकूर स्वॅप करता.

<बटण प्रकार = "बटण" वर्ग = "btn" डेटा-पूर्ण-मजकूर = "समाप्त!" > ... </बटण> हें नांव    
<लिपी> हें नांव
  $ ( '.बीटीएन' ). बटण ( 'पूर्ण' ) .
</script> हें नांव

संबंदीं

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

* संक्रमण प्लगइन समाविष्ट करपाची गरज आसा.

देखीक अकॉर्डियन

संकुचीत प्लगइन वापरून, आमी एक सादें अकॉर्डियन शैली विजेट तयार केलें:

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

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

<बटण प्रकार = "बटण" वर्ग = "btn btn-धोको" डेटा-टॉगल = "कोळप" डेटा -लक्ष्य = "# डेमो" >    
  सादें कोसळपाक येता
</बटण> हें नांव
 
<div id = "डेमो" वर्ग = "कलाप्स इन" > ... </div>  

वापर

डेटा गुणधर्मां वरवीं

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

संकुचीत नियंत्रणांत अकॉर्डियन-सारकें गट वेवस्थापन जोडपाक, डेटा गुणधर्म जोडात data-parent="#selector". हें कृतींत पळोवपाक डेमो पळयात.

जावास्क्रिप्ट वरवीं

हाताळणी करून सक्षम करात:

$ ( ".कोळप" ). कोसळप () .

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-parent="".

पद्दती

.collapse(पर्याय) .

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

$ ( '#माझें संकुचीत करपाक येता' ). कोसळप ({
  toggle : खोटें आसा 
}) हें .

.collapse('टॉगल') .

दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता.

.collapse('दाखोवचें') .

संकुचीत करपाक येवपी घटक दाखयता.

.collapse('लिपोवप') .

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

घडणुको

बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

$ ( '#माझें संकुचीत करपाक येता' ). on ( 'लिपलेले' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

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

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

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

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

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

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

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

क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

‹ हें . › हें .

<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 = "#मायकारोसेल" डेटा-स्लाइड = "आदीं" > ‹ </a> हें नांव   
  <a class = "हिंडोला-नियंत्रण उजवें" href = "#म्हजें हिंडोळा" डेटा-स्लाइड = "फुडें" > › </a> हें नांव   
</div> हें नांव

वापर

डेटा गुणधर्मां वरवीं

हिंडोलाची सुवात सहजपणान नियंत्रीत करपाक डेटा गुणधर्म वापरात. data-slideकीवर्ड स्वीकारता prevवा next, जे ताच्या सद्याच्या स्थितीच्या सापेक्ष स्लाइड स्थिती बदलता. पर्यायीपणान, वापरात data-slide-toएक कच्चो स्लाइड अनुक्रमणिका हिंडोळाक पास करपाक data-slide-to="2", जो jump's स्लाइड स्थिती एका विशिश्ट निर्देशांकाक सुरू जाता 0.

जावास्क्रिप्ट वरवीं

हिंडोळाक हाताळणीन कॉल करात:

$ ( '.हिंडोळ' ). हिंडोळ () 1 .

पर्याय आसात

पर्याय डेटा गुणधर्म वा JavaScriptz वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-interval="".

पद्दती

.हिंडोला(पर्याय) .

एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता objectआनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.

$ ( '.हिंडोळ' ). हिंडोळ ({ ) .
  अंतर : 2000 इतलो आसा 
}) हें .

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

हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.

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

वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.

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

हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता.

.हिंडोला('पूर्व') .

फाटल्या वस्तू कडेन चक्रां करता.

.हिंडोला('फुडें') .

फुडल्या आयटमाचेर चक्रां करता.

घडणुको

बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता.

उदारण

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

<इनपुट प्रकार = "मजकूर" डेटा-पुरवण = "typeahead" >  

तुमकां autocomplete="off"बूटस्ट्रॅप typeahead ड्रॉपडावनाचेर मुलभूत ब्राउझर मेनू दिसपाक आडावपाक सेट करूंक जाय.

वापर

डेटा गुणधर्मां वरवीं

वयर दिल्ल्या उदाहरणांत दाखयल्ले प्रमाण typeahead कार्यक्षमताय आशिल्ल्या घटकाची नोंदणी करपाक डेटा गुणधर्म जोडात.

जावास्क्रिप्ट वरवीं

टायपहेडाक हाताळणीन कॉल करात:

$ ( '.टायपहेड' ). टायपहेड () 1.1.

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-source="".

पद्दती

.typeahead(पर्याय) .

टायपहेड आशिल्ल्या इनपुटाक आरंभ करता.

उदारण

डावी वटेन आशिल्लें उपनॅव्हिगेशन हें प्रत्यय प्लगइनाचें लायव्ह डेमो आसा.

वापर

डेटा गुणधर्मां वरवीं

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

<div डेटा-गुप्तचर = "संलग्न" डेटा-ऑफसेट-टॉप = "200" > ... </div>  

जावास्क्रिप्ट वरवीं

जावास्क्रिप्ट वरवीं प्रत्यय प्लगइनाक कॉल करात:

$ ( '#नवबार' ). affix () हें .

पर्याय आसात

पर्याय डेटा गुणधर्म वा जावास्क्रिप्ट वरवीं पास करूंक शकतात. डेटा गुणधर्मांखातीर, पर्याय नांव जोडात data-, जशें data-offset-top="200".