व्यक्तिगत या संकलित

प्लगइन गी व्यक्तिगत रूप कन्नै शामल कीता जाई सकदा ऐ (हालांके किश गी निर्भरताएं दी लोड़ ऐ ), जां इक गै बारी च सारें गी. bootstrap.js ते bootstrap.min.js दोनें च इक गै फाइल च सारे प्लगइन्स होंदे न.

डेटा विशेषताएं गी

तुस जावास्क्रिप्ट दी इक लाइन लिखे दे बगैर सारे बूटस्ट्रैप प्लगइन्स दा शुद्ध रूप कन्नै मार्कअप एपीआई दे राहें इस्तेमाल करी सकदे ओ. एह् बूटस्ट्रैप दा पैह् ला वर्ग एपीआई ऐ ते प्लगइन दा इस्तेमाल करदे बेल्लै तुंदा पैह् ला विचार होना चाहिदा ऐ.

एह् आखदे होई, किश परिस्थितियें च इस कार्यक्षमता गी बंद करना वांछनीय होई सकदा ऐ। इसलेई, अस `'data-api'` कन्नै शरीर दे नेमस्पेस पर सब्भै घटनाएं गी अनबाइंड करियै डेटा एट्रिब्यूट एपीआई गी अक्षम करने दी समर्थ बी प्रदान करदे आं. एह् इ'यां लगदा ऐ:

$ ( 'शरीर' ) । बंद ( '.डेटा-एपीआई' ) ऐ।

वैकल्पिक रूप कन्नै, इक विशिष्ट प्लगइन गी निशाना बनाने आस्तै, बस प्लगइन दा नांऽ इक नेमस्पेस दे रूप च डेटा-एपीआई नेमस्पेस दे कन्नै इस चाल्ली शामल करो:

$ ( 'शरीर' ) । बंद ( '.अलर्ट.डेटा-एपीआई' )

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

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

$ ( ".बीटीएन.खतरा" ) ऐ। बटन ( "टॉगल" ) ऐ । addClass ( "वसा" ) ऐ।

सारे तरीकें गी इक वैकल्पिक विकल्प वस्तु, इक स्ट्रिंग जेह् ड़ी कुसै खास विधि गी लक्ष्य बनांदी ऐ, जां कुसै बी चाल्ली दी गल्ल नेईं (जेह् ड़ी डिफाल्ट व्यवहार कन्नै इक प्लगइन शुरू करदी ऐ) गी स्वीकार करना चाहिदा:

$ ( "# मेरा मोडल" ) ऐ। मोडल () // डिफ़ॉल्ट कन्नै आरंभ कीता गेआ                       
$ ( "# मेरा मोडल" ) ऐ। modal ({ keyboard : false }) // कोई कीबोर्ड दे कन्नै आरंभ कीता गेआ     
$ ( "# मेरा मोडल" ) ऐ। modal ( 'show' ) // तुरंत दिखाओ शुरू करदा ऐ ते आह्वान करदा ऐ                

हर प्लगइन इक `कंस्ट्रक्टर` गुण पर अपने कच्चे कन्स्ट्रक्टर गी बी उजागर करदा ऐ: $.fn.popover.Constructor. जेकर तुस कोई खास प्लगइन इंस्टेंस हासल करना चांह् दे ओ तां उसी सीधे कुसै तत्व थमां पुनर्प्राप्त करो: $('[rel=popover]').data('popover').

कोई टकराव नहीं

कदें-कदें होर यूआई फ्रेमवर्क कन्नै बूटस्ट्रैप प्लगइन्स दा इस्तेमाल करना जरूरी होंदा ऐ। इनें हालातें च, नेमस्पेस टक्कर कदें-कदें होई सकदी ऐ। जेकर ऐसा होंदा ऐ तां तुस .noConflictउस प्लगइन गी कॉल करी सकदे ओ जिसदा तुस मूल्य वापस करना चांह् दे ओ.

