बुटस्ट्र्याप

बुटस्ट्र्यापको लागि जाभास्क्रिप्ट

बुटस्ट्र्यापका कम्पोनेन्टहरूलाई जीवन्त बनाउनुहोस्—अहिले १२ अनुकूलन jQuery प्लगइनहरूसँग।

jQuery प्लगइनहरू एक दर्जन बुटस्ट्र्याप प्लगइनहरू तपाईंलाई सुरु गर्नका लागि

हेड अप! सबै जाभास्क्रिप्ट प्लगइनहरूलाई jQuery को नवीनतम संस्करण चाहिन्छ।

मोडल bootstrap-modal.js

मोडलहरूको बारेमा

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

डाउनलोड फाइल

स्थिर उदाहरण

तल स्थिर रूपमा रेन्डर गरिएको मोडल छ।

मोडल हेडर

एउटा राम्रो शरीर…

बन्द गर्नुहोस् परिवर्तनहरू सुरक्षित गर्नुहोस

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

तलको बटन क्लिक गरेर जाभास्क्रिप्ट मार्फत मोडल टगल गर्नुहोस्। यो तल स्लाइड हुनेछ र पृष्ठको माथिबाट फीड हुनेछ।

डेमो मोडल सुरु गर्नुहोस्

बुटस्ट्र्याप मोडल प्रयोग गर्दै

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

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

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
पृष्ठभूमि बुलियन सत्य मोडल ब्याकड्रप तत्व समावेश गर्दछ। वैकल्पिक रूपमा, staticब्याकड्रपको लागि निर्दिष्ट गर्नुहोस् जसले क्लिकमा मोडल बन्द गर्दैन।
किबोर्ड बुलियन सत्य एस्केप कुञ्जी थिच्दा मोडल बन्द गर्छ
देखाउनु बुलियन सत्य प्रारम्भ गर्दा मोडल देखाउँछ।

मार्कअप

तपाइँ जाभास्क्रिप्टको एकल रेखा लेख्न बिना तपाइँको पृष्ठमा सजिलै संग मोडलहरू सक्रिय गर्न सक्नुहुन्छ। मोडल एलिमेन्ट आईडीसँग मिल्दोजुल्दो वा data-toggle="modal"कुनै नियन्त्रक तत्वमा मात्र सेट गर्नुहोस्, र क्लिक गर्दा, यसले तपाइँको मोडल सुरु गर्नेछ।data-target="#foo"href="#foo"

साथै, तपाइँको मोडल उदाहरणमा विकल्पहरू थप्न, केवल तिनीहरूलाई नियन्त्रण तत्व वा मोडल मार्कअपमा अतिरिक्त डेटा विशेषताहरूको रूपमा समावेश गर्नुहोस्।

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल सुरु गर्नुहोस् </a>    
  1. <div class = "modal" id = "myModal" >  
  2.   <div वर्ग = "मोडल-हेडर" > 
  3.     <बटन वर्ग = "क्लोज" डाटा-डिसमिस = "मोडल" > × </ बटन>  
  4.     <h3> मोडल हेडर </ h3>
  5.   </div>
  6.   <div class = "modal-body" > 
  7.     <p> एउटा राम्रो शरीर... </p>
  8.   </div>
  9.   <div class = "modal-footer" > 
  10.     <a href = "#" class = "btn" > बन्द गर्नुहोस् </a>  
  11.     <a href="#" class="btn btn-primary" > परिवर्तनहरू बचत गर्नुहोस् </a> _  
  12.   </div>
  13. </div>
हेड अप! यदि तपाइँ तपाइँको मोडल भित्र र बाहिर एनिमेट गर्न चाहनुहुन्छ भने, केवल तत्वमा एक .fadeकक्षा थप्नुहोस् .modal(यसलाई कार्यमा हेर्न डेमोलाई सन्दर्भ गर्नुहोस्) र bootstrap-transition.js समावेश गर्नुहोस्।

विधिहरू

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

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

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

मोडल ('टगल')

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

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

मोडल ('शो')

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

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

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

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

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

घटनाहरू

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

