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

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

डाटा विशेषताहरू

तपाईले सबै बुटस्ट्र्याप प्लगइनहरू मार्कअप API मार्फत जाभास्क्रिप्टको एकल लाइन नलिइकन प्रयोग गर्न सक्नुहुन्छ। यो बुटस्ट्र्यापको पहिलो कक्षा API हो र प्लगइन प्रयोग गर्दा तपाईंको पहिलो विचार हुनुपर्छ।

उनले भने, केही परिस्थितिहरूमा यो कार्यक्षमता बन्द गर्न वांछनीय हुन सक्छ। तसर्थ, हामी `डेटा-एपीआई'` सँग बडी नेमस्पेसमा भएका सबै घटनाहरूलाई अनबाइन्ड गरेर डाटा विशेषता API असक्षम गर्ने क्षमता पनि प्रदान गर्छौं। यो यस्तो देखिन्छ:

$ ( 'शरीर' )। बन्द ( '.data-api' )

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

$ ( 'शरीर' )। बन्द ( '.alert.data-api' )

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

हामी यो पनि विश्वास गर्छौं कि तपाइँ जाभास्क्रिप्ट API मार्फत सबै बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न सक्षम हुनुपर्दछ। सबै सार्वजनिक API हरू एकल, चेनयोग्य विधिहरू हुन्, र कार्य गरिएको सङ्कलन फिर्ता गर्नुहोस्।

$ ( ".btn. खतरा" )। बटन ( "टगल" )। addClass ( "फ्याट" )

सबै विधिहरूले एक वैकल्पिक विकल्प वस्तु, एक विशेष विधिलाई लक्षित गर्ने स्ट्रिङ, वा केही पनि (जसले पूर्वनिर्धारित व्यवहारसँग प्लगइन प्रारम्भ गर्छ) स्वीकार गर्नुपर्छ।

$ ( "#myModal" )। मोडल () // पूर्वनिर्धारितसँग प्रारम्भ गरिएको                       
$ ( "#myModal" )। मोडल ({ किबोर्ड : गलत }) // किबोर्ड बिना प्रारम्भ गरिएको     
$ ( "#myModal" )। मोडल ( 'शो' ) // प्रारम्भिक र तुरुन्तै देखाउन आह्वान गर्दछ                

प्रत्येक प्लगइनले यसको कच्चा कन्स्ट्रक्टरलाई 'कन्स्ट्रक्टर' गुणमा पनि उजागर गर्दछ $.fn.popover.Constructor:। यदि तपाइँ एक विशेष प्लगइन उदाहरण प्राप्त गर्न चाहनुहुन्छ भने, यसलाई सिधै तत्वबाट पुन: प्राप्त गर्नुहोस् $('[rel=popover]').data('popover'):।

कुनै द्वन्द्व छैन

कहिलेकाहीँ यो अन्य UI फ्रेमवर्कको साथ बुटस्ट्र्याप प्लगइनहरू प्रयोग गर्न आवश्यक छ। यी परिस्थितिहरूमा, नेमस्पेस टक्करहरू कहिलेकाहीं हुन सक्छ। यदि यो हुन्छ भने, तपाईले .noConflictप्लगइनलाई कल गर्न सक्नुहुन्छ जसको मान उल्टाउन चाहनुहुन्छ।

var बुटस्ट्र्याप बटन = $ । fn । बटन । noConflict () // पहिले तोकिएको मानमा $.fn.button फर्काउनुहोस् 
$ । fn । bootstrapBtn = bootstrapButton             // $().bootstrapBtn बुटस्ट्र्याप कार्यक्षमता दिनुहोस्

घटनाहरू

बुटस्ट्र्यापले धेरै जसो प्लगइनको अद्वितीय कार्यहरूको लागि अनुकूल घटनाहरू प्रदान गर्दछ। सामान्यतया, यी एक अनन्त र विगत पार्टिसिपल फारममा आउँछन् - जहाँ इन्फिनिटिभ (उदा। show) घटनाको सुरुमा ट्रिगर हुन्छ, र यसको विगतको पार्टिसिपल फारम (उदा। shown) कार्य पूरा भएपछि ट्रिगर हुन्छ।

सबै अनन्त घटनाहरूले पूर्वनिर्धारित कार्यक्षमता रोकथाम प्रदान गर्दछ। यो सुरु हुनु अघि कार्यको कार्यान्वयन रोक्न सक्ने क्षमता प्रदान गर्दछ।