var बूटस्ट्रैपबटन = $ ऐ। एफ एन . बटन दा . noConflict () // पहले असाइन कीते गेदे मूल्य पर $.fn.button वापस करो 
$ ऐ . एफ एन . bootstrapBtn = bootstrapButton             // $ ().bootstrapBtn गी बूटस्ट्रैप कार्यक्षमता दे

घटनाएं

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

सारे अव्यय घटनाएं preventDefault फ़ंक्शनलटी प्रदान करदियां न. इस कन्नै इक कार्रवाई शुरू होने थमां पैह् ले उसदे निष्पादन गी रोकने दी समर्थता दित्ती जंदी ऐ।

$ ( '# मेरा मोडल' ) । पर ( 'दिखाओ' , फंक्शन ( ई ) {   
    अगर (! डेटा ) रिटर्न ई . preventDefault () // मोडल गी दस्सने थमां रोकदा ऐ   
}) ऐ।

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

साधारण संक्रमण प्रभावें आस्तै, इक बारी bootstrap- transition.js गी होर जेएस फाइलें दे कन्नै-कन्नै शामल करो. जेकर तुस संकलित (जां मिनीफाइड) bootstrap.js दा इस्तेमाल करा करदे ओ तां इसगी शामल करने दी लोड़ नेईं ऐ-एह् पैह् ले थमां गै ऐ.

केस दा इस्तेमाल करो

संक्रमण प्लगइन दे किश उदाहरण:

• मोडल च फिसलना जां फीका होना
• टैब बाहर फीका पड़ना
• फीका आउट अलर्ट
• हिंडोला फलक फिसलने

उदाहरण दे

मोडल सुव्यवस्थित, पर लचीले, संवाद प्रॉम्प्टें कन्नै घट्ट शा घट्ट लोड़चदी कार्यक्षमता ते स्मार्ट डिफाल्ट न।

स्थिर उदाहरण

हेडर, बॉडी, ते पाद लेख च क्रियाएं दे सेट कन्नै इक रेंडर कीता गेदा मोडल।

<div class = "मोडल छिपाना फीका" > 
  <div वर्ग = "मोडल-हेडर" > ऐ 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छुपा = "सच्चा" > × </बटन> दा    
    <h3> मोडल हेडर </h3> ऐ
  </div> दा
  <div वर्ग = "मोडल-शरीर" > ऐ 
    <p> इक महीन शरीर... </p>
  </div> दा
  <div वर्ग = "मोडल-पाद लेख" > 
    <a href = "#" वर्ग = "बीटीएन" > बंद करो </a>  
    <a href = "#" class = "btn btn-primary" > बदलावें गी बचाओ </a>  
  </div> दा
</div> दा

लाइव डेमो

निचले बटन पर क्लिक करियै जावास्क्रिप्ट दे राहें इक मोडल टॉगल करो। एह् थल्ले सरकग ते पृष्ठ दे शीर्शक थमां अंदर फीका होई जाग।

<!-- मोडल ट्रिगर करने दा बटन -->
<a href = "#myModal" भूमिका = "बटन" वर्ग = "बीटीएन" डेटा-टॉगल = "मोडल" > डेमो मोडल लॉन्च करो </a>    
 
<!-- मोडल --> ऐ
<div id = "myModal" वर्ग = "मोडल छिपाना फीका" tabindex = "-1" भूमिका = "संवाद" aria-labelledby = "myModalLabel" aria-hidden = "सच्चा" >      
  <div वर्ग = "मोडल-हेडर" > ऐ 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छुपा = "सच्चा" > × </बटन>    
    <h3 id = "myModalLabel" > मोडल हेडर </h3> 
  </div> दा
  <div वर्ग = "मोडल-शरीर" > ऐ 
    <p> इक महीन शरीर... </p>
  </div> दा
  <div वर्ग = "मोडल-पाद लेख" > 
    <button class = "btn" data-dismiss = "मोडल" aria-hidden = "सच्चा" > बंद करो </बटन>   
    <button class = "btn btn-primary" > बदलावें गी बचाओ </button> 
  </div> दा
