बूटस्ट्रैप के बा

बूटस्ट्रैप खातिर जावास्क्रिप्ट बा

बूटस्ट्रैप के घटक के जीवन में ले आईं-अब 13 कस्टम jQuery प्लगइन के साथ।

बूटस्ट्रैप में जावास्क्रिप्ट बा

व्यक्तिगत भा संकलित कइल जाव

अगर रउआ बूटस्ट्रैप के लेटेस्ट वर्जन डाउनलोड कइले बानी त bootstrap.js आ bootstrap.min.js दुनो में एह पन्ना पर दिहल सभ प्लगइन बा।

डेटा के विशेषता के बारे में बतावल गइल बा

रउआँ सभ बूटस्ट्रैप प्लगइन सभ के इस्तेमाल बिशुद्ध रूप से मार्कअप एपीआई के माध्यम से बिना जावास्क्रिप्ट के एक लाइन लिखले क सकत बानी। ई बूटस्ट्रैप के पहिला श्रेणी के एपीआई ह आ प्लगइन के इस्तेमाल करत घरी ई रउरा पहिला विचार करे के चाहीं.

कहल जा सकेला कि कुछ स्थिति में एह कार्यक्षमता के बंद कइल वांछनीय हो सकेला. एह से, हमनी के `'data-api'` के साथ नेमस्पेस कइल बॉडी पर सभ इवेंट के अनबाइंड क के डेटा एट्रिब्यूट एपीआई के अक्षम करे के क्षमता भी उपलब्ध करावेनी जा। ई अइसन लउकत बा:

  1. $ ( 'शरीर' ) के रूप में दिहल गइल बा। बंद ( '.डेटा-एपीआई' ) के बा।

एकरे अलावा, कौनों बिसेस प्लगइन के लक्ष्य बनावे खातिर, बस प्लगइन सभ के नाँव के नेमस्पेस के रूप में डेटा-एपीआई नेमस्पेस के साथ एह तरीका से शामिल करीं:

  1. $ ( 'शरीर' ) के रूप में दिहल गइल बा। बंद ( '.alert.data-api' ) के बा।

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

हमनी के इहो मानना ​​बा कि रउरा सभे बूटस्ट्रैप प्लगइन के इस्तेमाल विशुद्ध रूप से जावास्क्रिप्ट एपीआई के माध्यम से करे में सक्षम होखे के चाहीं. सभ सार्वजनिक एपीआई सभ सिंगल, चेन करे लायक तरीका हवें, आ ओह संग्रह के वापस करे लें जेह पर कार्रवाई कइल गइल बा।

  1. $ ( ".btn.खतरा" ) के बा। बटन ( "टॉगल" ) के बा। addClass ( "वसा" ) के बा।

सभ तरीका सभ के कौनों वैकल्पिक विकल्प ऑब्जेक्ट, कौनों स्ट्रिंग जे कौनों खास तरीका के लक्ष्य बनावे ला, या कुछ ना (जवन डिफ़ॉल्ट व्यवहार के साथ प्लगइन के सुरुआत करे) के स्वीकार करे के चाहीं:

  1. $ ( "# हमार मोडल" ) के बा। मोडल () // डिफ़ॉल्ट के साथ आरंभ कइल गइल                       
  2. $ ( "# हमार मोडल" ) के बा। मोडल ({ कीबोर्ड : गलत }) // कवनो कीबोर्ड के साथ आरंभ कइल गइल     
  3. $ ( "# हमार मोडल" ) के बा। modal ( 'show' ) // तुरंत देखावे के आरंभ करेला आ आह्वान करेला

हर प्लगइन भी एगो `कंस्ट्रक्टर` गुण पर आपन कच्चा कंस्ट्रक्टर के उजागर करेला: $.fn.popover.Constructor. अगर रउआँ कवनो खास प्लगइन इंस्टेंस पावल चाहत बानी, त ओकरा के सीधे कवनो तत्व से रिट्रीव करीं: $('[rel=popover]').data('popover').

घटनाक्रम के बारे में बतावल गइल बा

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

सभ अव्यय घटना preventDefault कार्यक्षमता प्रदान करे लीं। एह से कवनो क्रिया के शुरू होखे से पहिले ओकरा निष्पादन के रोके के क्षमता मिलेला.

  1. $ ( '# माईमोडल' ) के बा। पर ( 'देखाईं' , फंक्शन ( ई ) {   
  2.     अगर (! डेटा ) रिटर्न ई बा। preventDefault () // मोडल के देखावे से रोक देला   
  3. }) के बा।

संक्रमण bootstrap-transition.js के बा

संक्रमण के बारे में बा

सरल संक्रमण प्रभाव खातिर, बाकी जेएस फाइल सभ के साथ एक बेर bootstrap-transition.js के शामिल करीं। अगर रउआँ संकलित (या मिनीफाइड) bootstrap.js के इस्तेमाल कर रहल बानी, एकरा के शामिल करे के जरूरत नइखे-ई पहिले से बा।

केस के प्रयोग कइल जाला

संक्रमण प्लगइन के कुछ उदाहरण बा:

  • मोडल में फिसलल भा फीका पड़ल
  • टैब के फीका पड़त बा
  • अलर्ट के फीका पड़त बा
  • हिंडोला फलक फिसलत बा

मोडल बूटस्ट्रैप-मोडल.जेएस के बा

उदाहरण खातिर दिहल गइल बा

मोडल सभ के सुव्यवस्थित, बाकी लचीला, डायलॉग प्रॉम्प्ट सभ के साथ न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट सभ के साथ।