घटना विवरण
देखाउनु showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
देखाइयो यो घटना तब निकालिन्छ जब मोडल प्रयोगकर्तालाई देख्न सकिन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस् यो घटना तुरुन्तै निकालिएको छ जब hideउदाहरण विधि कल गरिएको छ।
लुकेको मोडल प्रयोगकर्ताबाट लुकाउन सकिएपछि यो घटना हटाइन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। 
  1. $ ( '#myModal' )। मा ( 'लुकेको' , प्रकार्य () {   
  2.   // केही गर…
  3. })

ScrollSpy bootstrap-scrollspy.js

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

डाउनलोड फाइल

scrollspy को साथ उदाहरण navbar

तलको क्षेत्र स्क्रोल गर्नुहोस् र नेभिगेसन अपडेट हेर्नुहोस्। ड्रपडाउन उप वस्तुहरू पनि हाइलाइट गरिनेछ। काेशिस गर!

@मोटो

Ad leggings keytar, brunch id art Party dolor labore। Pitchfork yr enim lo-fi तिनीहरूले qui बेच्नु अघि। Tumblr फार्म-टू-टेबल साइकल अधिकारहरू जे भए पनि। एनिम केफियेह कार्ल्स कार्डिगन। Velit seitan mcsweeney को फोटो बूथ 3 wolf moon irure। Cosby sweater lomo jean shorts, Williamsburg hoodie minim qui तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन र कार्डिगन ट्रस्ट फन्ड culpa बायोडिजल वेस एन्डरसन एस्थेटिक। निहिल ट्याटू आरोप, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लाम्को परिणाम।

@mdo

भेनिअम मार्फा जुँगाको स्केटबोर्ड, फ्यूगियाट भेलिट पिचफोर्क दाढी। फ्रिगन बियर्ड एलिक्वा कपिडाट म्याक्सस्वीनीको वेरो। Cupidatat चार loko nisi, ea helvetica nulla carles। ट्याटू कोस्बी स्वेटर फूड ट्रक, mcsweeney's quis non freegan vinyl। लो-फाई वेस एन्डरसन +1 सारटोरियल। Carles गैर सौन्दर्य व्यायाम quis gentrify। ब्रुकलिन एडिपिसिसिंग क्राफ्ट बियर वाइस कीटार डेजरन्ट।

एउटा

Occaecat commodo aliqua delectus। फ्याप क्राफ्ट बियर डेजरन्ट स्केटबोर्ड ईए। लोमो साइकल राइट्स एडिपिसिसिङ बान मी, वेलिट ईए सुन्ट नेक्स्ट लेवल लोकाभोर सिंगल-ओरिजिन कफी इन म्याग्ना भेनिअम। उच्च जीवन आईडी विनाइल, इको पार्क परिणाम quis aliquip banh mi pitchfork। Vero VHS राम्रो छ। DIY न्यूनतम मेसेन्जर झोला जडान गर्नुहोस्। क्रेडिट एक्स इन, दिगो डिलेक्टस कन्सेक्टुर फैनी प्याक आईफोन।

दुई

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa जे भए पनि डेलेक्टस फूड ट्रक। Sapiente synth id assumenda। Locavore sed helvetica cliche irony, thundercats तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन जसको फलस्वरूप हुडी ग्लुटेन-मुक्त lo-fi fap aliquip। लेबोर एलिट प्लेसिएट बेच्नु भन्दा पहिले, टेरी रिचर्डसन प्रोडेन्ट ब्रंच नेसियन्ट क्विस कोस्बी स्वेटर परियातुर केफियेह यूट हेल्भेटिका आर्टिसन। कार्डिगन क्राफ्ट बियर सेटन रेडिमेड वेलिट। VHS च्याम्ब्रे श्रम टेम्पोर वेनिअम। एनिम मोलिट मिनिम कमोडो उल्लाम्को थन्डरक्याट्स।

bootstrap-scrollspy.js प्रयोग गर्दै

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

  1. $ ( '#navbar' )। scrollspy ()

मार्कअप

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

  1. <body data-spy = "स्क्रोल" > ... </body>
हेड अप! Navbar लिङ्कहरूमा समाधान गर्न मिल्ने आईडी लक्ष्यहरू हुनुपर्छ। उदाहरण को लागी, <a href="#home">home</a>डोम मा केहि संग मेल खानु पर्छ जस्तै <div id="home"></div>।

