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

बूटस्ट्रैप क घटक क जीवन मे लाउ-अब 12 कस्टम jQuery प्लगइन क संग.

मोडल

एक सुव्यवस्थित, लेकिन लचीला, केवल न्यूनतम आवश्यक कार्यक्षमता आरू स्मार्ट डिफ़ॉल्ट के साथ पारंपरिक जावास्क्रिप्ट मोडल प्लगइन पर ले जाय छै.

ड्रॉपडाउन

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

स्क्रॉलस्पाई

स्क्रॉल स्थिति के आधार पर वर्तमान सक्रिय लिंक देखाबै लेली अपनऽ नवबार म॑ लिंक क॑ स्वचालित रूप स॑ अपडेट करै लेली scrollspy के प्रयोग करलऽ जाय ।

टॉगल योग्य टैब

स्थानीय सामग्री कें टैब योग्य फलक कें माध्यम सं टॉगल करय कें अनुमति द क टैब आ गोली कें बेसि उपयोगी बनावा कें लेल अइ प्लगइन कें उपयोग करूं.

टूलटिप्स

jQuery Tipsy प्लगइन पर एक नया टेक, टूलटिप्स छवि पर निर्भर नै छै-ओ एनीमेशन लेली CSS3 आरू स्थानीय शीर्षक भंडारण लेली डाटा-विशेषता के उपयोग करै छै.

पोपोवर्स * 1।

द्वितीयक जानकारी कें आवास कें लेल कोनों तत्व मे सामग्री कें छोट-छोट ओवरले जोड़ूं, जेना कि आईपैड पर छै.

* टूलटिप्स शामिल करबाक आवश्यकता अछि

अलर्ट संदेश

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

बटन के

बटन स बेसी करू। नियंत्रण बटन राज्यक या टूलबार जैना अधिक घटक कें लेल बटन कें समूह बनावा.

खसि पड़नाइ

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

हिंडोला

कोनों सामग्री कें एकटा मेरि-गो-राउंड बनाऊं जेकरा अहां सामग्री कें इंटरैक्टिव स्लाइड शो प्रदान करय चाहय छी.

टाइपएहेड

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

संक्रमण * २.

सरल संक्रमण प्रभावक कें लेल, मोडल मे स्लाइड करय कें लेल या अलर्ट कें फीका करय कें लेल bootstrap-transition.js कें एक बेर शामिल करूं.

* प्लगइन में एनीमेशन के लिये आवश्यक

हेड अप! सब जावास्क्रिप्ट प्लगइन के jQuery के नवीनतम संस्करण के आवश्यकता अछि.

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

एक सुव्यवस्थित, लेकिन लचीला, केवल न्यूनतम आवश्यक कार्यक्षमता आरू स्मार्ट डिफ़ॉल्ट के साथ पारंपरिक जावास्क्रिप्ट मोडल प्लगइन पर ले जाय छै.

फाइल डाउनलोड करू

स्थिर उदाहरण

नीचाँ एकटा स्थिर रूपसँ रेंडर कएल गेल मोडल अछि ।

लाइव डेमो

नीचा देल गेल बटन पर क्लिक कए जावास्क्रिप्ट क माध्यम स कोनो मोडल टॉगल करू। ई नीचाँ सरकि क' पन्नाक ऊपरसँ फीका भ' जायत।

डेमो मोडल लॉन्च

बूटस्ट्रैप-मोडल का प्रयोग

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

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

विकल्प

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

मार्कअप

जावास्क्रिप्ट के एक लाइन लिखने बिना अहां अपन पेज पर मोडल के आसानी सं सक्रिय क सकय छी. बस data-toggle="modal"एकटा नियंत्रक तत्व पर सेट करू जकरा संग अछि data-target="#foo"या href="#foo"जे एकटा मोडल तत्व आईडी स मेल खाइत अछि, आ जखन क्लिक कएल जाएत तखन ई अहाँक मोडल लॉन्च करत ।