स्थिर उदाहरण बा

हेडर, बॉडी, आ पाद लेख में एक्शन सभ के सेट के साथ एगो रेंडर कइल मोडल।

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

एगो महीन शरीर के...

बंद करीं बदलाव के सहेज के रखीं 
  1. <div class = "मोडल छिपावे के फीका पड़ जाला" > 
  2.   <div वर्ग = "मोडल-हेडर" > बा 
  3.     <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छुपल = "सच्चा" > × </बटन> के बा    
  4.     <h3> मोडल हेडर </h3> के बा
  5.   </div> के बा
  6.   <div वर्ग = "मोडल-शरीर" > के बा 
  7.     <p> एगो महीन शरीर... </p>
  8.   </div> के बा
  9.   <div वर्ग = "मोडल-पाद लेख" > बा 
  10.     <a href = "#" क्लास = "btn" > बंद करीं </a>  
  11.     <a href = "#" class = "btn btn-primary" > बदलाव सहेजीं </a>  
  12.   </div> के बा
  13. </div> के बा

लाइव डेमो बा

नीचे दिहल बटन पर क्लिक क के जावास्क्रिप्ट के माध्यम से कवनो मोडल के टॉगल करीं। ई नीचे सरक जाई आ पन्ना के ऊपर से फीका पड़ जाई.

डेमो मोडल लॉन्च कइल जाव 
  1. <-- मोडल के ट्रिगर करे खातिर बटन -->
  2. <a href = "#myModal" भूमिका = "बटन" वर्ग = "btn" डेटा-टॉगल = "मोडल" > डेमो मोडल लॉन्च करीं </a>    
  3.  
  4. <-- मोडल --> के बा
  5. <div वर्ग = "मोडल" आईडी = "myModal" tabindex = "-1" भूमिका = "संवाद" aria-labelledby = "myModalLabel" aria -hidden = "सत्य" >      
  6.   <div वर्ग = "मोडल-हेडर" > बा 
  7.     <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छुपल = "सच्चा" > × </बटन>    
  8.     <h3 id = "myModalLabel" > मोडल हेडर </h3> बा 
  9.   </div> के बा
  10.   <div वर्ग = "मोडल-शरीर" > के बा 
  11.     <p> एगो महीन शरीर... </p>
  12.   </div> के बा
  13.   <div वर्ग = "मोडल-पाद लेख" > बा 
  14.     <button class = "btn" data- dismiss = "मोडल" aria-hidden = "सत्य" > बंद करीं </बटन>   
  15.     <button class = "btn btn-primary" > बदलाव सहेजीं </button> 
  16.   </div> के बा
  17. </div> के बा

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

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

  1. <बटन प्रकार = "बटन" डेटा-टॉगल = "मोडल" डेटा-लक्ष्य = "#myModal" > मोडल लॉन्च करीं </बटन>

जावास्क्रिप्ट के माध्यम से कइल जाला

myModalजावास्क्रिप्ट के एकल लाइन के साथ आईडी वाला मोडल के कॉल करीं :

  1. $ ( '# माईमोडल' ) के बा। मोडल ( विकल्प ) के बा .

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-backdrop=""।

नांव किसिम बाकी बिबरन
पृष्ठभूमि के बा बूलियन के बा सच एगो मोडल-बैकग्राउंड तत्व शामिल बा। एकरे अलावा, अइसन बैकग्राउंड खातिर निर्दिष्ट करीं staticजे क्लिक पर मोडल बंद ना करे।
कीबोर्ड के बारे में बतावल गइल बा बूलियन के बा सच एस्केप की दबावे पर मोडल बंद कर देला
देखायीं बूलियन के बा सच इनिशियलाइज होखे पर मोडल देखावे ला।
दूर में स्थित राह गलत

अगर कवनो रिमोट यूआरएल दिहल गइल बा त सामग्री के jQuery के loadतरीका के माध्यम से लोड कइल जाई आ .modal-body. अगर आप डेटा api के इस्तेमाल कर रहल बानी, आप वैकल्पिक रूप hrefसे दूरस्थ स्रोत निर्दिष्ट करे खातिर टैग के इस्तेमाल कर सकत बानी। एकर एगो उदाहरण नीचे देखावल गइल बा:

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

विधियन के बारे में बतावल गइल बा

.मोडल(विकल्प) के बा।

मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला object.

  1. $ ( '# माईमोडल' ) के बा। मोडल ({ के बा।
  2.   कीबोर्ड : गलत बा 
  3. }) के बा।

.मोडल ('टॉगल') के बा।

मैन्युअल रूप से एगो मोडल के टॉगल करेला।

  1. $ ( '# माईमोडल' ) के बा। मोडल ( 'टॉगल' ) के बा।

.मोडल('देखावे') के बा।

मैन्युअल रूप से एगो मोडल खोलेला।

  1. $ ( '# माईमोडल' ) के बा। मोडल ( 'देखावे' ) के बा।

.मोडल('छुपावे') के बा।

मैन्युअल रूप से एगो मोडल के छिपा देला।

  1. $ ( '# माईमोडल' ) के बा। मोडल ( 'छुपावल' ) के बा।

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के मोडल क्लास मोडल फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।

कार्यक्रम बिबरन
देखायीं showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल बा ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)।
लुकाइल ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला।
छिपल ई इवेंट तब फायर कइल जाला जब मोडल के यूजर से छिपावल खतम हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। 
  1. $ ( '# माईमोडल' ) के बा। पर ( 'छुपल' , फंक्शन () { 1।   
  2.   // कुछ करे के बा...
  3. }) के बा।