$ ( '#myModal' )। अन ( 'देखाउनुहोस्' , प्रकार्य ( e ) {   
    यदि (! डाटा ) फिर्ता ई . रोकथाम पूर्वनिर्धारित () // मोडल देखाउन रोक्छ   
})

संक्रमण बारे

साधारण संक्रमण प्रभावहरूको लागि, अन्य JS फाइलहरूसँगै bootstrap-transition.js समावेश गर्नुहोस्। यदि तपाइँ कम्पाइल गरिएको (वा मिनिफाइड) bootstrap.js प्रयोग गर्दै हुनुहुन्छ भने , यो समावेश गर्न आवश्यक छैन - यो पहिले नै त्यहाँ छ।

केसहरू प्रयोग गर्नुहोस्

ट्रान्जिसन प्लगइनका केही उदाहरणहरू:

• मोडलहरूमा स्लाइडिङ वा फेडिङ
• ट्याबहरू फेड गर्दै
• अलर्ट आउट गर्दै
• स्लाइडिङ क्यारोसेल प्यानहरू

उदाहरणहरू

मोडलहरू सुव्यवस्थित, तर लचिलो, न्यूनतम आवश्यक कार्यक्षमता र स्मार्ट पूर्वनिर्धारितहरूसँग संवाद प्रम्प्टहरू छन्।

स्थिर उदाहरण

हेडर, शरीर, र फुटरमा कार्यहरूको सेटको साथ रेन्डर गरिएको मोडल।

<div वर्ग = "मोडल लुकाउने फेड" > 
  <div वर्ग = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-लुकेको = "सत्य" > &समय; </ बटन>    
    <h3> मोडल हेडर </ h3>
  </div>
  <div class = "modal-body" > 
    <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" class = "modal hide fade" tabindex = "-1" role = " dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div वर्ग = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "क्लोज" डेटा-डिसमिस = "मोडल" एरिया-लुकेको = "सत्य" > × </ बटन>    
    <h3 id = "myModalLabel" > मोडल हेडर </ h3> 
  </div>
  <div class = "modal-body" > 
    <p> एउटा राम्रो शरीर... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > बन्द गर्नुहोस् </ बटन>   
    <बटन वर्ग = "btn btn-प्राथमिक" > परिवर्तनहरू बचत गर्नुहोस् </ बटन> 
  </div>
</div>

प्रयोग

डाटा विशेषताहरू मार्फत

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

<बटन प्रकार = "बटन" डाटा-टगल = "मोडल" डाटा-लक्ष्य = "#myModal" > मोडल सुरु गर्नुहोस् </ बटन>   

जाभास्क्रिप्ट मार्फत

myModalजाभास्क्रिप्टको एकल लाइनको साथ आईडीको साथ मोडल कल गर्नुहोस् :

$ ( '#myModal' )। मोडल ( विकल्प )

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-backdrop=""।

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

विधिहरू

मोडल (विकल्पहरू)

तपाईंको सामग्रीलाई मोडलको रूपमा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

$ ( '#myModal' )। मोडल ({
  किबोर्ड : गलत 
})

मोडल ('टगल')

म्यानुअल रूपमा मोडल टगल गर्दछ।

$ ( '#myModal' )। मोडल ( 'टगल' )

मोडल ('शो')

म्यानुअल रूपमा मोडल खोल्छ।

$ ( '#myModal' )। मोडल ( 'शो' )

मोडल ('लुकाउनुहोस्')

म्यानुअल रूपमा मोडल लुकाउँछ।

$ ( '#myModal' )। मोडल ( 'लुकाउनुहोस्' )

घटनाहरू

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

$ ( '#myModal' )। मा ( 'लुकेको' , प्रकार्य () {   
  // केही गर…
})

उदाहरणहरू

यो साधारण प्लगइनको साथ लगभग कुनै पनि कुरामा ड्रपडाउन मेनुहरू थप्नुहोस्, नेभबार, ट्याबहरू र चक्कीहरू सहित।

नवबार भित्र

ट्याब भित्र

प्रयोग

डाटा विशेषताहरू मार्फत

data-toggle="dropdown"ड्रपडाउन टगल गर्न लिङ्क वा बटनमा थप्नुहोस् ।

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

URL लाई अक्षुण्ण राख्न, को data-targetसट्टा विशेषता प्रयोग गर्नुहोस् href="#"।