</div> दा

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

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

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

जावास्क्रिप्ट दे जरिए

myModalजावास्क्रिप्ट दी इक लाइन कन्नै आईडी कन्नै इक मोडल गी कॉल करो :

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-backdrop="".

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

विधियां

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

तुंदी सामग्री गी मोडल दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object.

$ ( '# मेरा मोडल' ) । मोडल ({ ऐ
  कीबोर्ड : झूठा 
}) ऐ।

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

मैन्युअल रूप कन्नै इक मोडल टॉगल करदा ऐ।

$ ( '# मेरा मोडल' ) । मोडल ( 'टॉगल' ) ऐ।

.मोडल('दिखाओ') ऐ।

मैन्युअल रूप कन्नै इक मोडल खोह् लदा ऐ।

$ ( '# मेरा मोडल' ) । मोडल ( 'दिखाओ' )

.मोडल('छुपाओ') ऐ।

मैन्युअल रूप कन्नै इक मोडल छिपांदा ऐ।

$ ( '# मेरा मोडल' ) । मोडल ( 'छुपाओ' )

घटनाएं

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

$ ( '# मेरा मोडल' ) । पर ( 'छुपाया' , फंक्शन () {   
  // कुछ करो...
}) ऐ।

उदाहरण दे

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

इक नवबार दे अंदर

टैब दे अंदर

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

data-toggle="dropdown"ड्रॉपडाउन टॉगल करने लेई इक लिंक जां बटन च जोड़ो ।

<div वर्ग = "ड्रॉपडाउन" > ऐ 
  <a class = "ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" > ड्रॉपडाउन ट्रिगर </a>   
  <ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul> दा
</div> दा

data-targetURL गी बरकरार रखने आस्तै, href="#".

<div वर्ग = "ड्रॉपडाउन" > ऐ 
  <a class = "ड्रॉपडाउन-टॉगल" आईडी = "dLabel" भूमिका = "बटन" डेटा-टॉगल = "ड्रॉपडाउन" डेटा-लक्ष्य = "#" href = "/पृष्ठ.html" >      
    ड्रॉपडाउन
    <b class = "कैरेट" </b> ऐ 
  </a> दा
  <ul वर्ग = "ड्रॉपडाउन-मेनू" भूमिका = "मेनू" aria-labelledby = "dLabel" >   
    ...
  </ul> दा
</div> दा

जावास्क्रिप्ट दे जरिए

जावास्क्रिप्ट दे राहें ड्रॉपडाउन गी कॉल करो:

$ ( '.ड्रॉपडाउन-टॉगल' ) ऐ । ड्रॉपडाउन () ऐ।

विकल्प ऐ

कोई नेईं

विधियां

$ (). ड्रॉपडाउन ('टॉगल') ऐ।

दित्ते गेदे नवबार जां टैब कीते गेदे नेविगेशन आस्तै मेनू टॉगल करने आस्तै इक प्रोग्रामेटिक एपीआई।

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

स्क्रॉलस्पाई प्लगइन स्क्रॉल स्थिति दे आधार उप्पर नेव लक्ष्यें गी स्वतः अपडेट करने आस्तै ऐ। नवबार दे हेठ दित्ते गेदे इलाके गी स्क्रॉल करो ते सक्रिय वर्ग बदलदे दिक्खो। ड्रॉपडाउन उप आइटमें गी बी हाइलाइट कीता जाग।

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

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

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

जावास्क्रिप्ट दे जरिए

जावास्क्रिप्ट दे राहें स्क्रॉलस्पाई गी कॉल करो:

$ ( ' # नवबार' ) ऐ । स्क्रॉलस्पाई () ऐ।

विधियां

.scrollspy ('ताज़ा करो') ऐ।

