बूटस्ट्रैप खातिर जावास्क्रिप्ट बा
बूटस्ट्रैप के घटक के जीवन में ले आईं-अब 12 कस्टम jQuery प्लगइन के साथ।
jQuery प्लगइन रउआ के शुरू करे खातिर एक दर्जन बूटस्ट्रैप प्लगइन
मोडल बूटस्ट्रैप-मोडल.जेएस के बा
मोडल के बारे में बतावल गइल बा
एगो सुव्यवस्थित, बाकिर लचीला, पारंपरिक जावास्क्रिप्ट मोडल प्लगइन पर लेबे के बा जवना में खाली न्यूनतम जरूरी कामकाज आ स्मार्ट डिफ़ॉल्ट बा.
फाइल डाउनलोड करींस्थिर उदाहरण बा
नीचे एगो स्थिर रूप से रेंडर कइल गइल मोडल दिहल गइल बा।
मोडल हेडर के बा
एगो महीन शरीर के...
लाइव डेमो बा
नीचे दिहल बटन पर क्लिक क के जावास्क्रिप्ट के माध्यम से कवनो मोडल टॉगल करीं। ई नीचे सरक जाई आ पन्ना के ऊपर से फीका पड़ जाई.
डेमो मोडल लॉन्च कइल जावबूटस्ट्रैप-मोडल के इस्तेमाल करत बानी
जावास्क्रिप्ट के माध्यम से मोडल के कॉल करीं:
- $ ( '# माईमोडल' ) के बा। मोडल ( विकल्प ) के बा .
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| पृष्ठभूमि के बा | बूलियन के बा | सच | एगो मोडल-बैकग्राउंड तत्व शामिल बा। एकरे अलावा, अइसन बैकग्राउंड खातिर निर्दिष्ट करीं staticजे क्लिक पर मोडल बंद ना करे। |
| कीबोर्ड के बारे में बतावल गइल बा | बूलियन के बा | सच | एस्केप की दबावे पर मोडल बंद कर देला |
| देखायीं | बूलियन के बा | सच | इनिशियलाइज होखे पर मोडल देखावे ला। |
मार्कअप कइल गइल बा
रउआँ अपना पन्ना पर मोडल सभ के आसानी से सक्रिय क सकत बानी बिना जावास्क्रिप्ट के एक लाइन लिखले। बस data-toggle="modal"एगो कंट्रोलर एलिमेंट पर सेट करीं जवना में एगो data-target="#foo"या href="#foo"जवन मोडल एलिमेंट आईडी से मेल खाला, आ जब क्लिक कइल जाई त ऊ राउर मोडल लॉन्च कर दी.
साथ ही, अपना मोडल इंस्टेंस में विकल्प जोड़े खातिर, बस एकरा के या त कंट्रोल एलिमेंट पर या खुद मोडल मार्कअप पर अतिरिक्त डेटा एट्रिब्यूट के रूप में शामिल करीं।
- <a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल लॉन्च करीं </a>
- <div वर्ग = "मोडल" आईडी = "माईमोडल" > बा
- <div वर्ग = "मोडल-हेडर" > बा
- <a class = "बंद" डेटा-खारिज = "मोडल" > × </a>
- <h3> मोडल हेडर </h3> के बा
- </div> के बा
- <div वर्ग = "मोडल-शरीर" > के बा
- <p> एगो महीन शरीर... </p>
- </div> के बा
- <div वर्ग = "मोडल-पाद लेख" > बा
- <a href = "#" क्लास = "btn" > बंद करीं </a>
- <a href = "#" class = "btn btn-primary" > बदलाव सहेजीं </a>
- </div> के बा
- </div> के बा
.fadeक्लास
जोड़ीं .modal(एह के एक्शन में देखे खातिर डेमो के देखल जाय) आ bootstrap-transition.js के शामिल करीं।
विधियन के बारे में बतावल गइल बा
.मोडल(विकल्प) के बा।
मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला object.
- $ ( '# माईमोडल' ) के बा। मोडल ({ के बा।
- कीबोर्ड : गलत बा
- }) के बा।
.मोडल ('टॉगल') के बा।
मैन्युअल रूप से एगो मोडल के टॉगल करेला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'टॉगल' ) के बा।
.मोडल('देखावे') के बा।
मैन्युअल रूप से एगो मोडल खोलेला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'देखावे' ) के बा।
.मोडल('छुपावे') के बा।
मैन्युअल रूप से एगो मोडल के छिपा देला।
- $ ( '# माईमोडल' ) के बा। मोडल ( 'छुपावल' ) के बा।
घटनाक्रम के बारे में बतावल गइल बा
बूटस्ट्रैप के मोडल क्लास मोडल फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
| कार्यक्रम | बिबरन |
|---|---|
| देखायीं | showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
| देखावल गइल बा | ई इवेंट तब फायर कइल जाला जब मोडल के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
| लुकाइल | ई इवेंट तुरंत फायर हो जाला जब hideइंस्टेंस मेथड के कॉल हो जाला। |
| छिपल | ई इवेंट तब फायर कइल जाला जब मोडल के यूजर से छिपावल खतम हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '# माईमोडल' ) के बा। पर ( 'छुपल' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
ड्रॉपडाउन बूटस्ट्रैप-ड्रॉपडाउन.जेएस के बा
ड्रॉपडाउन के बारे में बा
एह सरल प्लगइन के साथ बूटस्ट्रैप में लगभग कवनो भी चीज में ड्रॉपडाउन मेनू जोड़ीं। बूटस्ट्रैप में नवबार, टैब, अवुरी गोली में पूरा ड्रॉपडाउन मेनू सपोर्ट ऑन के सुविधा बा।
फाइल डाउनलोड करींउदाहरण खातिर दिहल गइल बा
ड्रॉपडाउन के परीक्षण करे खातिर नीचे दिहल नवबार आ गोली में दिहल ड्रॉपडाउन नव लिंक पर क्लिक करीं।
बूटस्ट्रैप-ड्रॉपडाउन.जेएस के इस्तेमाल से
जावास्क्रिप्ट के माध्यम से ड्रॉपडाउन के कॉल करीं:
- $ ( '.ड्रॉपडाउन-टॉगल' ) के रूप में दिहल गइल बा। ड्रॉपडाउन () के बा।
मार्कअप कइल गइल बा
कवनो तत्व में जल्दी से ड्रॉपडाउन कार्यक्षमता जोड़े खातिर बस जोड़ दीं data-toggle="dropdown"आ कवनो वैध बूटस्ट्रैप ड्रॉपडाउन स्वचालित रूप से सक्रिय हो जाई.
data-target="#fat"या
के इस्तेमाल करके कवनो विशिष्ट ड्रॉपडाउन के लक्ष्य बना सकत बानी href="#fat"।
- <ul class = "नव नव-गोली" > के बा
- <li class = "सक्रिय" ><a href = "#" > नियमित लिंक </a></li> बा
- <li वर्ग = "ड्रॉपडाउन" आईडी = "मेनू1" > बा
- <a class = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "# मेनू1" >
- ड्रॉपडाउन हो गइल बा
- <b class = "कैरेट" </b> के बारे में बतावल गइल बा
- </a> के बा
- <ul वर्ग = "ड्रॉपडाउन-मेनू" > बा
- <li><a href = "#" > कार्रवाई </a></li> बा
- <li><a href = "#" > एगो अउरी क्रिया </a></li>
- <li><a href = "#" > इहाँ कुछ अउर बा </a></li>
- <li class = "विभाजक" </li> के बारे में बतावल गइल बा
- <li><a href = "#" > अलग कइल गइल लिंक </a></li>
- </ul> के बा
- </li> के बा
- ...
- </ul> के बा
विधियन के बारे में बतावल गइल बा
$ (). ड्रॉपडाउन () के बा।
कौनों दिहल गइल नवबार भा टैब कइल नेविगेशन खातिर मेनू सभ के सक्रिय करे खातिर एगो प्रोग्रामेटिक एपीआई।
स्क्रॉलस्पाई बूटस्ट्रैप-स्क्रॉलस्पाई.जेएस के बा
स्क्रॉलस्पाई प्लगइन स्क्रॉल के स्थिति के आधार पर नेव टारगेट के स्वचालित रूप से अपडेट करे खातिर बा।
फाइल डाउनलोड करींउदाहरण स्क्रॉलस्पाई के साथ नवबार
नीचे दिहल इलाका के स्क्रॉल करीं आ नेविगेशन अपडेट देखीं. ड्रॉपडाउन सब आइटम के भी हाइलाइट कईल जाई। एकरा के आजमा के देखीं!
@मोट
विज्ञापन लेगिंग कीतार, ब्रंच आईडी कला पार्टी डोलर श्रम। पिचफोर्क 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 कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।
bootstrap-scrollspy.js के इस्तेमाल कइल जा रहल बा
जावास्क्रिप्ट के माध्यम से स्क्रॉलस्पाई के कॉल करीं:
- $ ( '#नवबार' ) के रूप में दिहल गइल बा। स्क्रॉलस्पाई () के बा।
मार्कअप कइल गइल बा
अपना टॉपबार नेविगेशन में आसानी से स्क्रॉलस्पी व्यवहार जोड़ल जा सके ला, बस data-spy="scroll"ओह तत्व में जोड़ीं जेकरा पर रउआँ जासूसी कइल चाहत बानी (सबसे आम तौर पर ई शरीर होखी)।
- <body data-spy = "स्क्रॉल" > ... </body> के बा
<a href="#home">home</a>डोम में कुछ चीज से मेल खाए के चाहीं जइसे कि
<div id="home"></div>.
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| ऑफसेट हो गइल बा | संख्या | 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.
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.
ट्रस्ट फंड seitan लेटरप्रेस, keytar कच्चा डेनिम keffiyeh etsy कला पार्टी से पहिले उ लोग बाहर बिक गईल मास्टर साफ लस मुक्त स्क्वीड scenester freegan कॉस्बी स्वेटर। फैनी पैक पोर्टलैंड seitan DIY, कला पार्टी locavore भेड़िया क्लिच उच्च जीवन गूंज पार्क ऑस्टिन। Cred विनाइल keffiyeh DIY साल्विया पीबीआर, बान्ह मी से पहिले कि उ लोग खेत से टेबल वीएचएस वायरल लोकावोर कॉस्बी स्वेटर बेच देले। लोमो भेड़िया वायरल, मूंछ रेडीमेड थंडरकैट्स केफियेह शिल्प बियर मार्फा नैतिक। भेड़िया साल्विया फ्रीगन, सार्टोरियल केफियेह इको पार्क शाकाहारी।
बूटस्ट्रैप-टैब.जेएस के इस्तेमाल से
जावास्क्रिप्ट के माध्यम से टैब करे लायक टैब सक्षम करीं:
- $ ( '# हमार टैब' ) के बा। टैब ( 'देखाईं' ) के बा।
मार्कअप कइल गइल बा
रउआँ बिना कौनों जावास्क्रिप्ट लिखले टैब भा गोली नेविगेशन के सक्रिय क सकत बानी खाली निर्दिष्ट क के data-toggle="tab"भा data-toggle="pill"कौनों तत्व पर।
- <ul class = "नव नव-टैब" > बा
- <li><a href = "#घर" डेटा-टॉगल = "टैब" > घर </a></li>
- <li><a href = "#प्रोफाइल" डेटा-टॉगल = "टैब" > प्रोफाइल </a></li>
- <li><a href = "#संदेश" डेटा-टॉगल = "टैब" > संदेश </a></li>
- <li><a href = "#सेटिंग्स" डेटा-टॉगल = "टैब" > सेटिंग्स </a></li>
- </ul> के बा
विधियन के बारे में बतावल गइल बा
$ ().टैब के बा
एगो टैब तत्व आ सामग्री कंटेनर के सक्रिय करेला। टैब में या त एगो `डेटा-टारगेट` होखे के चाहीं या फिर एगो `href` जवन डोम में एगो कंटेनर नोड के लक्षित करे।
- <ul class = "नव नव-टैब" > बा
- <li class = "सक्रिय" ><a href = "#घर" > घर </a></li>
- <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> बा
- <li><a href = "#messages" > संदेश </a></li> बा
- <li><a href = "#सेटिंग्स" > सेटिंग्स </a></li> बा
- </ul> के बा
- <div वर्ग = "टैब-सामग्री" > बा
- <div class = "टैब-पेन सक्रिय" आईडी = "घर" > ... </div>
- <div class = "टैब-पेन" id = "प्रोफाइल" > ... </div> बा
- <div class = "टैब-पेन" id = "संदेश" > ... </div>
- <div क्लास = "टैब-पेन" आईडी = "सेटिंग्स" > ... </div>
- </div> के बा
- <स्क्रिप्ट> के बा
- $ ( फंक्शन () के बा { .
- $ ( '.टैब एगो: अंतिम' )। टैब ( 'देखाईं' ) के बा।
- }) के बा।
- </script> के बा
घटनाक्रम के बारे में बतावल गइल बा
| कार्यक्रम | बिबरन |
|---|---|
| देखायीं | ई इवेंट टैब शो पर फायर होला, बाकिर नया टैब देखावे से पहिले. सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget |
| देखावल गइल बा | ई इवेंट टैब देखावे के बाद टैब शो पर फायर हो जाला। सक्रिय टैब आ पिछला सक्रिय टैब (अगर उपलब्ध होखे) के क्रमशः लक्षित करे खातिर event.targetआ के इस्तेमाल करीं ।event.relatedTarget |
- $ ( 'ए [डेटा-टॉगल = "टैब"]' ) के बा। पर ( 'देखावल गइल' , फंक्शन ( ई ) {
- ई बा . लक्ष्य // सक्रिय कइल गइल टैब
- ई बा . relatedTarget // पिछला टैब के बा
- }) के बा।
टूलटिप्स बूटस्ट्रैप-टूलटिप.जेएस के बा
टूलटिप्स के बारे में बतावल गइल बा
जेसन फ्रेम द्वारा लिखल गइल बेहतरीन jQuery.tipsy प्लगइन से प्रेरित; टूलटिप एगो अपडेट कइल संस्करण हवे, जवन छवि सभ पर निर्भर ना होला, एनीमेशन खातिर css3 के इस्तेमाल करे ला आ लोकल टाइटिल स्टोरेज खातिर डेटा-एट्रिब्यूट सभ के इस्तेमाल करे ला।
फाइल डाउनलोड करींटूलटिप्स के उदाहरण के प्रयोग
टूलटिप देखे खातिर नीचे दिहल लिंक सभ पर होवर करीं:
टाइट पैंट नेक्स्ट लेवल केफियेह आप शायद इनका बारे में नईखी सुनले। फोटो बूथ दाढ़ी कच्चे डेनिम लेटरप्रेस शाकाहारी दूत बैग स्टंपटाउन। फार्म-टू-टेबल seitan, mcsweeney के फिक्सी टिकाऊ क्विनोआ 8-बिट अमेरिकी परिधान में टेरी रिचर्डसन विनाइल चैम्ब्रे बा। दाढ़ी स्टंपटाउन, कार्डिगन बान्ह मी लोमो थंडरकैट्स। टोफू बायोडीजल विलियम्सबर्ग मार्फा, चार लोको mcsweeney के साफ शाकाहारी chambray। एगो वाकई में विडंबनापूर्ण कारीगर चाहे जवन भी केतार, सीनेस्टर खेत से टेबल बैंकसी ऑस्टिन ट्विटर संभाल फ्रीगन cred कच्चा डेनिम एकल मूल कॉफी वायरल।
बूटस्ट्रैप-टूलटिप.जेएस के इस्तेमाल से
जावास्क्रिप्ट के माध्यम से टूलटिप के ट्रिगर करीं:
- $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। टूलटिप ( विकल्प ) के बा .
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | टूलटिप पर एगो css फेड संक्रमण लागू करीं |
| प्लेसमेंट के बा | स्ट्रिंग|फंक्शन के बा | 'ऊपर' | टूलटिप के स्थिति कईसे कईल जाला - ऊपर | नीचे के बा | छोड़ के बा | ठीक |
| चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई। |
| हक | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` टैग मौजूद नइखे |
| ट्रिगर | डोरी | 'होवर' करे के बा। | टूलटिप कइसे ट्रिगर होला - होवर | फोकस करे के बा | हाथ से कईल |
| देरी | नंबर के बा | वस्तु | 0 के बा | टूलटिप के देखावे आ छिपावे में देरी (ms) अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
मार्कअप कइल गइल बा
प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआई ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।
- <a href = "#" rel = "टूलटिप" title = "पहिलका टूलटिप" > हमरा पर मंडराई </a>
विधियन के बारे में बतावल गइल बा
$ ().टूलटिप (विकल्प) के बा।
एगो तत्व संग्रह से एगो टूलटिप हैंडलर संलग्न करेला।
.टूलटिप ('देखावे के') बा।
कवनो तत्व के टूलटिप के खुलासा करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'देखाईं' ) के बा।
.tooltip('छुपावे') के बा।
कवनो तत्व के टूलटिप के छिपा देला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'छुपा के' ) के बा।
.टूलटिप ('टॉगल') के बा।
कवनो तत्व के टूलटिप के टॉगल करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। टूलटिप ( 'टॉगल' ) के बा।
पोपोवर्स बूटस्ट्रैप-पोपोवर.जेएस के बा
पोपोवर के बारे में बतावल गइल बा
द्वितीयक जानकारी के आवास खातिर कवनो तत्व में सामग्री के छोट-छोट ओवरले जोड़ीं, जइसे कि आईपैड पर बा।
* टूलटिप के शामिल करे के जरूरत बा
फाइल डाउनलोड करींउदाहरण खातिर होवर पोपोवर के बा
पॉपओवर के ट्रिगर करे खातिर बटन के ऊपर माउस करीं।
bootstrap-popover.js के इस्तेमाल कइल जा रहल बा
जावास्क्रिप्ट के माध्यम से पॉपओवर सक्षम करीं:
- $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। पोपोवर ( विकल्प ) के बा .
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| एनीमेशन के बारे में बतावल गइल बा | बूलियन के बा | सच | टूलटिप पर एगो css फेड संक्रमण लागू करीं |
| प्लेसमेंट के बा | स्ट्रिंग|फंक्शन के बा | 'ठीक' | पोपोवर के पोजीशन कईसे कईल जाला - टॉप | नीचे के बा | छोड़ के बा | ठीक |
| चयनकर्ता के बा | डोरी | गलत | अगर कौनों चयनकर्ता दिहल गइल होखे तब टूलटिप ऑब्जेक्ट सभ के निर्दिष्ट लक्ष्य सभ के सौंप दिहल जाई |
| ट्रिगर | डोरी | 'होवर' करे के बा। | टूलटिप कइसे ट्रिगर होला - होवर | फोकस करे के बा | हाथ से कईल |
| हक | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट शीर्षक मान अगर `शीर्षक` विशेषता मौजूद नइखे |
| सामग्री | तार के बा | परोजन | '' के बा। | डिफ़ॉल्ट सामग्री मान अगर `data-content` विशेषता मौजूद नइखे |
| देरी | नंबर के बा | वस्तु | 0 के बा | पोपोवर देखावे आ छिपावे में देरी (ms) अगर कवनो नंबर सप्लाई कइल गइल बा त छिपावे/देखावे दुनु पर देरी लगावल जाला वस्तु संरचना के बारे में बतावल गइल बा: |
मार्कअप कइल गइल बा
प्रदर्शन के कारण से टूलटिप आ पोपोवर डेटा-एपीआईएस ऑप्ट इन बा अगर रउआ एकर इस्तेमाल कइल चाहत बानी त बस एगो चयनकर्ता विकल्प निर्दिष्ट करीं।
विधियन के बारे में बतावल गइल बा
$ ().popover (विकल्प) के बा।
एगो तत्व संग्रह खातिर पोपोवर के आरंभ करे ला।
.popover('देखावे') के बा।
एगो तत्वन के पोपोवर के खुलासा करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'देखावे' ) के बा।
.popover('छुपावे के') के बा।
एगो तत्वन के पोपोवर के छिपा देला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'छुपा के' ) के बा।
.popover('टॉगल') के बा।
एगो तत्व पॉपओवर के टॉगल करेला।
- $ ( '# तत्व' ) के रूप में दिहल गइल बा। पोपोवर ( 'टॉगल' ) के बा।
अलर्ट संदेश bootstrap-alert.js बा
अलर्ट के बारे में बतावल गईल बा
अलर्ट प्लगइन एगो छोट क्लास हवे जेह में अलर्ट सभ में क्लोज फंक्शनलिटी जोड़ल जाला।
डाउनलोड करींउदाहरण के अलर्ट बा
अलर्ट प्लगइन नियमित अलर्ट संदेश प काम करेला, अवुरी संदेश के ब्लॉक करेला।
ओह स्नैप के बा! रउरा त एगो त्रुटि मिलल बा!
ई आ ऊ बदल के फेर से कोशिश करीं. डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला, एगेट लैसिनिया ओडियो सेम नेसी एलिट। क्रास मैटिस कॉन्सेक्टेटर पुरस बइठल अमेट फर्मेन्टम।
बूटस्ट्रैप-अलर्ट.जेएस के इस्तेमाल से
जावास्क्रिप्ट के माध्यम से अलर्ट के खारिज करे के सक्षम करीं:
- $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट () के बा।
मार्कअप कइल गइल बा
बस data-dismiss="alert"अपना बंद बटन में जोड़ दीं जेहसे कि स्वचालित रूप से अलर्ट बंद कार्यक्षमता मिल सके.
- <a class = "बंद करीं" data-dismiss = "सचेतक" href = "#" > × </a> के बा
विधियन के बारे में बतावल गइल बा
$ ().अलर्ट () के बा।
सभ अलर्ट के करीबी कार्यक्षमता के संगे लपेटेला। बंद होखला पर आपके अलर्ट के एनिमेट आउट करावे खातिर, सुनिश्चित करीं कि ओह लोग पर .fadeआ .inक्लास पहिले से लागू बा।
.alert('बंद करीं') के बा।
एगो अलर्ट बंद कर देला.
- $ ( ".अलर्ट" ) के रूप में दिहल गइल बा। अलर्ट ( 'बंद करीं' ) के बा।
घटनाक्रम के बारे में बतावल गइल बा
बूटस्ट्रैप के अलर्ट क्लास अलर्ट कार्यक्षमता में हुक करे खातिर कुछ घटना के उजागर करेला।
| कार्यक्रम | बिबरन |
|---|---|
| बंद करीं | closeइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
| बंद हो गइल | ई इवेंट तब फायर कइल जाला जब अलर्ट बंद हो जाला (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '#हमार-सचेतक' ). बाइंड ( 'बंद' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
bootstrap- collapse.js के संकुचित करीं
बारे में
अकॉर्डियन आ नेविगेशन जइसन संकुचित घटक खातिर बेस स्टाइल आ लचीला समर्थन पाईं.
फाइल डाउनलोड करींउदाहरण खातिर अकॉर्डियन के
संकुचन प्लगइन के इस्तेमाल से हमनी के एगो साधारण अकॉर्डियन स्टाइल विजेट बनवनी जा:
bootstrap-collapse.js के इस्तेमाल कइल जा रहल बा
जावास्क्रिप्ट के माध्यम से सक्षम करीं:
- $ ( ".संकुचित हो गइल" )। ढह गइल बा () .
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| माता-पिता के बा | चयनकर्ता के बा | गलत | अगर चयनकर्ता तब निर्दिष्ट पैरेंट के तहत सभ संकुचित तत्व बंद हो जाई जब ई संकुचित आइटम देखावल जाई। (पारंपरिक अकॉर्डियन व्यवहार के समान) |
| टॉगल कइल जाला | बूलियन के बा | सच | आह्वान पर संकुचित तत्व के टॉगल करेला |
मार्कअप कइल गइल बा
बस एगो संकुचित तत्व के नियंत्रण स्वचालित रूप से असाइन करे खातिर तत्व के जोड़ल data-toggle="collapse"आ एगो के। data-targetएट्रिब्यूट एगो css चयनकर्ता के स्वीकार करे ला जेकरा data-targetपर कोलैप्स लागू कइल जा सके ला। collapseसंकुचित तत्व में क्लास के जरूर जोड़ल जाला । अगर रउआँ चाहत बानी कि ई डिफ़ॉल्ट रूप से खुलल होखे, त अतिरिक्त क्लास जोड़ीं in।
- <बटन वर्ग = "बीटीएन बीटीएन-खतरा" डेटा-टॉगल = "ढह" डेटा-लक्ष्य = "# डेमो" >
- सरल ढहने लायक बा
- </बटन> के बा
- <div id = "डेमो" क्लास = "में ढह जाईं" > ... </div>
data-parent="#selector"। एकरा के एक्शन में देखे खातिर डेमो के देखल जाव.
विधियन के बारे में बतावल गइल बा
.collapse(विकल्प) के बा।
रउरा सामग्री के एगो संकुचित तत्व के रूप में सक्रिय करेला. एगो वैकल्पिक विकल्प स्वीकार करेला object.
- $ ( '# हमारसंकुचित करे लायक' ). ढह गइल बा ({
- टॉगल : गलत बा
- }) के बा।
.collapse('टॉगल') के बा।
कवनो संकुचित तत्व के देखावल भा छिपावे खातिर टॉगल करे ला।
.collapse('देखावे') के बा।
एगो संकुचित तत्व देखावेला।
.collapse('छुपावे') के बा।
एगो संकुचित तत्व के छिपावेला।
घटनाक्रम के बारे में बतावल गइल बा
बूटस्ट्रैप के कोलैप्स क्लास कोलैप्स फंक्शनलिटी में हुक करे खातिर कुछ इवेंट के उजागर करेला।
| कार्यक्रम | बिबरन |
|---|---|
| देखायीं | showइंस्टेंस मेथड के कॉल कइला पर ई इवेंट तुरंत फायर हो जाला। |
| देखावल गइल बा | ई इवेंट तब फायर कइल जाला जब कौनों संकुचन तत्व के प्रयोगकर्ता के देखाई देवे वाला बनावल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
| लुकाइल | ई इवेंट तुरंत फायर हो जाला जब hideमेथड बोलावल जाला। |
| छिपल | ई घटना तब फायर कइल जाला जब प्रयोगकर्ता से कौनों संकुचन तत्व छिपा दिहल गइल होखे (css संक्रमण पूरा होखे के इंतजार करी)। |
- $ ( '# हमारसंकुचित करे लायक' ). पर ( 'छुपल' , फंक्शन () { 1।
- // कुछ करे के बा...
- }) के बा।
हिंडोला बूटस्ट्रैप-हिंडोला.जेएस के बा
बारे में
तत्वन के माध्यम से साइकिल चलावे खातिर एगो जेनेरिक प्लगइन। एगो मस्ती-मस्ती करे वाला।
फाइल डाउनलोड करींउदाहरण खातिर हिंडोला
नीचे दिहल स्लाइड शो देखीं.
पहिला थंबनेल लेबल बा
क्रास जस्टो ओडियो, डैपिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।
दूसरा थंबनेल लेबल बा
क्रास जस्टो ओडियो, डैपिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।
तीसरा थंबनेल लेबल बा
क्रास जस्टो ओडियो, डैपिबस एसी फैसिलिसिस में, एगेस्टास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।
bootstrap-carousel.js के इस्तेमाल कइल जा रहल बा
जावास्क्रिप्ट के माध्यम से कॉल करीं:
- $ ( '.हिंडोला' ) के बा। हिंडोला () के बा।
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| अंतराल के अंतराल के बारे में बतावल गइल बा | संख्या | 5000 के बा | कवनो आइटम के स्वचालित रूप से साइकिल चलावे के बीच देरी करे के समय के मात्रा। |
| ठहराव | डोरी | "होवर" के बा। | माउसएंटर पर हिंडोला के साइकिल चलावे के रोक देला आ माउसलीव पर हिंडोला के साइकिल चलावे के फेर से शुरू करेला। |
मार्कअप कइल गइल बा
पिछला आ अगिला कॉन्रोल खातिर डेटा एट्रिब्यूट के इस्तेमाल कइल जाला। नीचे दिहल उदाहरण मार्कअप देखल जाव.
- <div id = "myCarousel" वर्ग = "हिंडोला" > बा
- <!-- हिंडोला के आइटम -->
- <div वर्ग = "हिंडोला-आंतरिक" > बा
- <div class = "सक्रिय आइटम" > ... </div> बा
- <div class = "आइटम" > ... </div> के बारे में बतावल गइल बा
- <div class = "आइटम" > ... </div> के बारे में बतावल गइल बा
- </div> के बा
- <!-- हिंडोला नव --> के बा
- <a class = "हिंडोला-नियंत्रण छोड़ दिहल गइल" href = "#myCarousel" डेटा-स्लाइड = "पिछला" > ‹ </a> के बा
- <a class = "हिंडोला-नियंत्रण सही" href = "# myCarousel" डेटा-स्लाइड = "अगला" > › </a> के बा
- </div> के बा
विधियन के बारे में बतावल गइल बा
.हिंडोला(विकल्प) के बा।
एक वैकल्पिक विकल्प के साथ हिंडोला के आरंभ करेला objectआ आइटम के माध्यम से साइकिल चलावे शुरू करेला।
- $ ( '.हिंडोला' ) के बा। हिंडोला ({ के बा।
- अंतराल : 2000 के बा
- }) के बा।
.हिंडोला ('चक्र') के बा।
बाईं ओर से दाएं हिंडोला आइटम के माध्यम से चक्र।
.हिंडोला('विराम') के बा।
हिंडोला के आइटम के माध्यम से साइकिल चलावे से रोक देला।
.हिंडोला(नंबर) के बा।
हिंडोला के एगो खास फ्रेम (0 आधारित, सरणी के समान) में चक्र करे ला।
.हिंडोला('पिछला') के बा।
पिछला आइटम पर चक्कर लगावेला।
.हिंडोला('अगला') के बा।
अगिला आइटम पर चक्कर लगावेला।
घटनाक्रम के बारे में बतावल गइल बा
बूटस्ट्रैप के हिंडोला क्लास हिंडोला के कार्यक्षमता में हुक करे खातिर दू गो घटना के उजागर करेला।
| कार्यक्रम | बिबरन |
|---|---|
| फिसल-पट्टी | ई इवेंट तुरंत फायर हो जाला जब slideइंस्टेंस मेथड के आह्वान कइल जाला। |
| सरक गइल | ई इवेंट तब फायर कइल जाला जब हिंडोला आपन स्लाइड ट्रांजिशन पूरा कर लेला। |
टाइपएहेड बूटस्ट्रैप-टाइपहेड.जेएस के बा
बारे में
कवनो भी फॉर्म टेक्स्ट इनपुट के साथ जल्दी से सुरुचिपूर्ण टाइपहेड बनावे खातिर एगो बेसिक, आसानी से बढ़ावल प्लगइन।
फाइल डाउनलोड करींउदाहरण
टाइपएहेड के परिणाम देखावे खातिर नीचे दिहल फील्ड में टाइप कइल शुरू करीं।
बूटस्ट्रैप-टाइपहेड.जेएस के इस्तेमाल से
जावास्क्रिप्ट के माध्यम से टाइपएहेड के कॉल करीं:
- $ ( '.टाइपएहेड' ) के रूप में दिहल गइल बा। टाइपएहेड () के बा।
विकल्प बा
| नांव | किसिम | बाकी | बिबरन |
|---|---|---|---|
| स्रोत | सरणी के बा | [ ] के बा। | के खिलाफ पूछताछ करे खातिर डेटा स्रोत। |
| वस्तू | संख्या | 8 के बा | ड्रॉपडाउन में प्रदर्शित करे खातिर आइटम के अधिकतम संख्या। |
| मिलान करे वाला के बा | परोजन | केस के संवेदनहीन होखे के चाहीं | ई पता लगावे खातिर इस्तेमाल होखे वाला तरीका कि कौनों क्वेरी कौनों आइटम से मेल खात बा कि ना। एकल तर्क स्वीकार करेला, itemजवना के खिलाफ क्वेरी के परीक्षण कइल जाव। के साथ वर्तमान क्वेरी तक पहुँचीं this.query। trueअगर क्वेरी मिलान होखे त एगो बूलियन वापस करीं । |
| सॉर्टर के बा | परोजन | सटीक मिलान, केस संवेदनशील, केस असंवेदनशील |
ऑटोकम्पलीट रिजल्ट के सॉर्ट करे खातिर इस्तेमाल होखे वाला तरीका। एकल तर्क स्वीकार करे ला itemsआ टाइपएहेड इंस्टेंस के दायरा होला। वर्तमान क्वेरी के संदर्भित करीं this.query. |
| हाइलाइटर के बा | परोजन | सभ डिफ़ॉल्ट मिलान के हाइलाइट करेला | ऑटोकम्पलीट रिजल्ट के उजागर करे खातिर इस्तेमाल कइल गइल तरीका। एकल तर्क स्वीकार करे ला itemआ टाइपएहेड इंस्टेंस के दायरा होला। एचटीएमएल वापस करे के चाहीं। |
मार्कअप कइल गइल बा
टाइपएहेड कार्यक्षमता वाला तत्व के रजिस्टर करे खातिर डेटा विशेषता जोड़ल जाला।
- <इनपुट प्रकार = "पाठ" डेटा-प्रदान = "टाइपएहेड" >
विधियन के बारे में बतावल गइल बा
.typeahead(विकल्प) के बा।
टाइपएहेड के साथ कवनो इनपुट के इनिशियलाइज करेला।