<div वर्ग = "ड्रपडाउन" > 
  <a वर्ग = "ड्रपडाउन-टगल" आईडी = "dLabel" भूमिका = "बटन" डाटा-टगल = "ड्रपडाउन" डाटा-लक्ष्य = "#" href = "/page.html" >      
    ड्रपडाउन
    <b class = "caret" ></b> 
  </a>
  <ul class = "ड्रपडाउन-मेनु" भूमिका = "मेनु" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत ड्रपडाउनहरू कल गर्नुहोस्:

$ ( '.dropdown-toggle' )। ड्रपडाउन ()

विकल्पहरू

कुनै पनि छैन

विधिहरू

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

दिइएको नेभबार वा ट्याब गरिएको नेभिगेसनका लागि मेनुहरू टगल गर्नको लागि प्रोग्रामेटिक एपीआई।

navbar मा उदाहरण

ScrollSpy प्लगइन स्क्रोल स्थितिमा आधारित एनएभि लक्ष्यहरू स्वचालित रूपमा अद्यावधिक गर्नको लागि हो। नेभबार तलको क्षेत्र स्क्रोल गर्नुहोस् र सक्रिय वर्ग परिवर्तन हेर्नुहोस्। ड्रपडाउन उप वस्तुहरू पनि हाइलाइट गरिनेछ।

प्रयोग

डाटा विशेषताहरू मार्फत

तपाईको टपबार नेभिगेसनमा सजिलैसँग scrollspy व्यवहार थप्नको data-spy="scroll"लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस् (सामान्यतया यो शरीर हुनेछ) र data-target=".navbar"कुन nav प्रयोग गर्ने छनौट गर्न। तपाइँ एक .navघटक संग scrollspy प्रयोग गर्न चाहानुहुन्छ।

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

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत scrollspy कल गर्नुहोस्:

$ ( '#navbar' )। scrollspy ()

विधिहरू

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

DOM बाट तत्वहरू थप्ने वा हटाउने संयोजनमा scrollspy प्रयोग गर्दा, तपाईंले रिफ्रेस विधिलाई यसरी कल गर्न आवश्यक छ:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset=""।

घटनाहरू

उदाहरण ट्याबहरू

द्रुत, गतिशील ट्याब कार्यक्षमता थप्नुहोस् स्थानीय सामग्रीको प्यानहरू मार्फत, ड्रपडाउन मेनुहरू मार्फत पनि।

प्रयोग

जाभास्क्रिप्ट मार्फत ट्याबयोग्य ट्याबहरू सक्षम गर्नुहोस् (प्रत्येक ट्याबलाई व्यक्तिगत रूपमा सक्रिय गर्न आवश्यक छ):

$ ( '#myTab a' )। क्लिक ( प्रकार्य ( ई ) {  
  e _ रोकथाम पूर्वनिर्धारित ();
  $ ( यो )। ट्याब ( 'देखाउनुहोस्' );
})

तपाईले व्यक्तिगत ट्याबहरूलाई धेरै तरिकामा सक्रिय गर्न सक्नुहुन्छ:

$ ( '#myTab a[href="#profile"]' )। ट्याब ( 'देखाउनुहोस्' ); // नाम द्वारा ट्याब चयन गर्नुहोस् 
$ ( '#myTab a:first' )। ट्याब ( 'देखाउनुहोस्' ); // पहिलो ट्याब चयन गर्नुहोस् 
$ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' ); // अन्तिम ट्याब चयन गर्नुहोस् 
$ ( '#myTab li:eq(2) a' )। ट्याब ( 'देखाउनुहोस्' ); // तेस्रो ट्याब चयन गर्नुहोस् (०-अनुक्रमित) 

मार्कअप

तपाईले कुनै पनि जाभास्क्रिप्ट नलिइकन मात्र निर्दिष्ट गरेर data-toggle="tab"वा कुनै data-toggle="pill"तत्वमा ट्याब वा पिल नेभिगेसन सक्रिय गर्न सक्नुहुन्छ। navट्याबमा र nav-tabsकक्षाहरू थप्दा ulबुटस्ट्र्याप ट्याब स्टाइल लागू हुनेछ।

<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" > Messages </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > सेटिङहरू </a></li>  
</ul>

विधिहरू

$() ट्याब