DOM थमां तत्वें गी जोड़ने जां हटाने दे कन्नै-कन्नै scrollspy दा इस्तेमाल करदे बेल्लै तुसेंगी ताज़ा करने दी विधि गी इस चाल्ली बुलाने दी लोड़ होग:

$ ( '[डेटा-जासूस = "स्क्रॉल"]' ). हर इक ( फंक्शन () {  
  var $ जासूस = $ ( एह् ) । scrollspy ( 'ताज़ा करना' ) ऐ।
});

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-offset="".

घटनाएं

उदाहरण टैब

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

प्रयोग करना

जावास्क्रिप्ट दे राहें टैब करने योग्य टैबें गी सक्षम करो (हर टैब गी व्यक्तिगत रूप कन्नै सक्रिय करने दी लोड़ ऐ):

$ ( '# मेरा टैब ए' ). क्लिक करो ( फंक्शन ( ई ) {  
  ई . रोकनाडिफ़ॉल्ट ();
  $ ( एह् ) । टैब ( 'दिखाओ' );
}) ऐ।

तुस बक्ख-बक्ख टैबें गी केईं तरीके कन्नै सक्रिय करी सकदे ओ:

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

मार्कअप करना

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

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

विधियां

$ ().टैब दा

इक टैब तत्व ते सामग्री कंटेनर गी सक्रिय करदा ऐ। टैब च डीओएम च इक data-targetजां इक hrefकंटेनर नोड गी लक्ष्य बनाना चाहिदा ऐ.

<ul वर्ग = "नव नव-टैब" आईडी = "मेरा टैब" >  
  <li class = "सक्रिय" ><a href = "#घर" > घर </a></li>  
  <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> 
  <li><a href = "#संदेश" > संदेश </a></li> 
  <li><a href = "#सेटिंग्स" > सेटिंग्स </a></li> 
</ul> दा
 
<div वर्ग = "टैब-सामग्री" > 
  <div class = "टैब-पैन सक्रिय" आईडी = "घर" > ... </div>  
  <div class = "टैब-पैन" आईडी = "प्रोफाइल" > ... </div>  
  <div class = "टैब-पैन" आईडी = "संदेश" > ... </div>  
  <div वर्ग = "टैब-पैन" आईडी = "सेटिंग्स" > ... </div>  
</div> दा
 
<स्क्रिप्ट> दा
  $ ( फंक्शन () { ऐ।  
    $ ( '# मेरा टैब ए: आखरी' ). टैब ( 'दिखाओ' );
  }) ऐ।
</script> दा

घटनाएं

$ ( 'ए [डेटा-टॉगल = "टैब"]' ). पर ( 'दिखाया' , फंक्शन ( ई ) {   
  ई . लक्ष्य // सक्रिय टैब
  ई . relatedTarget // पिछले टैब
}) ऐ।

उदाहरण दे

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

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

टूलटिप्स दिखने लेई निचले लिंक उप्पर होवर करो:

चार दिशाएं

इनपुट समूहें च टूलटिप्स

बूटस्ट्रैप इनपुट समूहें कन्नै टूलटिप्स ते पॉपओवरें दा इस्तेमाल करदे बेल्लै, तुसेंगी containerअनचाहे दुष्प्रभावें थमां बचने आस्तै (नीचे दस्तावेज कीता गेदा) विकल्प सेट करना होग.

प्रयोग करना

जावास्क्रिप्ट दे राहें टूलटिप गी ट्रिगर करो:

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-animation="".

मार्कअप करना

<a href = "#" data-toggle = "टूलटिप" title = "पहला टूलटिप" > मेरे उप्पर मंडराना </a>   

विधियां

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

इक तत्व संग्रह कन्नै इक टूलटिप हैंडलर गी संलग्न करदा ऐ।

.टूलटिप ('दिखाओ') ऐ।

इक तत्व दी टूलटिप दा खुलासा करदा ऐ।

$ ( '# तत्व' ) ऐ । टूलटिप ( 'दिखाओ' )

.टूलटिप('छुपाओ') ऐ।

