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

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

मोडलहरू

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

ड्रपडाउनहरू

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

Scrollspy

स्क्रोल स्थितिमा आधारित हालको सक्रिय लिङ्क देखाउनको लागि तपाईंको नेभबारमा लिङ्कहरू स्वचालित रूपमा अद्यावधिक गर्न scrollspy प्रयोग गर्नुहोस्।

टगल गर्न मिल्ने ट्याबहरू

स्थानीय सामग्रीको ट्याबबल प्यानहरू मार्फत टगल गर्न अनुमति दिएर ट्याबहरू र चक्कीहरूलाई थप उपयोगी बनाउन यो प्लगइन प्रयोग गर्नुहोस्।

टूलटिप्स

jQuery Tipsy प्लगइनमा नयाँ टेक, टूलटिपहरू छविहरूमा भर पर्दैनन् — तिनीहरू एनिमेसनहरू र स्थानीय शीर्षक भण्डारणका लागि डेटा-विशेषताहरूका लागि CSS3 प्रयोग गर्छन्।

Popovers *

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

* उपकरणटिपहरू समावेश गर्न आवश्यक छ

अलर्ट सन्देशहरू

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

बटनहरू

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

संक्षिप्त गर्नुहोस्

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

क्यारोसेल

तपाईंले सामग्रीको अन्तरक्रियात्मक स्लाइड शो प्रदान गर्न चाहनुभएको कुनै पनि सामग्रीको रमाइलो-गो-राउन्ड सिर्जना गर्नुहोस्।

टाइपहेड

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

संक्रमण *

साधारण संक्रमण प्रभावहरूको लागि, मोडलहरूमा स्लाइड गर्न वा अलर्टहरू फेड गर्नको लागि bootstrap-transition.js समावेश गर्नुहोस्।

* प्लगइनहरूमा एनिमेसनको लागि आवश्यक छ

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

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

डाउनलोड फाइल

स्थिर उदाहरण

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

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

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

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

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

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

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

विकल्पहरू

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

मार्कअप

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल सुरु गर्नुहोस् </a>

<div class = "modal hide" id = "myModal" >  
  <div वर्ग = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डाटा-खारिज = "मोडल" > × </ बटन>   
    <h3> मोडल हेडर </ h3>
  </div>
  <div class = "modal-body" > 
    <p> एउटा राम्रो शरीर... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > बन्द गर्नुहोस् </a>   
    <a href="#" class="btn btn-primary" > परिवर्तनहरू बचत गर्नुहोस् </a> _  
  </div>
</div>

हेड अप! यदि तपाइँ तपाइँको मोडल भित्र र बाहिर एनिमेट गर्न चाहनुहुन्छ भने, केवल तत्वमा एक .fadeकक्षा थप्नुहोस् .modal(यसलाई कार्यमा हेर्न डेमोलाई सन्दर्भ गर्नुहोस्) र bootstrap-transition.js समावेश गर्नुहोस्।

विधिहरू

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

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

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

मोडल ('टगल')

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

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

मोडल ('शो')

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

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

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

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

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

घटनाहरू

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

घटना	विवरण
देखाउनु	`show`उदाहरण विधि कल गर्दा यो घटना तुरुन्तै फायर हुन्छ ।
देखाइयो	यो घटना तब निकालिन्छ जब मोडल प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस्	यो घटना तुरुन्तै निकालिएको छ जब `hide`उदाहरण विधि कल गरिएको छ।
लुकेको	यो घटना तब निकालिन्छ जब मोडल प्रयोगकर्ताबाट लुकाइएको समाप्त हुन्छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

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

ड्रपडाउन बारे

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

डाउनलोड फाइल

उदाहरणहरू

ड्रपडाउन परीक्षण गर्न तलको नेभबार र पिल्समा ड्रपडाउन एनएभि लिङ्कहरूमा क्लिक गर्नुहोस्।

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

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

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

मार्कअप

कुनै पनि तत्वमा द्रुत रूपमा ड्रपडाउन कार्यक्षमता थप्नको लागि मात्र थप्नुहोस् data-toggle="dropdown"र कुनै पनि मान्य बुटस्ट्र्याप ड्रपडाउन स्वचालित रूपमा सक्रिय हुनेछ।