स्क्रॉलस्पाई बूटस्ट्रैप-स्क्रॉलस्पाई.जेएस के बा

नवबार में उदाहरण बा

स्क्रॉलस्पाई प्लगइन स्क्रॉल के स्थिति के आधार पर नेव टारगेट के स्वचालित रूप से अपडेट करे खातिर बा। नवबार के नीचे वाला इलाका के स्क्रॉल करीं आ सक्रिय क्लास बदलत देखीं. ड्रॉपडाउन सब आइटम के भी हाइलाइट कईल जाई।

@मोट

विज्ञापन लेगिंग कीतार, ब्रंच आईडी कला पार्टी डोलर श्रम। पिचफोर्क yr एनिम लो-फाई से पहिले कि उ लोग क्वि बिक गईल। टम्बलर फार्म-टू-टेबल साइकिल के अधिकार जवन भी होखे। अनिम केफियेह कार्लेस कार्डिगन के बा। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure। Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद इनके बारे में नहीं सुनले होखब एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र। निहिल गोदना एक्यूसमस, क्रेड विडंबना बायोडीजल केफियेह कारीगर उल्लमको परिणाम।

@mdo के बा

वेनियम मार्फा मूंछ स्केटबोर्ड, एडिपिसिसिंग फ्यूजियाट वेलिट पिचफोर्क दाढ़ी। फ्रीगन दाढ़ी aliqua cupidat mcsweeney के वेरो के बा। कामदेवताट चार लोको निसी, ईए हेल्वेटिका नुला कार्लेस। गोदना गोदवले कॉस्बी स्वेटर फूड ट्रक, मैकस्वीनी के क्विस गैर फ्रीगन विनाइल। लो-फाई वेस एंडरसन +1 सार्टोरियल के बा। कार्लेस गैर सौंदर्य व्यायाम क्विस जेंट्रिफाई के बा। ब्रुकलिन adipisicing शिल्प बियर वाइस केतार deserunt के बा।

एगो

ओकेकैट कमोडो एलिक्वा डेलेक्टस के नाम से जानल जाला। फैप शिल्प बियर deserunt स्केटबोर्ड ईए के बा। लोमो साइकिल अधिकार adipisicing बान्ह मी, वेलिट ईए सुंट अगिला स्तर लोकावोरे एकल-मूल कॉफी में मैग्ना वेनियम। उच्च जीवन आईडी विनाइल, इको पार्क consequat quis aliquip बान्ह मी पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिंग के बा। Consectetur nisi DIY न्यूनतम दूत बैग बा। में क्रेडिट पूर्व, टिकाऊ delectus consectetur फैनी पैक आईफोन बा।

दु

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.

केतार ट्वी ब्लॉग, कुलपा दूत बैग मारफा जवन भी डेलेक्टस फूड ट्रक। सपिएंटे सिंथ आईडी असुमेंडा के बा। Locavore sed helvetica क्लिच विडंबना, थंडरकैट्स रउआ शायद ओह लोग के बारे में नइखीं सुनले consequat हुडी लस मुक्त लो-फाई फैप aliquip। Labore कुलीन placeat से पहिले कि उ लोग बिक गईल, टेरी रिचर्डसन proident ब्रंच nesciunt quis cosby स्वेटर pariatur keffiyeh उत helvetica कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

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

  1. <शरीर डेटा-जासूस = "स्क्रॉल" डेटा-लक्ष्य = ".नवबार" > ... </body>

जावास्क्रिप्ट के माध्यम से कइल जाला

जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पाई के कॉल करीं:

  1. $ ( '#नवबार' ) के रूप में दिहल गइल बा। स्क्रॉलस्पाई () के बा।
हेड अप हो गइल बा! नवबार लिंक में हल करे लायक आईडी टारगेट होखे के चाहीं. जइसे कि एगो <a href="#home">home</a>डोम में कुछ चीज से मेल खाए के चाहीं जइसे कि <div id="home"></div>.

विधियन के बारे में बतावल गइल बा

.scrollspy ('ताजा') के बा।

जब DOM से तत्व जोड़ल भा हटावे के संगे scrollspy के इस्तेमाल कइल जाला, त रउआँ के रिफ्रेश तरीका के अइसे कॉल करे के पड़ी:

  1. $ ( '[डेटा-जासूस = "स्क्रॉल"]' ). हर ( फंक्शन () { के बा।  
  2.   var $ जासूस = $ ( ई ) बा। scrollspy ( 'ताजा' ) के बारे में जानकारी दिहल गइल बा।
  3. }) के बा;

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-offset=""।

नांव किसिम बाकी बिबरन
ऑफसेट हो गइल बा संख्या 10 के बा स्क्रॉल के स्थिति के गणना करत घरी ऊपर से ऑफसेट करे खातिर पिक्सेल।

घटनाक्रम के बारे में बतावल गइल बा

कार्यक्रम बिबरन
सक्रिय हो जाला ई इवेंट तब फायर हो जाला जब भी स्क्रॉलस्पी द्वारा कवनो नया आइटम सक्रिय हो जाला।

टॉगल करे लायक टैब bootstrap-tab.js बा

उदाहरण के टैब बा

स्थानीय सामग्री के फलक के माध्यम से ट्रांजिटन में त्वरित, गतिशील टैब कार्यक्षमता जोड़ीं, उहो ड्रॉपडाउन मेनू के माध्यम से।

