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

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

मोडल के बा

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

ड्रॉपडाउन हो गइल बा

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

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

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

टॉगल करे लायक टैब बा

एह प्लगइन के इस्तेमाल टैब आ गोली सभ के स्थानीय सामग्री के टैब करे लायक फलक सभ के माध्यम से टॉगल करे के इजाजत दे के अउरी उपयोगी बनावे खातिर करीं।

टूलटिप के बारे में बतावल गइल बा

jQuery Tipsy प्लगइन पर एगो नया टेक, टूलटिप्स इमेज पर निर्भर ना होला-ई एनीमेशन खातिर CSS3 आ लोकल टाइटल स्टोरेज खातिर डेटा-एट्रिब्यूट के इस्तेमाल करे ला।

पोपोवर्स * के बा।

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

* टूलटिप्स के शामिल करे के जरूरत बा

अलर्ट संदेश दिहल गइल बा

अलर्ट प्लगइन एगो छोट क्लास हवे जेह में अलर्ट सभ में क्लोज फंक्शनलिटी जोड़ल जाला।

बटन के बा

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

ढहल

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

हिंडोला के बा

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

टाइपएहेड के बा

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

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

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

* प्लगइन में एनीमेशन खातिर जरूरी बा

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

मोडल के बारे में बतावल गइल बा

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

फाइल डाउनलोड करीं

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

नीचे एगो स्थिर रूप से रेंडर कइल गइल मोडल दिहल गइल बा।

लाइव डेमो बा

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

डेमो मोडल लॉन्च कइल जाव

बूटस्ट्रैप-मोडल के इस्तेमाल करत बानी

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

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

विकल्प बा

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

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

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

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

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल लॉन्च करीं </a>
  1. <div वर्ग = "मोडल छिपावे" आईडी = "माईमोडल" >
  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> के बा
हेड अप हो गइल बा! अगर रउआँ चाहत बानी कि रउआँ के मोडल इन आ आउट एनिमेट होखे, बस तत्व में एगो .fadeक्लास जोड़ीं .modal(एह के एक्शन में देखे खातिर डेमो के देखल जाय) आ bootstrap-transition.js के शामिल करीं।

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

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

मोडल के रूप में राउर सामग्री के सक्रिय करेला। एगो वैकल्पिक विकल्प स्वीकार करेला 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 कारीगर। कार्डिगन शिल्प बियर सेइटन रेडीमेड वेलिट के बा। वीएचएस चैम्ब्रे लैबोरिस टेम्पोर वेनियम के बा। एनिम मोलिट मिनी कोमोडो उल्लमको थंडरकैट्स के बा।


bootstrap-scrollspy.js के इस्तेमाल कइल जा रहल बा

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

  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. }) के बा;

विकल्प बा

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

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

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

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

फाइल डाउनलोड करीं

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

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

कच्चा डेनिम रउआ शायद इनका बारे में ना सुनले होखब जीन शॉर्ट्स ऑस्टिन। नेस्सिउंट टोफू स्टंपटाउन एलिक्वा, रेट्रो सिंथ मास्टर सफाई। मूंछ क्लिच टेम्पर, विलियम्सबर्ग कार्ल्स शाकाहारी हेल्वेटिका। 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. $ ( '# उदाहरण' ) के रूप में दिहल गइल बा। टूलटिप ( विकल्प ) के बा .

विकल्प बा

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

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

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

वस्तु संरचना के बारे में बतावल गइल बा:delay: { show: 500, hide: 100 }

हेड अप हो गइल बा! अलग-अलग टूलटिप सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

* टूलटिप के शामिल करे के जरूरत बा

फाइल डाउनलोड करीं

उदाहरण खातिर होवर पोपोवर के बा

पॉपओवर के ट्रिगर करे खातिर बटन के ऊपर माउस करीं।


bootstrap-popover.js के इस्तेमाल कइल जा रहल बा

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

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

विकल्प बा

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

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

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

वस्तु संरचना के बारे में बतावल गइल बा:delay: { show: 500, hide: 100 }

हेड अप हो गइल बा!अलग-अलग पॉपओवर सभ खातिर विकल्प सभ के वैकल्पिक रूप से डेटा एट्रिब्यूट सभ के इस्तेमाल के माध्यम से निर्दिष्ट कइल जा सके ला।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अलर्ट के बारे में बतावल गईल बा

अलर्ट प्लगइन एगो छोट क्लास हवे जेह में अलर्ट सभ में क्लोज फंक्शनलिटी जोड़ल जाला।

डाउनलोड करीं

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

अलर्ट प्लगइन नियमित अलर्ट संदेश प काम करेला, अवुरी संदेश के ब्लॉक करेला।

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

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

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

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


बूटस्ट्रैप-अलर्ट.जेएस के इस्तेमाल से

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

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

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

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

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

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

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

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

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

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

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

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

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

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

बारे में

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

फाइल डाउनलोड करीं

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

राज्य आ टॉगल खातिर बटन प्लगइन के इस्तेमाल करीं.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

बारे में

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

फाइल डाउनलोड करीं

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

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

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

एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।
एनिम परिआतुर क्लिच रिप्रेहेंडरिट, एनिम eiusmod उच्च जीवन accusamus टेरी रिचर्डसन एड स्क्वीड। 3 भेड़िया चंद्रमा officia aute, गैर कामदेव स्केटबोर्ड डोलर ब्रंच। खाद्य ट्रक क्विनोआ nesciunt लेबरम eiusmod के बा। ब्रंच 3 भेड़िया चंद्रमा टेम्पोर, सुंट एलिक्वा ओकरा पर एगो चिरई डालल स्क्वीड एकल मूल कॉफी nulla assumenda shoreditch एट। निहिल एनिम केफियेह हेल्वेटिका, शिल्प बियर लेबर वेस एंडरसन क्रेड नेसिउंट सेपिएंटे ईए प्रोइडेंट। विज्ञापन शाकाहारी अपवाद कसाई वाइस लोमो। लेगिंग occaecat शिल्प बियर खेत-से-मेज, कच्चा डेनिम सौंदर्य सिंथ nesciunt आप शायद इनके बारे में नहीं सुनले होखब accusamus श्रम टिकाऊ वीएचएस।

bootstrap-collapse.js के इस्तेमाल कइल जा रहल बा

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

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

विकल्प बा

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

बारे में

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

फाइल डाउनलोड करीं

उदाहरण

टाइपएहेड के परिणाम देखावे खातिर नीचे दिहल फील्ड में टाइप कइल शुरू करीं।


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

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

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

विकल्प बा

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

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

टाइपएहेड कार्यक्षमता वाला तत्व के रजिस्टर करे खातिर डेटा विशेषता जोड़ल जाला।

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

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

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

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