हेड अप! data-target="#fat"तपाइँ वैकल्पिक रूपमा वा प्रयोग गरेर एक विशेष ड्रपडाउन लक्षित गर्न सक्नुहुन्छ href="#fat"।

<ul class = "nav nav-pills" > 
  <li वर्ग = "सक्रिय" ><a href = "#" > नियमित लिङ्क </a></li>  
  <li वर्ग = "ड्रपडाउन" आईडी = "मेनु१" >  
    <a वर्ग = "ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" href = "#menu1" >   
      ड्रपडाउन
      <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      <li><a href = "#" > कार्य </a></li> 
      <li><a href="#" > अर्को कार्य </a> < /li> 
      <li><a href = "#" > यहाँ अरू केही </a></li> 
      <li वर्ग = "विभाजक" ></li> 
      <li><a href = "#" > अलग गरिएको लिङ्क </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "ड्रपडाउन" > 
    <a वर्ग = "ड्रपडाउन-टगल" डाटा-टगल = "ड्रपडाउन" डाटा-लक्ष्य = "#" href = "path/to/page.html" >    
      ड्रपडाउन
      <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </li>
</ul>

विधिहरू

$() ड्रपडाउन()

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

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 कल गर्नुहोस्:

$ ( '#navbar' )। scrollspy ()

मार्कअप

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

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

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

विधिहरू

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

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

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

विकल्पहरू

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

घटनाहरू

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

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

डाउनलोड फाइल

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

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

कच्चा डेनिम तपाईंले सायद तिनीहरूको जीन शर्ट्स अस्टिनको बारेमा सुन्नु भएको छैन। Nesciunt tofu stumptown aliqua, retro synth master cleanse। Mustache cliche tempor, Williamsburg Carles Vegan helvetica। Reprehenderit butcher retro keffiyeh dreamcatcher synth। Cosby स्वेटर 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.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

ट्रस्ट फन्ड सेटन लेटरप्रेस, किटार कच्चा डेनिम केफियेह ईटीसी आर्ट पार्टी मास्टर क्लिन्ज ग्लुटेन-फ्री स्क्विड सीनस्टर फ्रीगन कोस्बी स्वेटर बेच्नु अघि। फ्यानी प्याक पोर्टल्यान्ड सीटन DIY, आर्ट पार्टी लोकाभोर वुल्फ क्लिच हाई लाइफ इको पार्क अस्टिन। Cred vinyl keffiyeh DIY salvia PBR, banh mi तिनीहरूले फार्म-टू-टेबल VHS भाइरल लोकाभोर कोस्बी स्वेटर बेच्नु अघि। लोमो वुल्फ भाइरल, जुँगा रेडिमेड थन्डरक्याट्स केफियेह क्राफ्ट बियर मार्फा नैतिक। वुल्फ साल्भिया फ्रीगन, सार्टोरियल केफियेह इको पार्क शाकाहारी।

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

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