कच्चा डेनिम रउआ शायद इनका बारे में ना सुनले होखब जीन शॉर्ट्स ऑस्टिन। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। Reprehenderit कसाई रेट्रो केफियेह ड्रीमकैचर सिंथ के बा। कॉस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। एलिक्विप प्लेसेट साल्विया सिलम आईफोन के बा। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई voluptate निसी क्वी।

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.

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से टैब करे लायक टैब के सक्षम करीं (हर टैब के अलग-अलग सक्रिय करे के जरूरत बा):

  1. $ ( '# माईटैब ए' ) के बा। क्लिक करीं ( फंक्शन ( ई ) { .  
  2.   ई बा . रोके के डिफ़ॉल्ट ();
  3.   $ ( ई ) के बा। टैब ( 'देखावल' );
  4. }) के बा।

रउआँ कई तरीका से अलग-अलग टैब सभ के सक्रिय क सकत बानी:

  1. $ ( '#myTab एगो [href="#प्रोफाइल"]' )। टैब ( 'देखावल' ); // नाम से टैब चुनें 
  2. $ ( '# myTab एगो: पहिला' ). टैब ( 'देखावल' ); // पहिला टैब के चयन करीं 
  3. $ ( '# myTab एगो: अंतिम' ). टैब ( 'देखावल' ); // अंतिम टैब के चयन करीं 
  4. $ ( '# माईटैब ली: समीकरण (2) ए' )। टैब ( 'देखावल' ); // तीसरा टैब (0-अनुक्रमित) चुनें।

मार्कअप कइल गइल बा

रउआँ बिना कवनो जावास्क्रिप्ट लिखले टैब भा गोली नेविगेशन के सक्रिय क सकत बानी खाली निर्दिष्ट क के data-toggle="tab"भा data-toggle="pill"कवनो तत्व पर। navटैब में आ nav-tabsक्लास जोड़ला से ulबूटस्ट्रैप टैब स्टाइलिंग लागू हो जाई।

  1. <ul class = "नव नव-टैब" > बा 
  2.   <li><a href = "#घर" डेटा-टॉगल = "टैब" > घर </a></li>  
  3.   <li><a href = "#प्रोफाइल" डेटा-टॉगल = "टैब" > प्रोफाइल </a></li>  
  4.   <li><a href = "#संदेश" डेटा-टॉगल = "टैब" > संदेश </a></li>  
  5.   <li><a href = "#सेटिंग्स" डेटा-टॉगल = "टैब" > सेटिंग्स </a></li>  
  6. </ul> के बा

विधियन के बारे में बतावल गइल बा

$ ().टैब के बा

एगो टैब तत्व आ सामग्री कंटेनर के सक्रिय करेला। टैब में या त एगो data-targetया hrefएगो कंटेनर नोड के लक्ष्य बनावे वाला DOM में होखे के चाहीं।

  1. <ul वर्ग = "नव नव-टैब" आईडी = "माईटैब" >  
  2.   <li class = "सक्रिय" ><a href = "#घर" > घर </a></li>  
  3.   <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> बा 
  4.   <li><a href = "#messages" > संदेश </a></li> बा 
  5.   <li><a href = "#सेटिंग्स" > सेटिंग्स </a></li> बा 
  6. </ul> के बा
  7.  
  8. <div वर्ग = "टैब-सामग्री" > बा 
  9.   <div class = "टैब-पेन सक्रिय" आईडी = "घर" > ... </div>  
  10.   <div class = "टैब-पेन" id = "प्रोफाइल" > ... </div> बा  
  11.   <div class = "टैब-पेन" id = "संदेश" > ... </div>  
  12.   <div क्लास = "टैब-पेन" आईडी = "सेटिंग्स" > ... </div>  
  13. </div> के बा
  14.  
  15. <स्क्रिप्ट> के बा
  16.   $ ( फंक्शन () के बा { .  
  17.     $ ( '# myTab एगो: अंतिम' ). टैब ( 'देखावल' );
  18.   }) के बा।
  19. </script> के बा

घटनाक्रम के बारे में बतावल गइल बा

कार्यक्रम बिबरन
देखायीं ई इवेंट टैब शो पर फायर होला, बाकिर नया टैब देखावे से पहिले. सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget
देखावल गइल बा ई इवेंट टैब देखावे के बाद टैब शो पर फायर हो जाला। सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget 
  1. $ ( 'ए [डेटा-टॉगल = "टैब"]' ) के बा। पर ( 'देखावल गइल' , फंक्शन ( ई ) {   
  2.   ई बा . लक्ष्य // सक्रिय कइल गइल टैब
  3.   ई बा . relatedTarget // पिछला टैब के बा
  4. }) के बा।

टूलटिप्स बूटस्ट्रैप-टूलटिप.जेएस के बा

उदाहरण खातिर दिहल गइल बा

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

टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:

टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वास्तव में विडंबनापूर्ण कारीगर जवन भी keytar , scenester खेत-से-मेज banksy ऑस्टिन ट्विटर संभाल freegan cred कच्चा डेनिम एकल-मूल कॉफी वायरल।

चार गो दिशा-निर्देश बा

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:

  1. $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। टूलटिप ( विकल्प ) के बा .

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