साथ ही, अपनऽ मोडल इंस्टेंस म॑ विकल्प जोड़ै लेली, बस ओकरा या त॑ नियंत्रण तत्व या खुद मोडल मार्कअप प॑ अतिरिक्त डाटा विशेषता के रूप म॑ शामिल करलऽ जाय ।

  1. <a class = "btn" data-toggle = "मोडल" href = "#myModal" > मोडल लॉन्च करू </a>
  1. <div वर्ग = "मोडल छिपाएँ" आईडी = "myModal" >
  2. <div वर्ग = "मोडल-हेडर" >
  3. <बटन प्रकार = "बटन" वर्ग = "बंद" data-dismiss = "मोडल" > × </बटन>
  4. <h3> मोडल हेडर </h3>
  5. </div>
  6. <div वर्ग = "मोडल-शरीर" >
  7. <p> एकटा महीन शरीर... </p>
  8. </div>
  9. <div वर्ग = "मोडल-पाद लेख" >
  10. <a href = "#" class = "btn" data-dismiss = "मोडल" > बंद करू </a>
  11. <a href = "#" class = "btn btn-primary" > परिवर्तन सहेजू </a>
  12. </div>
  13. </div>
हेड अप! यदि आहाँ चाहै छियै कि आपकऽ मोडल क॑ अंदर आरू बाहर एनिमेट करलऽ जाय, त॑ बस तत्व म॑ एगो .fadeक्लास जोड़ै छै .modal(एकरा क॑ एक्शन म॑ देखै लेली डेमो क॑ देखऽ) आरू bootstrap-transition.js क॑ शामिल करलऽ जाय ।

विधियाँ

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

एकटा मोडल के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object.

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

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

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

  1. $ ( '# मेरा मोडल' ). मोडल ( 'टॉगल' ) २ .

.modal('देखाउ')

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

  1. $ ( '# मेरा मोडल' ). मोडल ( 'देखाउ' ) २ .

.modal('छुपाएँ') .

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

  1. $ ( '# मेरा मोडल' ). मोडल ( 'छुपाउ' ) २ .

घटनाक्रम

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

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

स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति कें आधार पर स्वचालित रूप सं nav लक्ष्य अपडेट करय कें लेल छै.

फाइल डाउनलोड करू

उदाहरण scrollspy के साथ नवबार

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

@मोट

विज्ञापन लेगिंग keytar, ब्रंच आईडी कला पार्टी dolor labore। पिचफोर्क yr enim लो-फाई से पहले वे बिक चुके qui. टम्बलर फार्म-टू-टेबल साइकिल अधिकार जे किछु। अनिम केफियेह कार्लेस कार्डिगन। Velit seitan mcsweeney के फोटो बूथ 3 भेड़िया चंद्रमा irure. Cosby स्वेटर लोमो जीन शॉर्ट्स, विलियम्सबर्ग हुडी न्यूनतम qui आप शायद उनके एट कार्डिगन ट्रस्ट फंड culpa बायोडीजल वेस एंडरसन सौंदर्यशास्त्र के बारे में नहीं सुनने हैं | निहिल गोदना accusamus, cred विडंबना बायोडीजल keffiyeh कारीगर ullamco consequat |

@ mdo

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

एकटा

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

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


bootstrap-scrollspy.js क उपयोग करब

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

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

मार्कअप

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

  1. <body data-spy = "स्क्रॉल" > ... </body>
हेड अप! नवबार लिंक मे हल करय योग्य आईडी टारगेट होबाक चाही. जेना, एकटा <a href="#home">home</a>डोम मे किछु एहन चीजक अनुरूप अवश्य अछि जेना <div id="home"></div>.

विधियाँ

.scrollspy ('ताजा') .

DOM स तत्व जोड़ै या हटाबै के साथ scrollspy क उपयोग करला पर, आहाँ क रिफ्रेश विधि क ऐन्हऽ कॉल करै के जरूरत होतै:

  1. $ ( '[डेटा-जासूस = "स्क्रॉल"]' ). प्रत्येक ( फ़ंक्शन () { .
  2. var $ जासूस = $ ( )। scrollspy ( 'ताजा' ) २ .
  3. });

