बूटस्ट्रैप

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

बूटस्ट्रैप के घटकों को जीवंत करें—अब 12 कस्टम jQuery प्लगइन्स के साथ।

jQuery प्लगइन्स एक दर्जन बूटस्ट्रैप प्लगइन्स आपको आरंभ करने के लिए

सचेत! सभी जावास्क्रिप्ट प्लगइन्स को jQuery के नवीनतम संस्करण की आवश्यकता होती है।

मॉडल बूटस्ट्रैप- 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 = "मोडल" id = "myModal" >  
  2.   <div क्लास = "मोडल-हेडर" > 
  3.     <a class = "करीब" डेटा-खारिज = "मोडल" > × </a>  
  4.     <h3> मोडल हैडर </h3>
  5.   </div>
  6.   <div class = "मोडल-बॉडी" > 
  7.     <p> एक अच्छा शरीर... </p>
  8.   </div>
  9.   <div class = "मोडल-फ़ुटर" > 
  10.     <a href = "#" वर्ग = "btn" > बंद करें </a>  
  11.     <a href = "#" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > परिवर्तन सहेजें </a>  
  12.   </div>
  13. </div>
सचेत! यदि आप चाहते हैं कि आपका मोडल अंदर और बाहर चेतन हो, तो बस तत्व .fadeमें एक वर्ग जोड़ें .modal(इसे क्रिया में देखने के लिए डेमो देखें) और बूटस्ट्रैप-ट्रांज़िशन.जेएस शामिल करें।

तरीकों

.मोडल (विकल्प)

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

  1. $ ( '#myModal' )। मोडल ({
  2.   कीबोर्ड : झूठा 
  3. })

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

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

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

.मोडल ('शो')

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

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

.मोडल ('छिपाएं')

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

  1. $ ( '#myModal' )। मोडल ( 'छिपाएं' )

आयोजन

बूटस्ट्रैप का मोडल क्लास मोडल कार्यक्षमता में शामिल होने के लिए कुछ घटनाओं को उजागर करता है।

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

स्क्रॉलस्पाई बूटस्ट्रैप-scrollspy.js

स्क्रॉलस्पी प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से एनएवी लक्ष्यों को अपडेट करने के लिए है।

फ़ाइल डाउनलोड करें

स्क्रॉलस्पाई के साथ उदाहरण नेवबार

नीचे दिए गए क्षेत्र को स्क्रॉल करें और नेविगेशन अपडेट देखें। ड्रॉपडाउन उप आइटम भी हाइलाइट किए जाएंगे। इसे अजमाएं!

@मोटा

एड लेगिंग कीटार, ब्रंच आईडी आर्ट पार्टी डोलर लेबर। पिचफोर्क यर एनिम लो-फाई इससे पहले कि वे क्यूई बिक गए। टम्बलर फार्म-टू-टेबल साइकिल अधिकार जो भी हो। एनिम केफियेह कार्ल्स कार्डिगन। वेलिट सीतान मैकस्वीनी का फोटो बूथ 3 वुल्फ मून इररे. कॉस्बी स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हूडि मिनिम क्यूई आपने शायद उनके बारे में नहीं सुना होगा और कार्डिगन ट्रस्ट फंड अपराधी बायोडीजल वेस एंडरसन एस्थेटिक। निहिल ने टैटू गुदवाया आरोप, क्रेडिट विडंबना बायोडीजल केफियेह कारीगर उलमको परिणाम।

@mdo

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

एक