नांव किसिम बाकी बिबरन
एनीमेशन के बारे में बतावल गइल बा बूलियन के बा सच टूलटिप पर एगो css फेड संक्रमण लागू करीं
एचटीएमएल के बा बूलियन के बा सच टूलटिप में html डालल जाला। अगर गलत बा त jquery के textतरीका के इस्तेमाल डोम में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा स्ट्रिंग|फंक्शन के बा 'ऊपर' टूलटिप के स्थिति कईसे कईल जाला - ऊपर | नीचे के बा | छोड़ के बा | ठीक
चयनकर्ता के बा डोरी गलत अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई।
हक तार के बा | परोजन '' के बा। डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` टैग मौजूद नइखे
ट्रिगर डोरी 'होवर' करे के बा। टूलटिप कइसे ट्रिगर होला - पर क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल
देरी नंबर के बा | वस्तु 0 के बा

टूलटिप (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला

अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला

वस्तु संरचना के बारे में बतावल गइल बा:delay: { show: 500, hide: 100 }
हेड अप हो गइल बा! अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला।

मार्कअप कइल गइल बा

प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआई ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।

  1. <a href = "#" rel = "टूलटिप" title = "पहिलका टूलटिप" > हमरा पर मंडराई </a>

विधियन के बारे में बतावल गइल बा

$ ().टूलटिप (विकल्प) के बा।

एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।

.टूलटिप ('देखावे के') बा।

कवनो तत्व के टूलटिप के खुलासा करेला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'देखाईं' ) के बा।

.tooltip('छुपावे') के बा।

कवनो तत्व के टूलटिप के छिपा देला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'छुपा के' ) के बा।

.टूलटिप ('टॉगल') के बा।

कवनो तत्व के टूलटिप के टॉगल करेला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'टॉगल' ) के बा।

.tooltip('नष्ट') के बा।

कवनो तत्व के टूलटिप के छिपा के नष्ट कर देला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'नष्ट' ) के बा।

पोपोवर्स बूटस्ट्रैप-पोपोवर.जेएस के बा

उदाहरण खातिर दिहल गइल बा

द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा। पॉपओवर के ट्रिगर करे खातिर बटन के ऊपर माउस करीं। टूलटिप के शामिल करे के जरूरत बा ।

स्थिर पोपोवर के बा

चार गो विकल्प उपलब्ध बा: ऊपर, दाहिना, नीचे, आ बाएँ संरेखित।

पोपोवर टॉप के बा

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर सही बा

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर नीचे के बा

लोबोर्टिस पर सेड पोसुएरे कॉ���्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

पोपोवर चल गइलन

लोबोर्टिस पर सेड पोसुएरे कॉन्सेक्टेचर एस्ट। एनियन ईयू लियो क्वाम के बा। पेलेंटेस्क ऑर्नरे सेम लैसिनिया क्वाम वेनेनेटिस वेस्टिबुलम के बा।

dataजावास्क्रिप्ट आ कौनों एट्रिब्यूट के भीतर सामग्री से पॉपओवर के रूप में देखावल गइल कौनों मार्कअप ना पैदा कइल जाला।

लाइव डेमो बा

पॉपओवर टॉगल करे खातिर क्लिक करीं

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:

  1. $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। पोपोवर ( विकल्प ) के बा .

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-animation=""।

नांव किसिम बाकी बिबरन
एनीमेशन के बारे में बतावल गइल बा बूलियन के बा सच टूलटिप पर एगो css फेड संक्रमण लागू करीं
एचटीएमएल के बा बूलियन के बा सच पोपोवर में html डालल जाला। अगर गलत बा त jquery के textतरीका के इस्तेमाल डोम में सामग्री डाले खातिर कइल जाई। अगर रउरा एक्सएसएस हमला से चिंतित बानी त पाठ के इस्तेमाल करीं.
प्लेसमेंट के बा स्ट्रिंग|फंक्शन के बा 'ठीक' पोपोवर के पोजीशन कईसे कईल जाला - टॉप | नीचे के बा | छोड़ के बा | ठीक
चयनकर्ता के बा डोरी गलत अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई
ट्रिगर डोरी 'क्लिक करे' के बा। कइसे पोपोवर ट्रिगर होला - क्लिक करीं | होवर करे के बा | फोकस करे के बा | हाथ से कईल
हक तार के बा | परोजन '' के बा। डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` विशेषता मौजूद नइखे
सामग्री तार के बा | परोजन '' के बा। डिफ़ॉल्ट सामग्री मान अगर `data-content` विशेषता मौजूद नइखे
देरी नंबर के बा | वस्तु 0 के बा

पोपोवर (ms) देखावे आ छिपावे में देरी - मैनुअल ट्रिगर प्रकार पर लागू ना होला

अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला

वस्तु संरचना के बारे में बतावल गइल बा:delay: { show: 500, hide: 100 }
हेड अप हो गइल बा! अलग-अलग पॉपओवर सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला।

मार्कअप कइल गइल बा

प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआई ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।

विधियन के बारे में बतावल गइल बा

$ ().popover (विकल्प) के बा।

एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।

.popover('देखावे') के बा।

एगो तत्वन के पोपोवर के खुलासा करेला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'देखावे' ) के बा।

.popover('छुपावे के') के बा।

एगो तत्वन के पोपोवर के छिपा देला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'छुपा के' ) के बा।

.popover('टॉगल') के बा।

एगो तत्व पॉपओवर के टॉगल करेला।

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'टॉगल' ) के बा।

.popover('नष्ट') के बा।

कवनो तत्व के पोपोवर के छिपा के नष्ट कर देला.

  1. $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'नष्ट' ) के बा।

अलर्ट संदेश bootstrap-alert.js बा

उदाहरण के अलर्ट बा