ट्याब तत्व र सामग्री कन्टेनर सक्रिय गर्दछ। ट्याबमा या त एक data-targetवा hrefDOM मा कन्टेनर नोड लक्षित हुनुपर्छ।

<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 = "ट्याब-फलक सक्रिय" id = "घर" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( प्रकार्य () {  
    $ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' );
  })
</script>

घटनाहरू

$ ( 'a[data-toggle="tab"]' )। अन ( 'देखाइएको' , प्रकार्य ( ई ) {   
  e _ लक्ष्य // सक्रिय ट्याब
  e _ सम्बन्धित लक्ष्य // अघिल्लो ट्याब
})

उदाहरणहरू

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

कार्यसम्पादन कारणहरूका लागि, टूलटिप र पपओभर डाटा-एपिसहरू अप्ट इन छन्, यसको मतलब तपाईंले तिनीहरूलाई आफैं सुरु गर्नुपर्छ ।

टूलटिपहरू हेर्न तलको लिङ्कहरूमा होभर गर्नुहोस्:

चार दिशा

इनपुट समूहहरूमा उपकरणटिपहरू

बुटस्ट्र्याप इनपुट समूहहरूसँग टूलटिपहरू र पोपोभरहरू प्रयोग गर्दा, तपाईंले containerअवांछित साइड इफेक्टहरूबाट बच्न (तलको दस्तावेज) विकल्प सेट गर्नुपर्नेछ।

प्रयोग

जाभास्क्रिप्ट मार्फत टूलटिप ट्रिगर गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

मार्कअप

<a href = "#" data-toggle = "tooltip" title = "पहिलो टूलटिप" > ममाथि होभर गर्नुहोस् </a>   

विधिहरू

$().उपकरण टिप(विकल्प)

तत्व सङ्कलनमा टुलटिप ह्यान्डलर संलग्न गर्छ।

टुलटिप ('देखाउनुहोस्')

तत्वको टुलटिप प्रकट गर्दछ।

$ ( '# तत्व' )। टुलटिप ( 'देखाउनुहोस्' )

टुलटिप ('लुकाउनुहोस्')

तत्वको टुलटिप लुकाउँछ।

$ ( '# तत्व' )। टुलटिप ( 'लुकाउनुहोस्' )

टुलटिप ('टगल')

तत्वको टुलटिप टगल गर्छ।

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

टुलटिप ('नष्ट')

तत्वको टुलटिप लुकाउँछ र नष्ट गर्दछ।

$ ( '# तत्व' )। टुलटिप ( 'नष्ट' )

उदाहरणहरू

सामग्रीको सानो ओभरलेहरू थप्नुहोस्, जस्तै आईप्याडमा, आवास माध्यमिक जानकारीको लागि कुनै पनि तत्वमा। पपओभर ट्र��गर गर्न बटनमा होभर गर्नुहोस्। टूलटिप समावेश गर्न आवश्यक छ।

स्थिर पपओभर

चार विकल्पहरू उपलब्ध छन्: शीर्ष, दायाँ, तल, र बायाँ पङ्क्तिबद्ध।

dataजाभास्क्रिप्ट र एट्रिब्यूट भित्रको सामग्रीबाट पोपोभरको रूपमा देखाइएको कुनै मार्कअप छैन ।

प्रत्यक्ष डेमो

चार दिशा

प्रयोग

जाभास्क्रिप्ट मार्फत popovers सक्षम गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-animation=""।

मार्कअप

कार्यसम्पादन कारणहरूका लागि, Tooltip र Popover data-apis लाई अप्ट इन गरिएको छ। यदि तपाइँ तिनीहरूलाई प्रयोग गर्न चाहनुहुन्छ भने मात्र चयनकर्ता विकल्प निर्दिष्ट गर्नुहोस्।

विधिहरू

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

तत्व सङ्कलनका लागि popovers प्रारम्भ गर्दछ।

.popover ('शो')

एक तत्व पपओभर प्रकट गर्दछ।

$ ( '# तत्व' )। popover ( 'शो' )

.popover ('लुकाउनुहोस्')

एक तत्व पपओभर लुकाउँछ।

$ ( '# तत्व' )। popover ( 'लुकाउन' )

.popover ('टगल')

तत्व पपओभर टगल गर्दछ।

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

.popover ('नष्ट')

तत्वको पपओभर लुकाउँछ र नष्ट गर्दछ।

$ ( '# तत्व' )। popover ( 'नष्ट' )