ओसीकैट कमोडो एलिका डेलेक्टस। फैप क्राफ्ट बियर डेज़रुंट स्केटबोर्ड ईए। लोमो साइकिल राइट्स एडिपिसिसिंग बन मील, वेलिट ईए सनट नेक्स्ट लेवल लोकावोर सिंगल-ओरिजिन कॉफी इन मैग्ना वेनियम। हाई लाइफ आईडी विनाइल, इको पार्क कॉन्सेक्वेट क्विस एलिक्विप बन मील पिचफोर्क। वेरो वीएचएस एस्ट एडिपिसिसिंग। कॉन्सेक्टेटूर निसी 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 ब्लॉग, culpa मैसेंजर बैग मारफा जो भी डेलेक्टस फूड ट्रक है। Sapiente synth id ग्रहण. लोकावोर सेड हेल्वेटिका क्लिच विडंबना, थंडरकैट्स जो आपने शायद उनके बारे में नहीं सुना है, परिणामस्वरूप हूडि ग्लूटेन-फ्री लो-फाई फैप एलिक्विप। लैबोरे एलीट प्लेसैट से पहले वे बिक गए, टेरी रिचर्डसन प्रॉडेंट ब्रंच नेस्क्यूंट क्विस कॉस्बी स्वेटर परियातुर केफियेह यूट हेल्वेटिका कारीगर। कार्डिगन क्राफ्ट बीयर सीटन रेडीमेड वेलिट। वीएचएस चेम्ब्रे लेबरिस टेम्पोर वेनिअम। एनिम मोलिट मिनिम कमोडो उलमको थंडरकैट्स।

बूटस्ट्रैप-scrollspy.js . का उपयोग करना

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

  1. $ ( '# नावबार' )। स्क्रोलस्पाई ()

मार्कअप

अपने टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ने data-spy="scroll"के लिए, बस उस तत्व में जोड़ें जिसे आप जासूसी करना चाहते हैं (आमतौर पर यह शरीर होगा)।

  1. <बॉडी डेटा-स्पाई = "स्क्रॉल" > ... </body>
सचेत! नेवबार लिंक में समाधान योग्य आईडी लक्ष्य होने चाहिए। उदाहरण के लिए, <a href="#home">home</a>डोम में किसी चीज़ के अनुरूप होना चाहिए जैसे <div id="home"></div>.

विकल्प

नाम प्रकार चूक विवरण
ओफ़्सेट संख्या 10 स्क्रॉल की स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिए पिक्सेल।

टॉगल करने योग्य टैब बूटस्ट्रैप-टैब.जेएस

यह प्लगइन स्थानीय सामग्री के माध्यम से संक्रमण के लिए त्वरित, गतिशील टैब और गोली कार्यक्षमता जोड़ता है।

फ़ाइल डाउनलोड करें

उदाहरण टैब

छिपे हुए पैन के बीच टॉगल करने के लिए नीचे दिए गए टैब पर क्लिक करें, यहां तक ​​कि ड्रॉपडाउन मेनू के माध्यम से भी।

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

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. $ ( '#myTab' )। टैब ( 'शो' )

मार्कअप

data-toggle="tab"आप किसी भी जावास्क्रिप्ट को केवल निर्दिष्ट करके या data-toggle="pill"किसी तत्व पर लिखे बिना टैब या गोली नेविगेशन को सक्रिय कर सकते हैं ।

  1. <ul class = "नेव नेवी-टैब" > 
  2.   <li><a href = "#home" data-toggle = "tab" > होम </a></li>  
  3.   <li><a href = "#profile" data-toggle = "tab" > Profile </a></li>  
  4.   <li><a href = "#messages" data-toggle = "tab" > संदेश </a></li>  
  5.   <li><a href = "#settings" data-toggle = "tab" > सेटिंग्स </a></li>  
  6. </ul>

तरीकों

$().टैब

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

  1. <ul class = "नेव नेवी-टैब" > 
  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 = "tab-pane active" id = "home" > ... </div>  
  10.   <div class = "tab-pane" id = "profile" > ... </div>  
  11.   <div class = "tab-pane" id = "messages" > ... </div>  
  12.   <div class = "tab-pane" id = "सेटिंग" > ... </div>  
  13. </div>
  14.  
  15. <स्क्रिप्ट>
  16.   $ ( फ़ंक्शन () {  
  17.     $ ( '.टैब ए: लास्ट' )। टैब ( 'शो' )
  18.   })
  19. </स्क्रिप्ट>