एह प्लगइन के साथ सभ अलर्ज संदेश सभ में डिस्मिस कार्यक्षमता जोड़ीं।

पवित्र ग्वाकामोल के बा! बेस्ट चेक यो सेल्फ, रउरा बहुते बढ़िया नइखीं लागत.

ओह स्नैप के बा! रउरा त एगो त्रुटि मिलल बा!

ई आ ऊ बदल के फेर से कोशिश करीं. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कॉन्सेक्टेटर पुरस बइठल अमेट फर्मेन्टम।

ई कार्रवाई करीं भा ई काम करीं

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से अलर्ट के खारिज करे के सक्षम करीं:

  1. $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट () के बा।

मार्कअप कइल गइल बा

बस data-dismiss="alert"अपना बंद बटन में जोड़ दीं जेहसे कि स्वचालित रूप से अलर्ट बंद कार्यक्षमता मिल सके.

  1. <a class = "बंद करीं" data-dismiss = "सचेतक" href = "#" > × </a> के बा

विधियन के बारे में बतावल गइल बा

$ ().अलर्ट () के बा।

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

.alert('बंद करीं') के बा।

एगो अलर्ट बंद कर देला.

  1. $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट ( 'बंद करीं' ) के बा।

घटनाक्रम के बारे में बतावल गइल बा

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

कार्यक्रम बिबरन
बंद करीं closeइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
बंद हो गइल ई इवेंट तब फायर कइल जाला जब अलर्ट बंद हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। 
  1. $ ( '#हमार-सचेतक' ). बाइंड ( 'बंद' , फंक्शन () { 1।   
  2.   // कुछ करे के बा...
  3. }) के बा।

बटन बूटस्ट्रैप-बटन.जेएस के बा

उदाहरण के प्रयोग कइल जाला

बटन के साथे अउरी काम करीं। कंट्रोल बटन स्टेट करे ला या टूलबार नियर अउरी कंपोनेंट सभ खातिर बटन सभ के समूह बनावे ला।

स्टेटफुल के बा

बटन पर लोडिंग स्टेट के इस्तेमाल करे खातिर data-loading-text="लोड हो रहल बा..." जोड़ीं।

  1. <button type = "button" class = "btn btn-primary" data-loading-text = "लोड हो रहल बा..." > लोड हो रहल बा </button>

एकल टॉगल कइल जाला

एकही बटन पर टॉगलिंग के सक्रिय करे खातिर data-toggle="button" जोड़ीं।

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

चेकबॉक्स के बा

btn-group पर चेकबॉक्स शैली टॉगलिंग खातिर data-toggle="buttons-checkbox" जोड़ीं।

  1. <div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  2.   <बटन प्रकार = "बटन" वर्ग = "btn" > बाईं ओर </बटन>  
  3.   <बटन प्रकार = "बटन" वर्ग = "btn" > बीच </बटन>  
  4.   <बटन प्रकार = "बटन" वर्ग = "btn" > दाहिना </बटन>  
  5. </div> के बा

रेडियो पर बा

btn-group पर रेडियो स्टाइल टॉगलिंग खातिर data-toggle="buttons-radio" जोड़ीं।

  1. <div वर्ग = "बीटीएन-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  2.   <बटन प्रकार = "बटन" वर्ग = "btn" > बाईं ओर </बटन>  
  3.   <बटन प्रकार = "बटन" वर्ग = "btn" > बीच </बटन>  
  4.   <बटन प्रकार = "बटन" वर्ग = "btn" > दाहिना </बटन>  
  5. </div> के बा

प्रयोग के बारे में बतावल गइल बा

जावास्क्रिप्ट के माध्यम से बटन सक्षम करीं:

  1. $ ( '.नव-टैब' ) के बा। बटन () के बा।

मार्कअप कइल गइल बा

डेटा एट्रिब्यूट बटन प्लगइन के अभिन्न अंग होला। बिबिध मार्कअप प्रकार सभ खातिर नीचे दिहल उदाहरण कोड देखल जाय।

विकल्प बा

कवनो ना

विधियन के बारे में बतावल गइल बा

$ (). बटन ('टॉगल') के बा।

पुश स्टेट के टॉगल करेला। बटन के अइसन रूप देला कि ऊ सक्रिय हो गइल बा.

हेड अप हो गइल बा! रउआँ कौनों बटन के ऑटो टॉगलिंग के data-toggleएट्रिब्यूट के इस्तेमाल से सक्षम क सकत बानी। 
  1. <बटन प्रकार = "बटन" वर्ग = "btn" डेटा-टॉगल = "बटन" > ... </बटन>

$ (). बटन ('लोड हो रहल बा')

बटन स्टेट लोडिंग पर सेट करे ला - बटन के अक्षम करे ला आ टेक्स्ट के लोडिंग टेक्स्ट के स्वैप करे ला। डेटा एट्रिब्यूट के उपयोग करके बटन तत्व पर लोडिंग टेक्स्ट के परिभाषित करे के चाहीं data-loading-text.

  1. <बटन प्रकार = "बटन" वर्ग = "बीटीएन" डेटा-लोडिंग-टेक्स्ट = "सामान लोड हो रहल बा..." > ... </बटन>
हेड अप हो गइल बा! फायरफॉक्स पन्ना लोड के पार अक्षम स्थिति के कायम रखेला . एकरा खातिर एगो वर्कअराउंड बा कि इस्तेमाल कइल जाव autocomplete="off".

$ (). बटन ('रीसेट') के बा।