इक तत्व दी टूलटिप गी छुपांदा ऐ।

$ ( '# तत्व' ) ऐ । टूलटिप ( 'छुपाओ' )

.टूलटिप ('टॉगल') ऐ।

इक तत्व दी टूलटिप गी टॉगल करदा ऐ।

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

.tooltip('नष्ट करना')

इक तत्व दे टूलटिप गी छुपांदा ऐ ते नष्ट करदा ऐ।

$ ( '# तत्व' ) ऐ । tooltip ( 'नष्ट करना' )

उदाहरण दे

हाउसिंग सेकेंडरी जानकारी आस्तै कुसै बी तत्व च सामग्री दे छोटे ओवरले गी जोड़ो, जि’यां आईपैड पर। पोपोवर गी ट्रिगर करने लेई बटन उप्पर माउस करो। टूलटिप गी शामल करने दी लोड़ ऐ।

स्थिर पोपोवर

चार विकल्प उपलब्ध न: ऊपर, दाएं, थल्ले, ते बाएं संरेखित।

dataजावास्क्रिप्ट ते इक विशेषता दे अंदर सामग्री थमां पैदा कीते गेदे पॉपओवर दे रूप च कोई बी मार्कअप नेईं दस्सेआ गेआ ऐ.

लाइव डेमो

चार दिशाएं

प्रयोग करना

जावास्क्रिप्ट दे राहें पोपोवर सक्षम करो:

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-animation="".

मार्कअप करना

प्रदर्शन कारणें कन्नै, टूलटिप ते पोपोवर डेटा-एपीआईएस ऑप्ट इन न जेकर तुस उंदा इस्तेमाल करना चांह् दे ओ तां बस इक चयनकर्ता विकल्प निर्दिश्ट करो.

विधियां

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

इक तत्व संग्रह आस्तै पोपोवरें गी आरंभ करदा ऐ।

.popover('दिखाओ') ऐ।

इक तत्वों पोपोवर दा खुलासा करदा ऐ।

$ ( '# तत्व' ) ऐ । पोपोवर ( 'दिखाओ' )

.popover('छुपाओ') ऐ।

इक तत्व पोपोवर छुपांदा ऐ।

$ ( '# तत्व' ) ऐ । पोपोवर ( 'छुपाओ' ) ऐ।

.popover('टॉगल') ऐ।

इक तत्वों पॉपओवर टॉगल करदा ऐ।

$ ( '# तत्व' ) ऐ । पोपोवर ( 'टॉगल' ) ऐ।

.popover('नष्ट करना')

इक तत्व दे पोपोवर गी छुपांदा ऐ ते नष्ट करदा ऐ।

$ ( '# तत्व' ) ऐ । पोपोवर ( 'नष्ट करना' )

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

इस प्लगइन कन्नै सारे अलर्ट संदेशें च खारिज फ़ंक्शनलटी जोड़ो.

प्रयोग करना

जावास्क्रिप्ट दे राहें इक अलर्ट गी खारिज करने गी सक्षम करो:

$ ( ".अलर्ट" ) ऐ। अलर्ट करना ()

मार्कअप करना

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

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

विधियां

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

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

.alert('बंद करो') ऐ।

इक अलर्ट बंद करदा ऐ।

$ ( ".अलर्ट" ) ऐ। अलर्ट ( 'बंद करो' )

घटनाएं

बूटस्ट्रैप दी अलर्ट क्लास अलर्ट फ़ंक्शनलटी च हुक करने आस्तै किश घटनाएं गी उजागर करदी ऐ।

$ ( '# मेरा-अलर्ट' ). बाइंड ( 'बंद' , फंक्शन () {   
  // कुछ करो...
}) ऐ।

उदाहरण दे इस्तेमाल करदे न

बटन दे नाल होर करो। नियंत्रण बटन राज्यें गी दस्सदा ऐ जां टूलबार जनेह् होर घटकें आस्तै बटनें दे समूह बनाओ.