विधिहरू

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

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

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

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
अफसेट संख्या १० स्क्रोलको स्थिति गणना गर्दा माथिबाट अफसेट गर्न पिक्सेलहरू।

घटनाहरू

घटना विवरण
सक्रिय गर्नुहोस् स्क्रोलस्पाइ द्वारा कुनै नयाँ वस्तु सक्रिय हुँदा यो घटना सक्रिय हुन्छ।

टगल गर्न मिल्ने ट्याबहरू bootstrap-tab.js

यो प्लगइनले स्थानीय सामग्री मार्फत संक्रमणको लागि द्रुत, गतिशील ट्याब र गोली कार्यक्षमता थप्छ।

डाउनलोड फाइल

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

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

कच्चा डेनिम तपाईंले सायद तिनीहरूको जीन शर्ट्स अस्टिन सुन्नु भएको छैन। Nesciunt tofu stumptown aliqua, retro synth master cleanse। Mustache cliche tempor, Williamsburg Carles Vegan helvetica। Reprehenderit butcher retro keffiyeh dreamcatcher synth। कोस्बी स्वेटर eu banh mi, qui irure टेरी रिचर्डसन पूर्व स्क्विड। एलिक्विप प्लेसट साल्विया सिलम आईफोन। Seitan aliquip quis cardigan अमेरिकी परिधान, butcher voluptate nisi qui।

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

bootstrap-tab.js प्रयोग गर्दै

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

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

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

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

मार्कअप

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

  1. <ul class = "nav nav-tabs" > 
  2.   <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  3.   <li><a href="#profile" data-toggle = "tab" > प्रोफाइल </a> </li >  
  4.   <li><a href = "#messages" data-toggle = "tab" > Messages </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > सेटिङहरू </a></li>  
  6. </ul>

विधिहरू

$() ट्याब

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

  1. <ul class = "nav nav - tabs" id = "myTab" >  
  2.   <li class = "active" ><a href = "#home" > घर </a></li>  
  3.   <li > <a href="#profile" > प्रोफाइल </a></li > 
  4.   <li><a href = "#messages" > सन्देशहरू </a></li> 
  5.   <li><a href = "#settings" > सेटिङहरू </a></li> 
  6. </ul>
  7.  
  8. <div वर्ग = "ट्याब-सामग्री" > 
  9.   <div class = "ट्याब-फलक सक्रिय" id = "घर" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "messages" > ... </div>  
  12.   <div class = "tab-pane" id = "settings" > ... </div>  
  13. </div>
  14.  
  15. <script>
  16.   $ ( प्रकार्य () {  
  17.     $ ( '#myTab a:last' )। ट्याब ( 'देखाउनुहोस्' );
  18.   })
  19. </script>

घटनाहरू

घटना विवरण
देखाउनु यो घटना ट्याब शो मा फायर हुन्छ, तर नयाँ ट्याब देखाउनु अघि। प्रयोग गर्नुहोस् event.targetर event.relatedTargetक्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न।
देखाइयो ट्याब देखाइएपछि यो घटना ट्याब शोमा सक्रिय हुन्छ। प्रयोग गर्नुहोस् event.targetर event.relatedTargetक्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न। 
  1. $ ( 'a[data-toggle="tab"]' )। अन ( 'देखाइएको' , प्रकार्य ( ई ) {   
  2.   e _ लक्ष्य // सक्रिय ट्याब
  3.   e _ सम्बन्धित लक्ष्य // अघिल्लो ट्याब
  4. })

Tooltips bootstrap-tooltip.js

Tooltips को बारेमा

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

डाउनलोड फाइल

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

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