आयोजन

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

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

टूलटिप्स के बारे में

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

फ़ाइल डाउनलोड करें

टूलटिप्स का उदाहरण उपयोग

टूलटिप्स देखने के लिए नीचे दिए गए लिंक पर होवर करें:

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

बूटस्ट्रैप-टूलटिप.जेएस का उपयोग करना

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

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

विकल्प

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

टूलटिप को दिखाने और छिपाने में देरी (ms)

यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है

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

मार्कअप

प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट इन हैं। यदि आप उनका उपयोग करना चाहते हैं तो बस एक चयनकर्ता विकल्प निर्दिष्ट करें।

  1. <a href = "#" rel = "टूलटिप" शीर्षक = "पहला टूलटिप" > मेरे ऊपर होवर करें </a>

तरीकों

$()। टूलटिप (विकल्प)

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

टूलटिप ('शो')

किसी तत्व के टूलटिप को प्रकट करता है।

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

टूलटिप ('छिपाएं')

किसी तत्व के टूलटिप को छुपाता है।

  1. $ ( '# तत्व' )। टूलटिप ( 'छिपाएं' )

टूलटिप ('टॉगल')

किसी तत्व के टूलटिप को टॉगल करता है।

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

पॉपओवर बूटस्ट्रैप-popover.js

पॉपओवर के बारे में

माध्यमिक जानकारी रखने के लिए किसी भी तत्व में सामग्री के छोटे ओवरले जोड़ें, जैसे कि iPad पर।

* टूलटिप को शामिल करने की आवश्यकता है

फ़ाइल डाउनलोड करें

उदाहरण होवर पॉपओवर

पॉपओवर को ट्रिगर करने के लिए बटन पर होवर करें।

पॉपओवर के लिए मंडराना

बूटस्ट्रैप-पॉपओवर.जेएस का उपयोग करना

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

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

विकल्प

नाम प्रकार चूक विवरण
एनीमेशन बूलियन सच टूलटिप में एक सीएसएस फीका संक्रमण लागू करें
प्लेसमेंट स्ट्रिंग|फ़ंक्शन 'सही' पॉपओवर की स्थिति कैसे बनाएं - शीर्ष | नीचे | बाएं | सही
चयनकर्ता डोरी असत्य यदि कोई चयनकर्ता प्रदान किया जाता है, तो टूलटिप ऑब्जेक्ट निर्दिष्ट लक्ष्यों को सौंपे जाएंगे
चालू कर देना डोरी 'होवर' टूलटिप कैसे ट्रिगर होता है - होवर | फोकस | नियमावली
शीर्षक स्ट्रिंग | समारोह '' डिफ़ॉल्ट शीर्षक मान यदि `शीर्षक` विशेषता मौजूद नहीं है
विषय स्ट्रिंग | समारोह '' डिफ़ॉल्ट सामग्री मान यदि `डेटा-सामग्री` विशेषता मौजूद नहीं है
देरी संख्या | वस्तु 0

पॉपओवर दिखाने और छिपाने में देरी (एमएस)

यदि एक नंबर की आपूर्ति की जाती है, तो देरी को छिपाने/दिखाने दोनों पर लागू किया जाता है

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

मार्कअप

प्रदर्शन कारणों से, टूलटिप और पॉपओवर डेटा-एपिस ऑप्ट इन हैं। यदि आप उनका उपयोग करना चाहते हैं तो बस एक चयनकर्ता विकल्प निर्दिष्ट करें।

तरीकों

$()। पॉपओवर (विकल्प)

तत्व संग्रह के लिए पॉपओवर प्रारंभ करता है।

पॉपओवर ('शो')

एक तत्व पॉपओवर प्रकट करता है।

  1. $ ( '# तत्व' )। पॉपओवर ( 'शो' )