स्टेटफुल दा

data-loading-text="Loading..."इक बटन पर इक लोडिंग स्थिति दा उपयोग करने लेई जोड़ो ।

<button type = "button" class = "btn btn-primary" data-loading-text = "लोड होआ करदा ऐ ..." > लोड होआ करदा ऐ स्थिति </button>   

सिंगल टॉगल करना

data-toggle="button"इक बटन पर टॉगलिंग गी सक्रिय करने लेई जोड़ो ।

<बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" डेटा-टॉगल = "बटन" > इकल टॉगल </बटन>   

चेकबॉक्स दा

data-toggle="buttons-checkbox"btn-group पर चेकबॉक्स शैली टॉगल करने आस्तै जोड़ो .

<div वर्ग = "बीटीएन-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > बाएं </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > दाएं </बटन>  
</div> दा

रेडियो

data-toggle="buttons-radio"btn-group पर रेडियो शैली टॉगलिंग लेई जोड़ो ।

<div वर्ग = "बीटीएन-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > बाएं </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > दाएं </बटन>  
</div> दा

प्रयोग करना

जावास्क्रिप्ट दे राहें बटन सक्षम करो:

$ ( '.नव-टैब्स' ) ऐ। बटन दा ()

मार्कअप करना

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

विकल्प ऐ

कोई नेईं

विधियां

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

पुश स्टेट टॉगल करदा ऐ। बटन गी एह् दिक्खने गी दिंदा ऐ जे एह् सक्रिय होई गेदा ऐ।

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

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

बटन स्थिति गी लोड करने पर सेट करदा ऐ - बटन गी अक्षम करदा ऐ ते पाठ गी लोड करने च पाठ स्वैप करदा ऐ. डेटा विशेषता दा उपयोग करदे होई बटन तत्व पर पाठ लोड करने गी परिभाशत कीता जाना चाहिदा data-loading-text.

<बटन प्रकार = "बटन" वर्ग = "बीटीएन" डेटा-लोडिंग-पाठ = "सामान लोड करना ..." > ... </बटन>    

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

बटन स्थिति गी रीसेट करदा ऐ - पाठ गी मूल पाठ च स्वैप करदा ऐ।

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

बटन स्थिति गी रीसेट करदा ऐ - पाठ गी कुसै बी डेटा परिभाशत पाठ स्थिति च स्वैप करदा ऐ।

<बटन प्रकार = "बटन" वर्ग = "बीटीएन" डेटा-पूरा-पाठ = "समाप्त!" > ... </बटन> दा    
<स्क्रिप्ट> दा
  $ ( '.बीटीएन' ) ऐ। बटन ( 'पूरा' ) ऐ।
</script> दा

तकरीबन

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

* संक्रमण प्लगइन गी शामल करने दी लोड़ ऐ।

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

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

<div वर्ग = "अकॉर्डियन" आईडी = "अकॉर्डियन2" >  
  <div वर्ग = "अकॉर्डियन-समूह" > 
    <div class = "अकॉर्डियन-शीर्षक" > 
      <a class = "अकॉर्डियन-टॉगल" डेटा-टॉगल = "collapse" डेटा-पैरेंट = "# accordion2" href = "#collapseOne" >    
        संकुचित समूह आइटम # 1
      </a> दा
    </div> दा
    <div id = "collapseOne" class = "अकॉर्डियन-शरीर च ढहना" >  
      <div वर्ग = "अकॉर्डियन-आंतरिक" > 
        एनिम परियातुर क्लिच...
      </div> दा
    </div> दा
  </div> दा
  <div वर्ग = "अकॉर्डियन-समूह" > 
    <div class = "अकॉर्डियन-शीर्षक" > 
      <a class = "अकॉर्डियन-टॉगल" डेटा-टॉगल = "collapse" डेटा-पैरेंट = "# accordion2" href = "#collapseTwo" >    
        संकुचित समूह आइटम # 2
      </a> दा
    </div> दा
    <div id = "collapseTwo" वर्ग = "अकॉर्डियन-शरीर ढहना" >  
      <div वर्ग = "अकॉर्डियन-आंतरिक" > 
        एनिम परियातुर क्लिच...
      </div> दा
    </div> दा
  </div> दा