टाइट प्यान्ट अर्को स्तर केफियेह तपाईंले सायद तिनीहरूको बारेमा सुन्नु भएको छैन। फोटो बूथ दाढी कच्चा डेनिम लेटरप्रेस शाकाहारी मेसेन्जर ब्याग स्टम्पटाउन। फार्म-टू-टेबल सेटन, mcsweeney's fixie सस्टेनेबल क्विनोआ 8-बिट अमेरिकी परिधानमा टेरी रिचर्डसन विनाइल च्याम्ब्रे छ । बियर्ड स्टम्पटाउन, कार्डिगन्स बन मी लोमो थन्डरक्याट्स। टोफु बायोडिजेल विलियम्सबर्ग मार्फा, चार लोको म्याकस्वीनीको क्लिन्ज शाकाहारी च्याम्ब्रे। एक साँच्चै विडम्बनापूर्ण कारीगर जुनसुकै कीटार, सीनस्टर फार्म-टू-टेबल बैंक्सी अस्टिन ट्विटर ह्यान्डल फ्रीगन क्रेड कच्चा डेनिम सिंगल-ओरिजिन कफी भाइरल।

bootstrap-tooltip.js प्रयोग गर्दै

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

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

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
नियुक्ति स्ट्रिङ | प्रकार्य 'माथि' टुलटिप कसरी राख्ने - शीर्ष | तल | बायाँ | सही
चयनकर्ता तार गलत यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ।
शीर्षक स्ट्रिङ | समारोह '' यदि `शीर्षक` ट्याग अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
ट्रिगर तार 'होभर' टूलटिप कसरी ट्रिगर हुन्छ - होभर | फोकस | म्यानुअल
ढिला नम्बर | वस्तु ०