उदाहरण अलर्टहरू

यस प्लगइनको साथ सबै सतर्क सन्देशहरूमा खारेज कार्यक्षमता थप्नुहोस्।

प्रयोग

JavaScript मार्फत अलर्टको खारेज सक्षम गर्नुहोस्:

$ ( ". चेतावनी" )। चेतावनी ()

मार्कअप

data-dismiss="alert"स्वचालित रूपमा अलर्ट क्लोज कार्यक्षमता दिनको लागि आफ्नो बन्द बटनमा थप्नुहोस् ।

<a वर्ग = "बंद" डाटा-खारिज = "सतर्क" href = "#" > &समय; </a>   

विधिहरू

$() अलर्ट()

नजिकको कार्यक्षमता संग सबै अलर्टहरू लपेट्छ। तपाईंका अलर्टहरू बन्द हुँदा एनिमेटेड हुनको लागि, तिनीहरूमा पहिले नै लागू गरिएको .fadeर वर्ग सुनिश्चित गर्नुहोस्।.in

चेतावनी ('नजिक')

अलर्ट बन्द गर्छ।

$ ( ". चेतावनी" )। चेतावनी ( 'नजिक' )

घटनाहरू

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

$ ( '#my-alert' )। बाँध ( 'बंद' , प्रकार्य () {   
  // केही गर…
})

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

बटनहरूसँग थप गर्नुहोस्। कन्ट्रोल बटन अवस्थाहरू वा उपकरणपट्टीहरू जस्तै थप घटकहरूको लागि बटनहरूको समूह सिर्जना गर्नुहोस्।

स्टेटफुल

data-loading-text="Loading..."बटनमा लोडिङ अवस्था प्रयोग गर्न थप्नुहोस् ।

<बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" डेटा-लोडिङ-टेक्स्ट = "लोड हुँदैछ..." > लोड हुँदैछ अवस्था </ बटन>   

एकल टगल

data-toggle="button"एकल बटनमा टगलिङ सक्रिय गर्न थप्नुहोस् ।

<बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" डेटा-टगल = "बटन" > एकल टगल </ बटन>   

चेकबक्स

data-toggle="buttons-checkbox"btn-समूहमा चेकबक्स शैली टगल गर्न थप्नुहोस् ।

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बायाँ </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दायाँ </ बटन>  
</div>

रेडियो

data-toggle="buttons-radio"btn-समूहमा रेडियो शैली टगल गर्न थप्नुहोस् ।

<div class = "btn-group" data-toggle = "बटन-रेडियो" >  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > बायाँ </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > मध्य </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" > दायाँ </ बटन>  
</div>

प्रयोग

जाभास्क्रिप्ट मार्फत बटनहरू सक्षम गर्नुहोस्:

$ ( '.nav-tabs' )। बटन ()

मार्कअप

डाटा विशेषताहरू बटन प्लगइनको अभिन्न अंग हुन्। विभिन्न मार्कअप प्रकारहरूको लागि तलको उदाहरण कोड जाँच गर्नुहोस्।

विकल्पहरू

कुनै पनि छैन

विधिहरू

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

टगल पुश स्थिति। बटनलाई सक्रिय गरिएको जस्तो देखिन्छ।

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

$() बटन('लोड हुँदै')

बटन स्थिति लोड गर्न सेट गर्दछ - बटन असक्षम पार्छ र पाठलाई लोड गर्ने पाठमा बदल्छ। डेटा एट्रिब्युट प्रयोग गरेर बटन एलिमेन्टमा लोडिङ टेक्स्ट परिभाषित गरिनुपर्छ data-loading-text।

<बटन प्रकार = "बटन" वर्ग = "btn" data-loading-text = "सामान लोड गर्दै..." > ... </ बटन>    

$().बटन('रिसेट')

रिसेट बटन स्थिति - मूल पाठमा पाठ स्वैप।

$().बटन(स्ट्रिङ)

बटन स्थिति रिसेट गर्दछ - कुनै पनि डेटा परिभाषित पाठ स्थितिमा पाठ स्वैप गर्दछ।

<बटन प्रकार = "बटन" वर्ग = "btn" data-complete-text = "समाप्त!" > ... </ बटन>    
<script>
  $ ( '.btn' )। बटन ( 'पूर्ण' )
</script>

बारे