$ ( '#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>

घटनाहरू

घटना	विवरण
देखाउनु	यो घटना ट्याब शो मा फायर हुन्छ, तर नयाँ ट्याब देखाउनु अघि। प्रयोग गर्नुहोस् `event.target`र `event.relatedTarget`क्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न।
देखाइयो	ट्याब देखाइएपछि यो घटना ट्याब शोमा सक्रिय हुन्छ। प्रयोग गर्नुहोस् `event.target`र `event.relatedTarget`क्रमशः सक्रिय ट्याब र अघिल्लो सक्रिय ट्याब (यदि उपलब्ध छ) लक्षित गर्न।

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

Tooltips को बारेमा

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

डाउनलोड फाइल

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

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

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

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

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

विकल्पहरू

नाम	प्रकार	पूर्वनिर्धारित	विवरण
एनिमेसन	बुलियन	सत्य	टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
नियुक्ति	स्ट्रिङ \| प्रकार्य	'माथि'	टुलटिप कसरी राख्ने - शीर्ष \| तल \| बायाँ \| सही
चयनकर्ता	तार	गलत	यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ।
शीर्षक	स्ट्रिङ \| समारोह	''	यदि `शीर्षक` ट्याग अवस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
ट्रिगर	तार	'होभर'	टूलटिप कसरी ट्रिगर हुन्छ - होभर \| फोकस \| म्यानुअल
ढिला	नम्बर \| वस्तु	०	टुलटिप (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ वस्तु संरचना हो:`delay: { show: 500, hide: 100 }`

हेड अप! व्यक्तिगत टूलटिपका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोगद्वारा निर्दिष्ट गर्न सकिन्छ।

मार्कअप

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

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

विधिहरू

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

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

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

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

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

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

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

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

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

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

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

popovers को बारेमा

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

डाउनलोड फाइल

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

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

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

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

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

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

विकल्पहरू

नाम	प्रकार	पूर्वनिर्धारित	विवरण
एनिमेसन	बुलियन	सत्य	टुलटिपमा सीएसएस फेड ट्रान्जिसन लागू गर्नुहोस्
नियुक्ति	स्ट्रिङ \| प्रकार्य	'सही'	कसरी popover स्थिति राख्ने - शीर्ष \| तल \| बायाँ \| सही
चयनकर्ता	तार	गलत	यदि चयनकर्ता प्रदान गरिएको छ भने, टुलटिप वस्तुहरूलाई निर्दिष्ट लक्ष्यहरूमा प्रत्यायोजित गरिनेछ
ट्रिगर	तार	'होभर'	टूलटिप कसरी ट्रिगर हुन्छ - होभर \| फोकस \| म्यानुअल
शीर्षक	स्ट्रिङ \| समारोह	''	यदि `शीर्षक` विशेषता उपस्थित छैन भने पूर्वनिर्धारित शीर्षक मान
सामग्री	स्ट्रिङ \| समारोह	''	यदि `डेटा-सामग्री` विशेषता उपस्थित छैन भने पूर्वनिर्धारित सामग्री मान
ढिला	नम्बर \| वस्तु	०	पपओभर (ms) देखाउन र लुकाउन ढिलाइ - म्यानुअल ट्रिगर प्रकारमा लागू हुँदैन यदि नम्बर प्रदान गरिएको छ भने, ढिलाइ लुकाउने/देखाउन दुवैमा लागू हुन्छ वस्तु संरचना हो:`delay: { show: 500, hide: 100 }`

हेड अप! व्यक्तिगत पोपोभरका लागि विकल्पहरू वैकल्पिक रूपमा डेटा विशेषताहरूको प्रयोग मार्फत निर्दिष्ट गर्न सकिन्छ।

मार्कअप

विधिहरू

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

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

.popover ('शो')

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

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

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

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

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

.popover ('टगल')

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

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

अलर्ट बारे

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

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

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

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

पवित्र 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 प्रयोग गर्दै

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

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

मार्कअप

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

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

विधिहरू

$() अलर्ट()

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

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

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

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

घटनाहरू

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

घटना	विवरण
बन्द	`close`उदाहरण विधि कल गर्दा यो घटना तुरुन्तै फायर हुन्छ ।
बन्द	अलर्ट बन्द भएको बेला यो घटना निकालिएको छ (css ट्रान्जिसन पूरा हुनको लागि पर्खनेछ)।

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

बारे

डाउनलोड फाइल

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

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

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

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

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

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

मार्कअप

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

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

विधिहरू

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

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

हेड अप! तपाईंले विशेषता प्रयोग गरेर बटनको स्वत: टगलिङ सक्षम गर्न सक्नुहुन्छ data-toggle।

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

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

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

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

हेड अप! फायरफक्सले पृष्ठ लोडहरूमा असक्षम स्थिति कायम राख्छ । यसको लागि एक समाधान प्रयोग गर्न को लागी छ autocomplete="off"।

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

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

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

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

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

बारे

डाउनलोड फाइल

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

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

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

संक्षिप्त गर्न मिल्ने समूह वस्तु #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 प्रयोग गर्दै

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

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

विकल्पहरू

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

मार्कअप

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

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

हेड अप! एकोर्डियन-जस्तै समूह व्यवस्थापनलाई मिलाउन मिल्ने नियन्त्रणमा थप्न, डेटा विशेषता थप्नुहोस् data-parent="#selector"। यसलाई कार्यमा हेर्नको लागि डेमोलाई सन्दर्भ गर्नुहोस्।

विधिहरू

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

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

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

पतन ('टगल')

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

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

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

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

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

घटनाहरू

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

घटना	विवरण
देखाउनु	`show`उदाहरण विधि कल गर्दा यो घटना तुरुन्तै फायर हुन्छ ।
देखाइयो	यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्तालाई दृश्यात्मक बनाइन्छ (css संक्रमण पूरा हुनको लागि पर्खनेछ)।
लुकाउनुहोस्	यो घटना तुरुन्तै निकालिएको छ जब `hide`विधि कल गरिएको छ।
लुकेको	यो घटना हटाइन्छ जब एक पतन तत्व प्रयोगकर्ताबाट लुकाइएको छ (css ट्रान्जिसनहरू पूरा हुनको लागि पर्खनेछ)।

$ ( '#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।

‹ ›

हेड अप! यो क्यारोसेल लागू गर्दा, हामीले प्रदान गरेका छविहरू हटाउनुहोस् र तिनीहरूलाई तपाईंको आफ्नै छविले बदल्नुहोस्।

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

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

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

विकल्पहरू

नाम	प्रकार	पूर्वनिर्धारित	विवरण
अन्तराल	संख्या	५०००	वस्तुलाई स्वचालित रूपमा साइकल चलाउनको बीचमा ढिलाइ हुने समयको मात्रा। यदि गलत छ भने, क्यारोसेल स्वचालित रूपमा चक्र हुनेछैन।
पज	तार	"होभर"	माउसिन्टरमा क्यारोसेलको साइकल चलाउन रोक्छ र माउसलिभमा क्यारोसेलको साइकल चलाउन पुन: सुरु गर्छ।

मार्कअप

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

<div id = "myCarousel" वर्ग = "क्यारोसेल स्लाइड" >  
  <!-- क्यारोसेल वस्तुहरू -->
  <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>

विधिहरू

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

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

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

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

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

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

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

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

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

.carousel('prev')

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

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

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

घटनाहरू

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

घटना	विवरण
स्लाइड	`slide`उदाहरण विधि बोलाउँदा यो घटना तुरुन्तै सक्रिय हुन्छ।
स्लाइड	क्यारोसेलले आफ्नो स्लाइड ट्रान्जिसन पूरा गरिसकेपछि यो घटना सक्रिय हुन्छ।

बारे

डाउनलोड फाइल

उदाहरण

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

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

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

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

विकल्पहरू

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

मार्कअप

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

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

विधिहरू

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

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

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

Popovers *

संक्रमण *

मोडल bootstrap-modal.js

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

स्थिर उदाहरण

मोडल हेडर

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

मोडल शीर्षक

मोडलमा पाठ

एक मोडल मा Popover

मोडलमा टूलटिप्स

वैकल्पिक स्क्रोलबार देखाउन ओभरफ्लोिङ टेक्स्ट

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

विकल्पहरू

मार्कअप

विधिहरू

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

मोडल ('टगल')

मोडल ('शो')

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

घटनाहरू

ड्रपडाउन bootstrap-dropdown.js

ड्रपडाउन बारे

उदाहरणहरू

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

मार्कअप

विधिहरू

$() ड्रपडाउन()

ScrollSpy bootstrap-scrollspy.js

scrollspy संग उदाहरण navbar

@मोटो

@mdo

एउटा

दुई

three

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

मार्कअप

विधिहरू

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

विकल्पहरू

घटनाहरू

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

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

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

मार्कअप

विधिहरू

$() ट्याब

घटनाहरू

Tooltips bootstrap-tooltip.js

Tooltips को बारेमा

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

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

विकल्पहरू

मार्कअप

विधिहरू

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

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

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

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

Popovers bootstrap-popover.js

popovers को बारेमा

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

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

विकल्पहरू

मार्कअप

विधिहरू

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

.popover ('शो')

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

.popover ('टगल')

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

अलर्ट बारे

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

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

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

मार्कअप

विधिहरू

$() अलर्ट()

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