</div> दा
...

तुस प्लगइन दा इस्तेमाल बिना अकॉर्डियन मार्कअप दे बी करी सकदे ओ। इक बटन गी कुसै होर तत्व दे विस्तार ते संकुचन गी टॉगल करो।

<बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-खतरा" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >    
  साधारण ढहने योग्य
</बटन> दा
 
<div id = "डेमो" वर्ग = "में ढहना" > ... </div>  

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

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

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

जावास्क्रिप्ट दे जरिए

कन्नै मैन्युअल रूप कन्नै सक्षम करो:

$ ( ".संकुचित" ) ऐ। ढहना () ऐ।

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-parent="".

विधियां

.collapse(विकल्प) ऐ।

तुंदी सामग्री गी इक संकुचित तत्व दे रूप च सक्रिय करदा ऐ। इक वैकल्पिक विकल्प स्वीकार करदा ऐ object.

$ ( '# मेरा संकुचित करने योग्य' ). ढहना ({
  टॉगल करना : झूठा 
}) ऐ।

.collapse('टॉगल') ऐ।

इक संकुचित तत्व गी दस्से गेदे जां छिपाने आस्तै टॉगल करदा ऐ।

.collapse('दिखाओ') ऐ।

इक संकुचित तत्व दस्सदा ऐ।

.collapse('छुपाओ') ऐ।

इक संकुचित तत्व गी छुपांदा ऐ।

घटनाएं

बूटस्ट्रैप दा पतन वर्ग पतन कार्यक्षमता च हुक करने आस्तै किश घटनाएं गी उजागर करदा ऐ.

$ ( '# मेरा संकुचित करने योग्य' ). पर ( 'छुपाया' , फंक्शन () {   
  // कुछ करो...
}) ऐ।

उदाहरण हिंडोला

हेठ दित्ती गेदी स्लाइड शो हिंडोला जनेह् तत्वें दे माध्यम कन्नै साइकिलिंग आस्तै इक जेनेरिक प्लगइन ते घटक दस्सदा ऐ।

पैह्ला थंबनेल लेबल

क्रास जस्टो ओडियो, डैपिबस एसी फैसिलिस इन, एगेस्तास एगेट क्वाम। डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस। नुल्लम आईडी डोलोर आईडी निभ ultrices vehicula उत आईडी अभिजात वर्ग।

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ऐ › ऐ

<div आईडी = "myCarousel" वर्ग = "हिंडोला स्लाइड" >  
  <ol class = "हिंडोला-संकेतक" > 
    <li data-target = "#myCarousel" डेटा-स्लाइड-टू = "0" वर्ग = "सक्रिय" ></li>   
    <li डेटा-लक्ष्य = "# myCarousel" डेटा-स्लाइड-टू = "1" ></li>  
    <li डेटा-लक्ष्य = "# myCarousel" डेटा-स्लाइड-टू = "2" ></li>  
  </ol> दा
  <!-- हिंडोला आइटम -->
  <div वर्ग = "हिंडोला-आंतरिक" > 
    <div वर्ग = "सक्रिय आइटम" > ... </div> 
    <div वर्ग = "आइटम" > ... </div> ऐ 
    <div वर्ग = "आइटम" > ... </div> ऐ 
  </div> दा
  <!-- हिंडोला नव -->
  <a class = "हिंडोला-नियंत्रण बाएं" href = "# myCarousel" डेटा-स्लाइड = "पिछला" > ‹ </a> दा   
  <a class = "हिंडोला-नियंत्रण सही" href = "# myCarousel" डेटा-स्लाइड = "अगला" > › </a> दा   
</div> दा

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