एकोर्डियन र नेभिगेसन जस्ता कोल्प्सिबल कम्पोनेन्टहरूका लागि आधार शैलीहरू र लचिलो समर्थन प्राप्त गर्नुहोस्।

* ट्रान्जिसन प्लगइन समावेश गर्न आवश्यक छ।

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseOne" >    
        संक्षिप्त गर्न मिल्ने समूह वस्तु #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body कोलप्स इन" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a वर्ग = "accordion-toggle" data-toggle = "collaps" data-parent = "#accordion2" href = "#collapseTwo" >    
        मिलाउन मिल्ने समूह वस्तु #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body पतन" >  
      <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 मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् 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। Nullam id dolor id nibh ultricies vehicula ut id elit।

दोस्रो थम्बनेल लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

तेस्रो थम्बनेल लेबल

Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

‹ ›

<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>
  <!-- Carousel nav -->
  <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।

जाभास्क्रिप्ट मार्फत

क्यारोसेललाई म्यानुअल रूपमा कल गर्नुहोस्:

$ ( '.carousel' )। क्यारोसेल ()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScriptz मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-interval=""।

विधिहरू

क्यारोसेल (विकल्पहरू)

वैकल्पिक विकल्पहरूको साथ क्यारोसेल प्रारम्भ गर्दछ objectर वस्तुहरू मार्फत साइकल चलाउन थाल्छ।

$ ( '.carousel' )। क्यारोसेल ({
  अन्तराल : 2000 
})

क्यारोसेल ('साइकल')

बायाँ देखि दायाँ क्यारोसेल वस्तुहरू मार्फत चक्र।

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

क्यारोसेललाई वस्तुहरू मार्फत साइकल चलाउनबाट रोक्छ।

क्यारोसेल (नम्बर)

क्यारोसेललाई विशेष फ्रेममा (० आधारित, एर्रे जस्तै) मा साइकल गर्नुहोस्।

.carousel('prev')

अघिल्लो वस्तुमा चक्र।

क्यारोसेल ('अर्को')

अर्को वस्तुमा साइकल।

घटनाहरू

बुटस्ट्र्यापको क्यारोसेल क्लासले क्यारोसेल कार्यक्षमतामा हुक गर्नका लागि दुई घटनाहरू उजागर गर्दछ।

उदाहरण

कुनै पनि फारम पाठ इनपुटको साथ चाँडै सुरुचिपूर्ण टाइपहेडहरू सिर्जना गर्नको लागि आधारभूत, सजिलै विस्तारित प्लगइन।

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

तपाईं autocomplete="off"पूर्वनिर्धारित ब्राउजर मेनुहरूलाई बूटस्ट्र्याप टाइपहेड ड्रपडाउनमा देखा पर्नबाट रोक्न सेट गर्न चाहानुहुन्छ।

प्रयोग

डाटा विशेषताहरू मार्फत

माथिको उदाहरणमा देखाइए अनुसार टाइपहेड कार्यक्षमताको साथ एक तत्व दर्ता गर्न डेटा विशेषताहरू थप्नुहोस्।

जाभास्क्रिप्ट मार्फत

टाइपहेडलाई म्यानुअल रूपमा कल गर्नुहोस्:

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

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-source=""।

विधिहरू

टाइपहेड (विकल्पहरू)

टाइपहेडको साथ इनपुट प्रारम्भ गर्दछ।

उदाहरण

बाँयामा सबनेभिगेसन affix प्लगइनको प्रत्यक्ष डेमो हो।

प्रयोग

डाटा विशेषताहरू मार्फत

सजिलैसँग कुनै पनि तत्वमा affix व्यवहार थप्नको data-spy="affix"लागि, तपाईले जासुसी गर्न चाहनु भएको तत्वमा थप्नुहोस्। त्यसपछि कुनै तत्वको पिनिङ अन र अफ कहिले टगल गर्ने भनेर परिभाषित गर्न अफसेटहरू प्रयोग गर्नुहोस्।

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

जाभास्क्रिप्ट मार्फत

जाभास्क्रिप्ट मार्फत affix प्लगइन कल गर्नुहोस्:

$ ( '#navbar' )। जोड्नु ()

विकल्पहरू

विकल्पहरू डेटा विशेषताहरू वा JavaScript मार्फत पास गर्न सकिन्छ। डेटा विशेषताहरूका लागि, विकल्पको नाम जोड्नुहोस् data-, जस्तै मा data-offset-top="200"।