विकल्प

नाम प्रकार चुकनाइ वर्णन
ऑफसेट संख्या १० स्क्रॉल के स्थिति की गणना करते समय ऊपर से ऑफसेट करने के लिये पिक्सेल |

घटनाक्रम

घटना वर्णन
सक्रिय करब ई घटना तखनहि फायर करैत अछि जखन कोनो नव आइटम स्क्रॉलस्पी द्वारा सक्रिय भ' जाइत अछि.

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

फाइल डाउनलोड करू

उदाहरण टैब

नुकायल फलक कें बीच टॉगल करय कें लेल नीचा देल गेल टैब पर क्लिक करूं, ड्रॉपडाउन मेनू कें माध्यम सं सेहो.

कच्चा डेनिम अहाँ शायद हुनका सब के बारे में नै सुनने होयब जीन शॉर्ट्स ऑस्टिन। Nesciunt टोफू स्टंपटाउन aliqua, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच अस्थायी, विलियम्सबर्ग कार्ल्स शाकाहारी helvetica. Reprehenderit कसाई रेट्रो keffiyeh ड्रीमकैचर सिंथ। कोस्बी स्वेटर ईयू बान्ह मी, क्यूई इरुरे टेरी रिचर्डसन पूर्व स्क्वीड। Aliquip placeat साल्विया सिलम आईफोन। Seitan aliquip quis कार्डिगन अमेरिकी परिधान, कसाई 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. $ ( '# मेरा टैब एक' ). क्लिक करू ( फंक्शन ( ) { .
  2. . preventDefault ();
  3. $ ( ) । tab ( 'देखाउ' );
  4. }) के।

अहां अलग-अलग टैब कें कई तरह सं सक्रिय कयर सकय छी:

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

मार्कअप

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

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

विधियाँ

$ ().टैब

एकटा टैब तत्व आ सामग्री कंटेनर कें सक्रिय करयत छै. टैब मे या त एकटा data-targetया एकटा hrefटारगेटिंग एकटा कंटेनर नोड कें डीओएम मे होबाक चाही.

  1. <ul वर्ग = "नव नव-टैब" आईडी = "myTab" >
  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 = "टैब-पैन सक्रिय" id = "घर" > ... </div>
  10. <div class = "टैब-पैन" id = "प्रोफाइल" > ... </div>
  11. <div class = "टैब-पैन" id = "संदेश" > ... </div>
  12. <div class = "टैब-पैन" id = "सेटिंग्स" > ... </div>
  13. </div>
  14.  
  15. <स्क्रिप्ट>
  16. $ ( फंक्शन () { 1।
  17. $ ( '# myTab एक: अंतिम' ). tab ( 'देखाउ' );
  18. }) के।
  19. </स्क्रिप्ट>

घटनाक्रम

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

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

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

फाइल डाउनलोड करू

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

टूलटिप्स देखबाक लेल नीचा देल गेल लिंक पर माउस करू:

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


bootstrap-tooltip.js क उपयोग करब

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

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

विकल्प

नाम प्रकार चुकनाइ वर्णन
एनीमेशन बूलियन सत्य टूलटिप पर एकटा css फीका संक्रमण लागू करू
प्लेसमेंट के लिये तार|फंक्शन 'शिखर' टूलटिप को कैसे पोजीशन दें - ऊपर | नीचे | बाएँ | ठीक
चयनकर्ता डोरी झूठ यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त टूलटिप वस्तुअक कें निर्दिष्ट लक्ष्यक कें लेल प्रत्यायोजित कैल जेतय.
शीर्षक तार | आयोजन '' . पूर्वनिर्धारित शीर्षक मान जँ `title` टैग मौजूद नहि अछि
उत्प्रेरक डोरी 'होवर'। टूलटिप कैसे ट्रिगर किया जाता है - होवर | फोकस | हाथ सं कएल गेल
देरी नम्बर | वस्तु

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

यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै

वस्तु संरचना अछि : १.delay: { show: 500, hide: 100 }

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

मार्कअप

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

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

विधियाँ

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

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

.tooltip ('देखाउ')

कोनो तत्व के टूलटिप के खुलासा करैत अछि.

  1. $ ( '# तत्व' )। टूलटिप ( 'देखाउ' )

.tooltip ('छुपाएँ')

कोनो तत्वक टूलटिपकेँ नुकाबैत अछि।

  1. $ ( '# तत्व' )। tooltip ( 'छुपाएँ' ) .

.tooltip ('टॉगल') .

कोनो तत्वक टूलटिप टॉगल करैत अछि.

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

पोपोवर के बारे में

द्वितीयक जानकारी कें आवास कें लेल कोनों तत्��� मे सामग्री कें छोट-छोट ओवरले जोड़ूं, जेना कि आईपैड पर छै.

* टूलटिप शामिल करबाक आवश्यकता अछि

फाइल डाउनलोड करू

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

पॉपओवर ट्रिगर करबाक लेल बटन पर माउस लगाउ।


bootstrap-popover.js क उपयोग करब

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

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

विकल्प

नाम प्रकार चुकनाइ वर्णन
एनीमेशन बूलियन सत्य टूलटिप पर एकटा css फीका संक्रमण लागू करू
प्लेसमेंट के लिये तार|फंक्शन 'ठीक' पोपोवर के पोजीशन कैसे करे - टॉप | नीचे | बाएँ | ठीक
चयनकर्ता डोरी झूठ यदि कोनों चयनकर्ता उपलब्ध करायल गेल छै, त टूलटिप ऑब्जेक्ट निर्दिष्ट लक्ष्य कें लेल प्रत्यायोजित कैल जेतय
उत्प्रेरक डोरी 'होवर'। टूलटिप कैसे ट्रिगर किया जाता है - होवर | फोकस | हाथ सं कएल गेल
शीर्षक तार | आयोजन '' . पूर्वनिर्धारित शीर्षक मान यदि `title` विशेषता मौजूद नहि अछि
सामग्री तार | आयोजन '' . पूर्वनिर्धारित सामग्री मान यदि `data-content` विशेषता मौजूद नहि अछि
देरी नम्बर | वस्तु

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

यदि कोनों नंबर सप्लाई कैल गेल छै, त नुका/देखाउ दूनू पर विलंब लागू कैल जायत छै

वस्तु संरचना अछि : १.delay: { show: 500, hide: 100 }

हेड अप! व्यक्तिगत पॉपओवर कें लेल विकल्प वैकल्पिक रूप सं डेटा विशेषताक कें उपयोग कें माध्यम सं निर्दिष्ट कैल जा सकय छै.

मार्कअप

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

विधियाँ

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

एक तत्व संग्रह के लिये पोपोवर आरंभ करता है |

.popover('देखाउ')

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

  1. $ ( '# तत्व' )। popover ( 'देखाउ' ) २ .

.popover('छुपाएँ') .

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

  1. $ ( '# तत्व' )। पोपोवर ( 'छुपाउ' ) २ .

.popover('टॉगल') .

एक तत्व पॉपओवर टॉगल करैत अछि।

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

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

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

डाउनलोड

उदाहरण अलर्ट

अलर्ट प्लगइन नियमित अलर्ट संदेशक पर काज करएयत छै, आ संदेशक कें ब्लॉक करएयत छै.

पवित्र ग्वाकामोल ! बेस्ट चेक यो सेल्फ, अहाँ बेसी नीक नहि लागि रहल छी।

ओह स्नैप! अहाँकेँ त्रुटि भेटल!

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

ई क्रिया करू आकि ई काज करू


bootstrap-alert.js क उपयोग करब

जावास्क्रिप्ट के माध्यम स एकटा अलर्ट के खारिज करब सक्षम करू:

  1. $ ( ".सचेतक" )। अलर्ट () 1।