बटन के स्थिति रीसेट करे ला - पाठ के मूल पाठ में अदला-बदली करे ला।

$ (). बटन (स्ट्रिंग) के बा।

बटन स्टेट रीसेट करे ला - टेक्स्ट के कौनों भी डेटा परिभाषित टेक्स्ट स्टेट में स्वैप करे ला।

  1. <बटन प्रकार = "बटन" वर्ग = "बीटीएन" डेटा-पूरा-पाठ = "समाप्त हो गइल!" > ... </बटन> के बा    
  2. <स्क्रिप्ट> के बा
  3.   $ ( '.btn' ) के बा। बटन ( 'पूरा हो गइल' ) .
  4. </script> के बा

bootstrap- collapse.js के संकुचित करीं

बारे में

अकॉर्डियन आ नेविगेशन जइसन संकुचित घटक खातिर बेस स्टाइल आ लचीला समर्थन पाईं.

* संक्रमण प्लगइन के शामिल करे के जरूरत बा।

उदाहरण खातिर अकॉर्डियन के

संकुचन प्लगइन के इस्तेमाल से हमनी के एगो साधारण अकॉर्डियन स्टाइल विजेट बनवनी जा:

संकुचित समूह आइटम #1 के बा
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
संकुचित समूह आइटम # 2 के बा
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
संकुचित समूह आइटम #3 के बा
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस। 
  1. <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-खतरा" डेटा-टॉगल = "ढह" डेटा-लक्ष्य = "# डेमो" >    
  2.   सरल ढहने लायक बा
  3. </बटन> के बा
  4.  
  5. <div id = "डेमो" क्लास = "में ढह जाईं" > ... </div>

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

बस एगो संकुचित तत्व के नियंत्रण स्वचालित रूप से असाइन करे खातिर तत्व के जोड़ल data-toggle="collapse"आ एगो के। data-targetएट्रिब्यूट एगो css चयनकर्ता के स्वीकार करे ला जेकरा data-targetपर कोलैप्स लागू कइल जा सके ला। collapseसंकुचित तत्व में क्लास के जरूर जोड़ल जाला । अगर रउआँ चाहत बानी कि ई डिफ़ॉल्ट रूप से खुलल होखे, त अतिरिक्त क्लास जोड़ीं in।

अकॉर्डियन नियर समूह प्रबंधन के संकुचित नियंत्रण में जोड़े खातिर, डेटा विशेषता जोड़ीं data-parent="#selector"। एकरा के एक्शन में देखे खातिर डेमो के देखल जाव.

जावास्क्रिप्ट के माध्यम से कइल जाला

के साथ मैन्युअल रूप से सक्षम करीं:

  1. $ ( ".संकुचित हो गइल" )। ढह गइल बा () .

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-parent=""।

नांव किसिम बाकी बिबरन
माता-पिता के बा चयनकर्ता के बा गलत अगर चयनकर्ता तब निर्दिष्ट पैरेंट के तहत सभ संकुचित तत्व बंद हो जाई जब ई संकुचित आइटम देखावल जाई। (पारंपरिक अकॉर्डियन व्यवहार के समान)
टॉगल कइल जाला बूलियन के बा सच आह्वान पर संकुचित तत्व के टॉगल करेला

विधियन के बारे में बतावल गइल बा

.collapse(विकल्प) के बा।

रउरा सामग्री के एगो संकुचित तत्व के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object.

  1. $ ( '# हमारसंकुचित करे लायक' ). ढह गइल बा ({
  2.   टॉगल : गलत बा 
  3. }) के बा।

.collapse('टॉगल') के बा।

कवनो संकुचित तत्व के देखावल भा छिपावे खातिर टॉगल करे ला।

.collapse('देखावे') के बा।

एगो संकुचित तत्व देखावेला।

.collapse('छुपावे') के बा।

एगो संकुचित तत्व के छिपावेला।

घटनाक्रम के बारे में बतावल गइल बा

बूटस्ट्रैप के कोलैप्स क्लास कोलैप्स फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।

कार्यक्रम बिबरन
देखायीं showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला।
देखावल गइल बा ई इवेंट तब फायर कइल जाला जब कौनों संकुचन तत्व के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)।
लुकाइल ई इवेंट तुरंत फायर हो जाला जब hideमेथड बोलावल जाला।
छिपल ई घटना तब फायर कइल जाला जब प्रयोगकर्ता से कौनों संकुचन तत्व छिपा दिहल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। 
  1. $ ( '# हमारसंकुचित करे लायक' ). पर ( 'छुपल' , फंक्शन () { 1।   
  2.   // कुछ करे के बा...
  3. }) के बा।

टाइपएहेड बूटस्ट्रैप-टाइपहेड.जेएस के बा

उदाहरण

कवनो भी फॉर्म टेक्स्ट इनपुट के साथ जल्दी से सुरुचिपूर्ण टाइपहेड बनावे खातिर एगो बेसिक, आसानी से बढ़ावल प्लगइन।

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

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

ऊपर दिहल उदाहरण में देखावल गइल तरीका से टाइपएहेड फंक्शनलिटी वाला तत्व के रजिस्टर करे खातिर डेटा एट्रिब्यूट जोड़ीं।

जावास्क्रिप्ट के माध्यम से कइल जाला

टाइपएहेड के मैन्युअल रूप से कॉल करीं:

  1. $ ( '.टाइपएहेड' ) के रूप में दिहल गइल बा। टाइपएहेड () के बा।

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-source=""।