हिंडोला दी स्थिति गी आसानी कन्नै नियंत्रत करने लेई डेटा विशेषताएं दा उपयोग करो। data-slideकीवर्ड गी स्वीकार करदा ऐ prevजां next, जेह् ड़ा इसदी मौजूदा स्थिति दे सापेक्ष स्लाइड स्थिति गी बदलदा ऐ. वैकल्पिक रूप कन्नै, data-slide-toहिंडोला गी इक कच्ची स्लाइड सूचकांक पास करने आस्तै इस्तेमाल करो data-slide-to="2", जेह् ड़ी स्लाइड स्थिति गी इक खास सूचकांक कन्नै शुरू होने पर कूददी ऐ 0.

जावास्क्रिप्ट दे जरिए

हिंडोला गी मैन्युअल रूप कन्नै इस कन्नै कॉल करो:

$ ( '.हिंडोला' ) ऐ। हिंडोला () ऐ।

विकल्प ऐ

विकल्पें गी डेटा विशेषताएं जां जावास्क्रिप्ट्ज दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-interval="".

विधियां

.हिंडोला(विकल्प) ऐ।

इक वैकल्पिक विकल्पें कन्नै हिंडोला गी objectशुरू करदा ऐ ते आइटमें दे माध्यम कन्नै साइकिल चलाना शुरू करदा ऐ।

$ ( '.हिंडोला' ) ऐ। हिंडोला ({
  अंतराल : 2000 दा 
}) ऐ।

.हिंडोला('चक्र') ऐ।

हिंडोला आइटमें दे माध्यम कन्नै बाएं थमां दाएं चक्कर लांदा ऐ।

.हिंडोला('विराम') ऐ।

आइटम दे माध्यम कन्नै हिंडोला गी साइकिल चलाने थमां रोकदा ऐ।

.हिंडोला(नंबर) ऐ।

हिंडोला गी इक खास फ्रेम (0 आधारत, इक सरणी दे समान) च चक्र करदा ऐ।

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

पिछले आइटम गी चक्र करदा ऐ।

.हिंडोला('अगला') ऐ।

अगली आइटम तक चक्र।

घटनाएं

बूटस्ट्रैप दी हिंडोला वर्ग हिंडोला कार्यक्षमता च हुक करने आस्तै दो घटनाएं गी उजागर करदा ऐ।

मसाल

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

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

तुस autocomplete="off"बूटस्ट्रैप टाइप-हेड ड्रॉपडाउन उप्पर डिफाल्ट ब्राउज़र मेनू गी दिक्खने थमां रोकने आस्तै सेट करना चांह् दे ओ.

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

टाइप-हेड फ़ंक्शनलटी कन्नै इक तत्व गी रजिस्टर करने लेई डेटा विशेषताएं गी जोड़ो जिऱयां उप्पर दित्ते गेदे उदाहरन च दिक्खेआ गेआ ऐ।

जावास्क्रिप्ट दे जरिए

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

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

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-source="".

विधियां

.typeahead(विकल्प) ऐ।

इक टाइप-हेड कन्नै इक इनपुट गी आरंभ करदा ऐ।

मसाल

बक्खी दा सबनेविगेशन एफिक्स प्लगइन दा इक लाइव डेमो ऐ।

प्रयोग करना

डेटा विशेषताएं दे माध्यम कन्नै

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

<div डेटा-जासूस = "अनुबंध" डेटा-ऑफसेट-शीर्ष = "200" > ... </div>  

जावास्क्रिप्ट दे जरिए

जावास्क्रिप्ट दे राहें एफिक्स प्लगइन गी कॉल करो:

$ ( ' # नवबार' ) ऐ । चिपकना () ऐ।

विकल्प ऐ

विकल्पें गी डेटा एट्रिब्यूट जां जावास्क्रिप्ट दे राहें पास कीता जाई सकदा ऐ। डेटा विशेषताएं आस्तै, विकल्प नांऽ गी data-, च जोड़ो , जिऱयां data-offset-top="200".