मार्कअप

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

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

विधियाँ

$ (). अलर्ट ()।

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

.alert ('बंद') .

एकटा अलर्ट बंद करैत अछि।

  1. $ ( ".सचेतक" )। अलर्ट ( 'बंद' ) २ .

घटनाक्रम

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

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

विषय में

बटन स बेसी करू। नियंत्रण बटन राज्यक या टूलबार जैना अधिक घटक कें लेल बटन कें समूह बनावा.

फाइल डाउनलोड करू

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

राज्य आओर टॉगल के लेल बटन प्लगइन के उपयोग करू.

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

bootstrap-button.js क उपयोग करब

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

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

मार्कअप

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

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

विधियाँ

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

पुश स्टेट टॉगल करैत अछि। बटन कें ओ रूप दयत छै की इ सक्रिय भ गेल छै.

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

$ (). बटन ('लोडिंग')

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

  1. <button class = "btn" data-loading-text = "सामान लोड कएल जा रहल अछि..." > ... </button>
हेड अप! फायरफॉक्स पृष्ठ लोड भर मे अक्षम स्थिति केँ कायम रखैत अछि . एकर एकटा समाधान अछि उपयोग करब autocomplete="off".

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

बटन स्थिति रीसेट करैत अछि - पाठ केँ मूल पाठ मे स्वैप करैत अछि.

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

बटन स्थिति रीसेट करैत अछि - कोनो डेटा परिभाषित पाठ स्थिति मे पाठ स्वैप करैत अछि.

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

विषय में

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

फाइल डाउनलोड करू

* संक्रमण प्लगइन कें शामिल करनाय आवश्यक छै.

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

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

एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.
एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.
एनिम pariatur क्लिच reprehenderit, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन विज्ञापन स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर cupidat स्केटबोर्ड dolor ब्रंच। खाद्य ट्रक quinoa nesciunt laborum eiusmod। ब्रंच 3 भेड़िया चंद्रमा अस्थायी, sunt aliqua डाल एक पक्षी इस पर स्क्वीड एकल-मूल कॉफी nulla assumenda shoreditch एट | निहिल एनिम केफियेह helvetica, शिल्प बियर labore वेस एंडरसन cred nesciunt sapiente ईए proident. विज्ञापन शाकाहारी excepteur कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-टू-टेबल, कच्चा डेनिम सौंदर्य सिंथ nesciunt अहाँ शायद हुनका सभक बारे मे नहि सुनने होयब accusamus labore टिकाऊ वीएचएस.

bootstrap-collapse.js क उपयोग करब

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

  1. $ ( ".संकुचित करब" ). ढहब () २.

विकल्प

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

मार्कअप

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

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

विधियाँ

.collapse(विकल्प) .

एकटा संकुचित तत्व के रूप मे अपन सामग्री के सक्रिय करैत अछि. एकटा वैकल्पिक विकल्प स्वीकार करैत अछि object.

  1. $ ( '# मेरासंकुचित' ). संकुचन ({
  2. toggle : गलत
  3. }) के।

.collapse ('टॉगल') .

कोनो संकुचन योग्य तत्व केँ देखाओल गेल अथवा नुकाएल मे टॉगल करैत अछि.

.collapse('देखाउ')

एकटा संकुचित तत्व देखाबैत अछि।

.collapse('छुपाएँ') .

एकटा संकुचित तत्वकेँ नुकाबैत अछि।

घटनाक्रम

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

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

विषय में

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

फाइल डाउनलोड करू

उदाहरण

टाइपएहेड परिणाम देखाबय लेल नीचा देल गेल फील्ड मे टाइप करब शुरू करू.


bootstrap-typeahead.js क उपयोग करब

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

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

विकल्प

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

मार्कअप

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

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

विधियाँ

.typeahead (विकल्प) .

एकटा टाइपएहेड क संग एकटा इनपुट कए आरंभ करैत अछि.