नांव किसिम बाकी बिबरन
स्रोत सरणी, फंक्शन के बा [ ] के बा। के खिलाफ पूछताछ करे खातिर डेटा स्रोत। स्ट्रिंग सभ के सरणी हो सके ला या फिर कौनों फंक्शन हो सके ला। फंक्शन के दू गो आर्गुमेंट पास कइल जाला, queryइनपुट फील्ड में मान आ processकॉलबैक। processकॉलबैक के सिंगल आर्गुमेंट के माध्यम से सीधे या एसिंक्रोनस तरीका से डेटा स्रोत के वापस क के फंक्शन के सिंक्रनाइज़ तरीका से इस्तेमाल कइल जा सके ला ।
वस्तू संख्या 8 के बा ड्रॉपडाउन में प्रदर्शित करे खातिर आइटम के अधिकतम संख्या।
मिनट के लंबाई के बा संख्या 1 के बा ऑटोकम्पलीट सुझाव के ट्रिगर करे से पहिले जवन न्यूनतम वर्ण लंबाई के जरूरत होखे
मिलान करे वाला के बा परोजन केस के संवेदनहीन होखे के चाहीं ई पता लगावे खातिर इस्तेमाल होखे वाला तरीका कि कौनों क्वेरी कौनों आइटम से मेल खात बा कि ना। एकल तर्क स्वीकार करेला, itemजवना के खिलाफ क्वेरी के परीक्षण कइल जाव। के साथ वर्तमान क्वेरी तक पहुँचीं this.query। trueअगर क्वेरी मिलान होखे त एगो बूलियन वापस करीं ।
सॉर्टर के बा परोजन सटीक मिलान,
केस संवेदनशील,
केस असंवेदनशील		 ऑटोकम्पलीट रिजल्ट के सॉर्ट करे खातिर इस्तेमाल होखे वाला तरीका। एकल तर्क स्वीकार करे ला itemsआ टाइपएहेड इंस्टेंस के दायरा होला। वर्तमान क्वेरी के संदर्भित करीं this.query.
हाइलाइटर के बा परोजन सभ डिफ़ॉल्ट मिलान के हाइलाइट करेला ऑटोकम्पलीट रिजल्ट के उजागर करे खातिर इस्तेमाल कइल गइल तरीका। एकल तर्क स्वीकार करे ला itemआ टाइपएहेड इंस्टेंस के दायरा होला। एचटीएमएल वापस करे के चाहीं।

विधियन के बारे में बतावल गइल बा

.typeahead(विकल्प) के बा।

टाइपएहेड के साथ कवनो इनपुट के इनिशियलाइज करेला।

bootstrap -affix.js के संलग्न करीं

उदाहरण

बाईं ओर के सबनेविगेशन एफिक्स प्लगइन के लाइव डेमो हवे।

प्रयोग के बारे में बतावल गइल बा

डेटा विशेषता के माध्यम से कइल जाला

कवनो तत्व में आसानी से एफिक्स व्यवहार जोड़ल data-spy="affix"जाव त बस ओह तत्व में जोड़ दीं जवना के रउरा जासूसी कइल चाहत बानी. एकरे बाद ऑफसेट सभ के इस्तेमाल ई परिभाषित करे खातिर करीं कि कब कौनों तत्व के पिनिंग के चालू आ बंद करे के बा।

  1. <div डेटा-जासूस = "संलग्न" डेटा-ऑफसेट-टॉप = "200" > ... </body>
हेड अप हो गइल बा! पिन कइल तत्व के स्थिति के प्रबंधन कइल रउरा पर बा. ई स्टाइलिंग करके कइल जाला affix, affix-top, आ affix-bottom.

जावास्क्रिप्ट के माध्यम से कइल जाला

जावास्क्रिप्ट के माध्यम से एफिक्स प्लगइन के कॉल करीं:

  1. $ ( '#नवबार' ) के रूप में दिहल गइल बा। चिपकावे के बा () .

विधियन के बारे में बतावल गइल बा

.affix('ताजा') के बा।

जब DOM से तत्व जोड़ल भा हटावे के संगे affix के इस्तेमाल कइल जाला, त रउआँ रिफ्रेश तरीका के कॉल कइल चाहब:

  1. $ ( '[डेटा-जासूस = "प्रत्यय"]' ). हर ( फंक्शन () { के बा।  
  2.   $ ( ई ) के बा। affix ( 'ताजा' करे के बा )
  3. }) के बा;

विकल्प बा

विकल्प सभ के डेटा एट्रिब्यूट भा जावास्क्रिप्ट के माध्यम से पास कइल जा सके ला। डेटा विशेषता खातिर, विकल्प के नाम के , में जोड़ल जाला data-, जइसे कि में data-offset-top="200"।

नांव किसिम बाकी बिबरन
ऑफसेट हो गइल बा नंबर के बा | फंक्शन के बा | वस्तु 10 के बा स्क्रॉल के स्थिति के गणना करत घरी स्क्रीन से ऑफसेट करे खातिर पिक्सेल। अगर कवनो एक नंबर दिहल जाव त ऑफसेट ऊपर आ बाएँ दुनु दिशा में लागू हो जाई. एकल दिशा खातिर सुने खातिर, या कई गो अद्वितीय ऑफसेट, बस एगो वस्तु उपलब्ध करावल गइल offset: { x: 10 }. जब रउआँ के डायनामिक रूप से ऑफसेट देवे के जरूरत होखे तब कौनों फंक्शन के इस्तेमाल करीं (कुछ रिस्पांसिव डिजाइन सभ खातिर उपयोगी)।