टुलटिप (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { show: 500, hide: 100 }
हेड अप! व्यक्तिगत टूलटिपका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोगद्वारा निर्दिष्ट गर्न सकिन्छ।

मार्कअप

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

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

विधिहरू

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

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

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

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

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

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

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

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

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

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

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

Popovers bootstrap-popover.js

popovers को बारेमा

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

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

डाउनलोड फाइल

होभर पपओभरको उदाहरण

पपओभर ट्रिगर गर्न बटनमा होभर गर्नुहोस्।

पपओभरको लागि होभर गर्नुहोस्

bootstrap-popover.js प्रयोग गर्दै

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

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

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
एनिमेसन बुलियन सत्य टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
नियुक्ति स्ट्रिङ | प्रकार्य 'सही' कसरी popover स्थिति राख्ने - शीर्ष | तल | बायाँ | सही
चयनकर्ता तार गलत यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ
ट्रिगर तार 'होभर' टूलटिप कसरी ट्रिगर हुन्छ - होभर | फोकस | म्यानुअल
शीर्षक स्ट्रिङ | समारोह '' यदि `शीर्षक` विशेषता उपस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
सामग्री स्ट्रिङ | समारोह '' यदि `डेटा-सामग्री` विशेषता उपस्थित छैन भने पूर्वनिर्धारित सामग्री मान
ढिला नम्बर | वस्तु ०

पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन

यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ

वस्तु संरचना हो:delay: { show: 500, hide: 100 }
हेड अप! व्यक्तिगत पोपोभरका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोग मार्फत निर्दिष्ट गर्न सकिन्छ।

मार्कअप

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

विधिहरू

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

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

.popover ('शो')

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

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

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

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

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

.popover ('टगल')

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

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

चेतावनी सन्देश bootstrap-alert.js

अलर्ट बारे

अलर्ट प्लगइन अलर्टहरूमा नजिकको कार्यक्षमता थप्नको लागि सानो वर्ग हो।

डाउनलोड गर्नुहोस्

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

अलर्ट प्लगइनले नियमित अलर्ट सन्देशहरू र ब्लक सन्देशहरूमा काम गर्दछ।

पवित्र guacamole! उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनु भएको छैन।

ओह स्न्याप! तपाईंले त्रुटि पाउनुभयो!

यो र त्यो परिवर्तन गर्नुहोस् र फेरि प्रयास गर्नुहोस्। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit। Cras Mattis consectetur purus sit amet fermentum।

यो कारबाही गर्नुहोस् वा यो गर्नुहोस्

bootstrap-alert.js प्रयोग गर्दै

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

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

मार्कअप

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

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

विधिहरू

$() अलर्ट()

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

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

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

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

घटनाहरू

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

घटना विवरण
बन्द closeउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
बन्द अलर्ट बन्द भएको बेला यो घटना निकालिएको छ (css ट्रान्जिसन पूरा हुनको लागि पर्खनेछ)। 
  1. $ ( '#my-alert' )। बाँध ( 'बंद' , प्रकार्य () {   
  2.   // केही गर…
  3. })

बटन bootstrap-button.js

बारे

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

डाउनलोड फाइल

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

राज्यहरू र टगलहरूका लागि बटनहरू प्लगइन प्रयोग गर्नुहोस्।

स्टेटफुल
एकल टगल
चेकबक्स
रेडियो

bootstrap-button.js प्रयोग गर्दै

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

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

मार्कअप

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

  1. <!-- एकल बटनमा टगलिङ सक्रिय गर्न data-toggle="button" थप्नुहोस् -->
  2. <बटन वर्ग = "btn" डाटा-टगल = "बटन" > एकल टगल </ बटन>  
  3.  
  4. <!-- btn-group मा चेकबक्स शैली टगल गर्नको लागि data-toggle="buttons-checkbox" थप्नुहोस् -->
  5. <div class = "btn-group" data-toggle = "buttons-checkbox" >  
  6.   <बटन वर्ग = "btn" > बायाँ </ बटन> 
  7.   <बटन वर्ग = "btn" > मध्य </ बटन> 
  8.   <बटन वर्ग = "btn" > दायाँ </ बटन> 
  9. </div>
  10.  
  11. <!-- btn-समूहमा रेडियो शैली टगल गर्नको लागि data-toggle="buttons-radio" थप्नुहोस् -->
  12. <div class = "btn-group" data-toggle = "बटन-रेडियो" >  
  13.   <बटन वर्ग = "btn" > बायाँ </ बटन> 
  14.   <बटन वर्ग = "btn" > मध्य </ बटन> 
  15.   <बटन वर्ग = "btn" > दायाँ </ बटन> 
  16. </div>

विधिहरू

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

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

हेड अप! तपाईंले विशेषता प्रयोग गरेर बटनको स्वत: टगलिङ सक्षम गर्न सक्नुहुन्छ data-toggle। 
  1. <बटन वर्ग = "btn" डाटा-टगल = "बटन" > … </ बटन>

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

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

  1. <बटन वर्ग = "btn" data-loading-text = "सामान लोड गर्दै..." > ... </ बटन>
हेड अप! फायरफक्सले पृष्ठ लोडहरूमा असक्षम स्थिति कायम राख्छ । यसको लागि एक समाधान प्रयोग गर्न को लागी छ autocomplete="off"।

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

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

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

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

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

bootstrap-collapse.js संक्षिप्त गर्नुहोस्

बारे

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

डाउनलोड फाइल

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

उदाहरण accordion

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

संक्षिप्त गर्न मिल्ने समूह वस्तु #1
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।
मिलाउन मिल्ने समूह वस्तु #2
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।
मिलाउन मिल्ने समूह वस्तु #3
Anim pariatur cliche reprehenderit, enim eiusmod High life accusamus टेरी रिचर्डसन विज्ञापन स्क्विड। 3 वुल्फ मून अफिसिया अउट, गैर कपिडाट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। Brunch 3 वुल्फ मून टेम्पर, सन्ट एलिक्वाले यसमा चरा राख्यो स्क्विड सिंगल-ओरिजिन कफी नुल्ला एसुमेन्डा शोरेडिच एट। निहिल एनिम केफियेह हेल्भेटिका, क्राफ्ट बियर लेबर वेस एन्डरसन क्रेडिट नेसियन्ट सेपिएन्ट ईए प्रोडेन्ट। Ad vegan excepteur butcher vice lomo। Leggings occaecat क्राफ्ट बियर फार्म-टू-टेबल, कच्चा डेनिम एस्थेटिक सिन्थ नेसियन्ट तपाईंले सायद तिनीहरूको बारेमा सुन्नुभएन।

bootstrap-collapse.js प्रयोग गर्दै

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

  1. $ ( ". पतन" )। पतन ()

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
अभिभावक चयनकर्ता गलत यदि चयनकर्ता हो भने यो मिलाउन मिल्ने वस्तु देखाउँदा तोकिएको अभिभावक अन्तर्गतका सबै मिलाउन मिल्ने तत्वहरू बन्द हुनेछन्। (परम्परागत एकॉर्डियन व्यवहार जस्तै)
टगल गर्नुहोस् बुलियन सत्य आह्वानमा मिल्ने तत्वलाई टगल गर्छ

मार्कअप

ढल्न मिल्ने तत्वको नियन्त्रण स्वतः असाइन गर्नको लागि केवल तत्व थप्नुहोस् data-toggle="collapse"र a । विशेषताले पतन लागू गर्नको लागि एक css चयनकर्ता स्वीकार गर्दछ data-target। संकुचित तत्वमा data-targetवर्ग थप्न निश्चित हुनुहोस् । collapseयदि तपाइँ यसलाई पूर्वनिर्धारित रूपमा खोल्न चाहनुहुन्छ भने, अतिरिक्त कक्षा थप्नुहोस् in।

  1. <बटन वर्ग = "btn btn-खतरा" डेटा-टगल = "संकुचन" डाटा-लक्ष्य = "#डेमो" >   
  2.   साधारण संकुचन योग्य
  3. </ बटन>
  4.  
  5. <div id = "डेमो" वर्ग = "संकुचित गर्नुहोस्" > … </div>
हेड अप! एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने नियन्त्रणमा थप्न, डेटा विशेषता थप्नुहोस् data-parent="#selector"। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।

विधिहरू

पतन (विकल्पहरू)

तपाइँको सामग्री एक संकुचन तत्व को रूप मा सक्रिय गर्दछ। वैकल्पिक विकल्पहरू स्वीकार गर्दछ object।

  1. $ ( '#myCollapsible' )। पतन ({
  2.   टगल : गलत 
  3. })

पतन ('टगल')

देखाइएका वा लुकाउन मिल्ने तत्वलाई टगल गर्छ।

पतन ('देखाउनुहोस्')

मिलाउन मिल्ने तत्व देखाउँछ।

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

मिलाउन मिल्ने तत्व लुकाउँछ।

घटनाहरू

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

घटना विवरण
देखाउनु showउदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ ।
देखाइयो यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (css संक्रमण पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस् यो घटना तुरुन्तै निकालिएको छ जब hideविधि कल गरिएको छ।
लुकेको यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)। 
  1. $ ( '#myCollapsible' )। मा ( 'लुकेको' , प्रकार्य () {   
  2.   // केही गर…
  3. })

Typeahead bootstrap-typeahead.js

बारे

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

डाउनलोड फाइल

उदाहरण

टाइपहेड परिणामहरू देखाउन तलको क्षेत्रमा टाइप गर्न सुरु गर्नुहोस्।

bootstrap-typeahead.js प्रयोग गर्दै

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

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

विकल्पहरू

नाम प्रकार पूर्वनिर्धारित विवरण
मुहान array [ ] विरुद्ध क्वेरी गर्न डेटा स्रोत।
वस्तुहरू संख्या ८ ड्रपडाउनमा प्रदर्शन गर्न वस्तुहरूको अधिकतम संख्या।
मिलाउने समारोह केस असंवेदनशील क्वेरीले वस्तुसँग मेल खान्छ कि भनेर निर्धारण गर्न प्रयोग गरिने विधि। एकल तर्क स्वीकार गर्दछ, जसको itemविरुद्धमा क्वेरी परीक्षण गर्न सकिन्छ। हालको प्रश्नमा पहुँच गर्नुहोस् this.query। trueयदि क्वेरी मिल्दो हो भने बुलियन फर्काउनुहोस् ।
क्रमबद्ध समारोह सटीक मिलान,
केस संवेदनशील,
केस असंवेदनशील		 स्वत: पूर्ण परिणामहरू क्रमबद्ध गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ itemsर टाइपहेड उदाहरणको दायरा छ। हालको प्रश्नलाई सन्दर्भ गर्नुहोस् this.query।
हाइलाइटर समारोह सबै पूर्वनिर्धारित मिलानहरू हाइलाइट गर्दछ स्वत: पूर्ण परिणामहरू हाइलाइट गर्न प्रयोग गरिएको विधि। एकल तर्क स्वीकार गर्दछ itemर टाइपहेड उदाहरणको दायरा छ। html फर्काउनु पर्छ।

मार्कअप

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

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

विधिहरू

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

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