पॉपओवर ('छिपाएं')

एक तत्व पॉपओवर छुपाता है।

  1. $ ( '# तत्व' )। पॉपओवर ( 'छिपाएं' )

पॉपओवर ('टॉगल')

तत्व पॉपओवर को टॉगल करता है।

  1. $ ( '# तत्व' )। पॉपओवर ( 'टॉगल' )

अलर्ट संदेश बूटस्ट्रैप-अलर्ट.जेएस

अलर्ट के बारे में

अलर्ट प्लग इन अलर्ट में करीबी कार्यक्षमता जोड़ने के लिए एक छोटा वर्ग है।

डाउनलोड

उदाहरण अलर्ट

अलर्ट प्लगइन नियमित अलर्ट संदेशों पर काम करता है, और संदेशों को ब्लॉक करता है।

× पवित्र गुआकामोल! सबसे अच्छा यो स्वयं जांचें, आप बहुत अच्छे नहीं दिख रहे हैं।
×

ओह तस्वीर! आपको त्रुटि मिली!

इसे और वह बदलें और पुनः प्रयास करें। ड्यूस मोलिस, इस्ट नॉन कमोडो लक्टस, निसि इरेट पोर्टिटर लिगुला, एगेट लैकिनिया ओडियो सेम नेक एलीट। क्रैस मैटिस कॉन्सेक्टेटुर पुरुस सिट एमेट फेरमेंटम।

यह कार्रवाई करें या यह करो

बूटस्ट्रैप-अलर्ट.जेएस का उपयोग करना

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

  1. $ ( ".अलर्ट" )। चेतावनी ()

मार्कअप

data-dismiss="alert"अलर्ट क्लोज फंक्शनलिटी को स्वचालित रूप से देने के लिए बस अपने क्लोज बटन में जोड़ें ।

  1. <a class = "करीब" डेटा-खारिज = "अलर्ट" href = "#" > × </a>

तरीकों

$ ()। अलर्ट ()

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

.अलर्ट ('करीब')

अलर्ट बंद कर देता है।

  1. $ ( ".अलर्ट" )। चेतावनी ( 'करीब' )

आयोजन

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

आयोजन विवरण
बंद करना closeइंस्टेंस विधि को कॉल करने पर यह घटना तुरंत सक्रिय हो जाती है।
बंद किया हुआ अलर्ट बंद होने पर यह ईवेंट सक्रिय हो जाता है (सीएसएस ट्रांज़िशन पूरा होने की प्रतीक्षा करेगा)। 
  1. $ ( '# my-अलर्ट' )। बाइंड ( 'बंद' , फ़ंक्शन () {   
  2.   // कुछ करो…
  3. })

बटन बूटस्ट्रैप-button.js

के बारे में

बटन के साथ और अधिक करें। नियंत्रण बटन बताता है या टूलबार जैसे अधिक घटकों के लिए बटनों के समूह बनाता है।

फ़ाइल डाउनलोड करें

उदाहरण का उपयोग करता है

राज्यों और टॉगल के लिए बटन प्लगइन का उपयोग करें।

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

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

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

  1. $ ( '.टैब' )। बटन ()

मार्कअप

डेटा विशेषताएँ बटन प्लगइन के अभिन्न अंग हैं। विभिन्न मार्कअप प्रकारों के लिए नीचे दिया गया उदाहरण कोड देखें।

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

तरीकों

$()। बटन ('टॉगल')

पुश स्थिति को टॉगल करता है। बटन को यह आभास देता है कि वह सक्रिय हो गया है।

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

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

बटन स्थिति को लोड करने के लिए सेट करता है - बटन को अक्षम करता है और टेक्स्ट को लोड करने के लिए टेक्स्ट को स्वैप करता है। डेटा विशेषता का उपयोग करके लोड हो रहे टेक्स्ट को बटन तत्व पर परिभाषित किया जाना चाहिए data-loading-text।

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

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

रीसेट बटन की स्थिति - टेक्स्ट को मूल टेक्स्ट में बदल देती है।

$()। बटन (स्ट्रिंग)

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

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

बूटस्ट्रैप को संक्षिप्त करें-collapse.js

के बारे में

संक्षिप्त करने योग्य घटकों जैसे अकॉर्डियन और नेविगेशन के लिए आधार शैलियाँ और लचीला समर्थन प्राप्त करें।

फ़ाइल डाउनलोड करें

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

कोलैप्स प्लगइन का उपयोग करके, हमने एक साधारण अकॉर्डियन स्टाइल विजेट बनाया है:

बंधनेवाला समूह आइटम #1
एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt लेबरम eiusmod। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ई प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।
बंधनेवाला समूह आइटम #2
एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt लेबरम eiusmod। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ई प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।
बंधनेवाला समूह आइटम #3
एनिम परियाटुर क्लिच रिप्रेहेंडरिट, एनिम ईउसमॉड हाई लाइफ एक्यूसामस टेरी रिचर्डसन एड स्क्विड। 3 वुल्फ मून ऑफ़िसिया ऑट, नॉन कपिडैटैट स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक quinoa nesciunt लेबरम eiusmod। ब्रंच 3 वुल्फ मून टेम्पोर, सनट अलीका ने उस पर एक पक्षी डाल दिया स्क्वीड सिंगल-ओरिजिनल कॉफ़ी नाला असेंडा शोरडिच एट। निहिल एनिम केफियेह हेल्वेटिका, क्राफ्ट बियर लेबर वेस एंडरसन क्रेडिट नेस्कियंट सैपिएन्ट ई प्रोडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग्स क्राफ्ट बीयर फार्म-टू-टेबल, रॉ डेनिम एस्थेटिक सिंथेस नेस्कियंट के बारे में आपने शायद नहीं सुना होगा।

बूटस्ट्रैप-collapse.js का उपयोग करना

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

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

विकल्प

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

मार्कअप

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

  1. <बटन वर्ग = "बीटीएन बीटीएन -खतरे" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >   
  2.   सरल बंधनेवाला
  3. </बटन>
  4.  
  5. <div id = "demo" class = "collapse in" > … </div>
सचेत! एक संक्षिप्त नियंत्रण में अकॉर्डियन जैसा समूह प्रबंधन जोड़ने के लिए, डेटा विशेषता जोड़ें data-parent="#selector"। इसे क्रिया में देखने के लिए डेमो देखें।

तरीकों

पतन (विकल्प)

आपकी सामग्री को एक संक्षिप्त करने योग्य तत्व के रूप में सक्रिय करता है। एक वैकल्पिक विकल्प स्वीकार करता है object।

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

पतन ('टॉगल')

एक संक्षिप्त करने योग्य तत्व को दिखाने या छिपाने के लिए टॉगल करता है।

पतन ('दिखाएँ')

एक बंधनेवाला तत्व दिखाता है।

पतन ('छिपाएं')

बंधनेवाला तत्व छुपाता है।

आयोजन

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

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

टाइपहेड बूटस्ट्रैप-typeahead.js

के बारे में

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

फ़ाइल डाउनलोड करें

उदाहरण

टाइपहेड परिणाम दिखाने के लिए नीचे दिए गए फ़ील्ड में टाइप करना प्रारंभ करें।

बूटस्ट्रैप-typeahead.js का उपयोग करना

जावास्क्रिप्ट के माध्यम से टाइपहेड को कॉल करें:

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

विकल्प

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

मार्कअप

टाइपहेड कार्यक्षमता वाले तत्व को पंजीकृत करने के लिए डेटा विशेषताएँ जोड़ें।

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

तरीकों

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

एक टाइपहेड के साथ एक इनपुट शुरू करता है।