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

प्लगइन्स को व्यक्तिगत रूप से शामिल किया जा सकता है (हालांकि कुछ पर निर्भरता की आवश्यकता होती है), या सभी एक साथ। बूटस्ट्रैप.जेएस और बूटस्ट्रैप.मिन.जेएस दोनों में एक ही फाइल में सभी प्लगइन्स होते हैं।

डेटा विशेषताएँ

आप जावास्क्रिप्ट की एक भी लाइन लिखे बिना पूरी तरह से मार्कअप एपीआई के माध्यम से सभी बूटस्ट्रैप प्लगइन्स का उपयोग कर सकते हैं। यह बूटस्ट्रैप का प्रथम श्रेणी एपीआई है और प्लगइन का उपयोग करते समय आपका पहला विचार होना चाहिए।

उस ने कहा, कुछ स्थितियों में इस कार्यक्षमता को बंद करना वांछनीय हो सकता है। इसलिए, हम 'डेटा-एपीआई' के साथ नामित बॉडी पर सभी घटनाओं को अनबाइंड करके डेटा विशेषता एपीआई को अक्षम करने की क्षमता भी प्रदान करते हैं। यह इस तरह दिखता है:

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

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

$ ( 'बॉडी' )। बंद ( '.alert.data-api' )

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

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

$ ( ".btn.danger" )। बटन ( "टॉगल" )। एडक्लास ( "वसा" )

सभी विधियों को एक वैकल्पिक विकल्प ऑब्जेक्ट को स्वीकार करना चाहिए, एक स्ट्रिंग जो किसी विशेष विधि को लक्षित करती है, या कुछ भी नहीं (जो डिफ़ॉल्ट व्यवहार के साथ एक प्लगइन शुरू करती है):

$ ( "#myModal" )। मोडल () // डिफॉल्ट्स के साथ इनिशियलाइज़ किया गया                       
$ ( "#myModal" )। मोडल ({ कीबोर्ड : झूठा }) // बिना कीबोर्ड के आरंभ किया गया     
$ ( "#myModal" )। मोडल ( 'शो' ) // इनिशियलाइज़ करता है और तुरंत शो को आमंत्रित करता है                

प्रत्येक प्लगइन अपने कच्चे कंस्ट्रक्टर को एक `कंस्ट्रक्टर` संपत्ति पर भी उजागर करता है: $.fn.popover.Constructor. यदि आप एक विशेष प्लगइन इंस्टेंस प्राप्त करना चाहते हैं, तो इसे सीधे किसी तत्व से पुनर्प्राप्त करें: $('[rel=popover]').data('popover').

कोई विवाद नहीं

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

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

आयोजन

बूटस्ट्रैप अधिकांश प्लगइन की अनूठी क्रियाओं के लिए कस्टम ईवेंट प्रदान करता है। आम तौर पर, ये एक इनफिनिटिव और पिछले कृदंत रूप में आते हैं - जहां showएक घटना की शुरुआत में इनफिनिटिव (उदा।) ट्रिगर होता है, और इसका पिछला कृदंत रूप (उदा। shown) एक क्रिया के पूरा होने पर ट्रिगर होता है।

सभी अनंत घटनाएँ रोकथाम-डिफॉल्ट कार्यक्षमता प्रदान करती हैं। यह किसी क्रिया के प्रारंभ होने से पहले उसके निष्पादन को रोकने की क्षमता प्रदान करता है।

$ ( '#myModal' )। ऑन ( 'शो' , फंक्शन ( ई ) {   
    अगर (! डेटा ) वापसी ई । रोकेंडिफॉल्ट () // मोडल को दिखाए जाने से रोकता है   
})

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

सरल ट्रांज़िशन प्रभावों के लिए, अन्य JS फ़ाइलों के साथ एक बार bootstrap-transition.js शामिल करें। यदि आप संकलित (या छोटा) का उपयोग कर रहे हैं , तो इसे शामिल करने की कोई आवश्यकता नहीं है—यह पहले से मौजूद है।

बक्सों का इस्तेमाल करें

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

• मोडल में फिसलना या लुप्त होना
• फ़ेडिंग आउट टैब
• फ़ेडिंग आउट अलर्ट
• स्लाइडिंग हिंडोला फलक

उदाहरण

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

स्थिर उदाहरण

हेडर, बॉडी और फ़ुटर में क्रियाओं के सेट के साथ एक रेंडर किया गया मोडल।

<div class = "मोडल छुपाएं फीका" > 
  <div क्लास = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छिपा = "सत्य" > और समय; </बटन>    
    <h3> मोडल हैडर </h3>
  </div>
  <div class = "मोडल-बॉडी" > 
    <p> एक अच्छा शरीर... </p>
  </div>
  <div class = "मोडल-फ़ुटर" > 
    <a href = "#" वर्ग = "btn" > बंद करें </a>  
    <a href = "#" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > परिवर्तन सहेजें </a>  
  </div>
</div>

लाइव डेमो

नीचे दिए गए बटन पर क्लिक करके जावास्क्रिप्ट के माध्यम से एक मोडल टॉगल करें। यह नीचे की ओर खिसकेगा और पृष्ठ के शीर्ष से फीका हो जाएगा।

<!-- मोडल ट्रिगर करने के लिए बटन ->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > डेमो मोडल लॉन्च करें </a>    
 
<!-- मोडल -->
<div id = "myModal" वर्ग = "मोडल छिपाना फीका" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div क्लास = "मोडल-हेडर" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "मोडल" एरिया-छिपा = "सत्य" > × </बटन>    
    <h3 id = "myModalLabel" > मोडल हैडर </h3> 
  </div>
  <div class = "मोडल-बॉडी" > 
    <p> एक अच्छा शरीर... </p>
  </div>
  <div class = "मोडल-फ़ुटर" > 
    <बटन वर्ग = "बीटीएन" डेटा-खारिज = "मोडल" एरिया-छिपा = "सच" > बंद करें </ बटन>   
    <बटन वर्ग = "बीटीएन बीटीएन-प्राथमिक" > परिवर्तन सहेजें </बटन> 
  </div>
</div>

प्रयोग

डेटा विशेषताओं के माध्यम से

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

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

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

myModalजावास्क्रिप्ट की एक पंक्ति के साथ आईडी के साथ एक मोडल को कॉल करें :

$ ( '#myModal' )। मोडल ( विकल्प )

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-backdrop=""।

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

तरीकों

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

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

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

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

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

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

.मोडल ('शो')

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

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

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

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

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

आयोजन

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

$ ( '#myModal' )। ऑन ( 'हिडन' , फंक्शन () {   
  // कुछ करो…
})

उदाहरण

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

एक नवबार के भीतर

टैब के भीतर

प्रयोग

डेटा विशेषताओं के माध्यम से

data-toggle="dropdown"किसी ड्रॉपडाउन को चालू करने के लिए लिंक या बटन में जोड़ें ।

<div क्लास = "ड्रॉपडाउन" > 
  <a क्लास = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#"> ड्रॉपडाउन ट्रिगर </a>   
  < ul वर्ग = "ड्रॉपडाउन-मेनू " भूमिका = " मेनू "   
    ...
  </ul>
</div>

URL को अक्षुण्ण रखने के लिए, के data-targetबजाय विशेषता का उपयोग करें href="#"।

<div क्लास = "ड्रॉपडाउन" > 
  <a class = "ड्रॉपडाउन-टॉगल" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    ड्रॉप डाउन
    <बी क्लास = "कैरेट" </b> 
  </a>
  < ul वर्ग = "ड्रॉपडाउन-मेनू " भूमिका = " मेनू "   
    ...
  </ul>
</div>

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

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

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

विकल्प

कोई भी नहीं

तरीकों

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

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

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

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

प्रयोग

डेटा विशेषताओं के माध्यम से

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

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

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

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

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

तरीकों

.scrollspy ('ताज़ा करें')

डीओएम से तत्वों को जोड़ने या हटाने के संयोजन के साथ स्क्रॉलस्पी का उपयोग करते समय, आपको रीफ्रेश विधि को इस तरह कॉल करना होगा:

$ ( '[डेटा-जासूस = "स्क्रॉल"]' )। प्रत्येक ( फ़ंक्शन () {  
  वर $स्पाई = $ ( यह )। स्क्रॉलस्पी ( 'ताज़ा करें' )
});

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-offset=""।

आयोजन

उदाहरण टैब

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

प्रयोग

जावास्क्रिप्ट के माध्यम से टैब करने योग्य टैब सक्षम करें (प्रत्येक टैब को अलग-अलग सक्रिय करने की आवश्यकता है):

$ ( '#myTab a' )। क्लिक करें ( फ़ंक्शन ( ई ) {  
  ई . रोकथाम डिफॉल्ट ();
  $ ( यह )। टैब ( 'शो' );
})

आप अलग-अलग टैब को कई तरह से सक्रिय कर सकते हैं:

$ ( '#myTab a[href="#profile"]' )। टैब ( 'शो' ); // नाम से टैब चुनें 
$ ( '#myTab a:first' )। टैब ( 'शो' ); // पहले टैब का चयन करें 
$ ( '#myTab a:last' )। टैब ( 'शो' ); // अंतिम टैब चुनें 
$ ( '#myTab li:eq(2) a' )। टैब ( 'शो' ); // तीसरा टैब चुनें (0-अनुक्रमित) 

मार्कअप

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

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

तरीकों

$().टैब

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

<ul class = "नेव नेवी-टैब" id = "myTab" >  
  <li class = "active" ><a href = "#home" > होम </a></li>  
  <li><a href = "#profile" > प्रोफ़ाइल </a></li> 
  <li><a href = "#messages" > संदेश </a></li> 
  <li><a href = "#settings" > सेटिंग्स </a></li> 
</ul>
 
<div वर्ग = "टैब-सामग्री" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "सेटिंग" > ... </div>  
</div>
 
<स्क्रिप्ट>
  $ ( फ़ंक्शन () {  
    $ ( '#myTab a:last' )। टैब ( 'शो' );
  })
</स्क्रिप्ट>

आयोजन

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

उदाहरण

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

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

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

चार दिशाएं

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

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

प्रयोग

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

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-animation=""।

मार्कअप

<a href = "#" डेटा-टॉगल = "टूलटिप" शीर्षक = "पहला टूलटिप" > मेरे ऊपर होवर करें </a>   

तरीकों

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

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

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

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

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

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

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

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

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

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

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

टूलटिप ('नष्ट')

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

$ ( '# तत्व' )। टूलटिप ( 'नष्ट' )

उदाहरण

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

स्टेटिक पॉपओवर

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

dataपॉपओवर के रूप में दिखाया गया कोई मार्कअप जावास्क्रिप्ट और किसी विशेषता के भीतर सामग्री से उत्पन्न नहीं होता है ।

लाइव डेमो

चार दिशाएं

प्रयोग

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

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-animation=""।

मार्कअप

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

तरीकों

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

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

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

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

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

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

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

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

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

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

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

पॉपओवर ('नष्ट')

किसी तत्व के पॉपओवर को छुपाता और नष्ट करता है।

$ ( '# तत्व' )। पॉपओवर ( 'नष्ट' )

उदाहरण अलर्ट

इस प्लगइन के साथ सभी अलर्ट संदेशों में बर्खास्तगी कार्यक्षमता जोड़ें।

प्रयोग

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

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

मार्कअप

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

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

तरीकों

$ ()। अलर्ट ()

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

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

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

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

आयोजन

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

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

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

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

स्टेटफुल

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

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

सिंगल टॉगल

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

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

चेक बॉक्स

data-toggle="buttons-checkbox"btn-group पर चेकबॉक्स स्टाइल टॉगल करने के लिए जोड़ें ।

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > बायां </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > दायां </ बटन>  
</div>

रेडियो

data-toggle="buttons-radio"बीटीएन-ग्रुप पर रेडियो स्टाइल टॉगल करने के लिए जोड़ें ।

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > बायां </ बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > मध्य </बटन>  
  <बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन-प्राथमिक" > दायां </ बटन>  
</div>

प्रयोग

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

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

मार्कअप

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

विकल्प

कोई भी नहीं

तरीकों

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

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

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

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

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

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

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

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

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

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

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

के बारे में

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

* ट्रांज़िशन प्लगइन को शामिल करने की आवश्यकता है।

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

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

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne"> _    
        बंधनेवाला समूह आइटम #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body पतन इन" >  
      <div क्लास = "अकॉर्डियन-इनर" > 
        एनिम पारिअतुर क्लिच...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo"> _    
        बंधनेवाला समूह आइटम #2
      </a>
    </div>
    <div id = "collapseTwo" वर्ग = "accordion-body पतन" >  
      <div क्लास = "अकॉर्डियन-इनर" > 
        एनिम पारिअतुर क्लिच...
      </div>
    </div>
  </div>
</div>
...

आप अकॉर्डियन मार्कअप के बिना भी प्लगइन का उपयोग कर सकते हैं। किसी अन्य तत्व के विस्तार और पतन को टॉगल करने के लिए एक बटन बनाएं।

<बटन प्रकार = "बटन" वर्ग = "बीटीएन बीटीएन -खतरे" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >    
  सरल बंधनेवाला
</बटन>
 
<div id = "demo" class = "collapse in" > … </div>  

प्रयोग

डेटा विशेषताओं के माध्यम से

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

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

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

इसके साथ मैन्युअल रूप से सक्षम करें:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-parent=""।

तरीकों

पतन (विकल्प)

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

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

पतन ('टॉगल')

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

पतन ('शो')

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

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

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

आयोजन

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

$ ( '#myCollapsible' )। ऑन ( 'हिडन' , फंक्शन () {   
  // कुछ करो…
})

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

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

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

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

दूसरा थंबनेल लेबल

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

तीसरा थंबनेल लेबल

क्रैस जस्टो ओडियो, डैपिबस एसी फैसिलिसिस इन, एजेस्टास एगेट क्वाम। Donec id elit non mi porta gravida और eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

मैं ›

<div id = "myCarousel" वर्ग = "हिंडोला स्लाइड" >  
  <ol class = "हिंडोला-संकेतक" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- हिंडोला आइटम ->
  <div class = "हिंडोला-भीतरी" > 
    <div class = "एक्टिव आइटम" > … </div> 
    <div class = "आइटम" > … </div> 
    <div class = "आइटम" > … </div> 
  </div>
  <!-- हिंडोला नेविगेशन -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

प्रयोग

डेटा विशेषताओं के माध्यम से

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

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

कैरोसेल को इसके साथ मैन्युअल रूप से कॉल करें:

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

विकल्प

विकल्प डेटा विशेषताओं या JavaScriptz के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-interval=""।

तरीकों

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

कैरोसेल को वैकल्पिक विकल्पों के साथ प्रारंभ करता है objectऔर आइटम के माध्यम से साइकिल चलाना प्रारंभ करता है।

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

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

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

हिंडोला ('रोकें')

हिंडोला को आइटम के माध्यम से साइकिल चलाने से रोकता है।

हिंडोला (संख्या)

हिंडोला को एक विशेष फ्रेम (0 आधारित, एक सरणी के समान) पर साइकिल करता है।

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

पिछले आइटम के लिए साइकिल।

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

अगले आइटम के लिए साइकिल।

आयोजन

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

उदाहरण

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

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

आप autocomplete="off"डिफ़ॉल्ट ब्राउज़र मेनू को बूटस्ट्रैप टाइपहेड ड्रॉपडाउन पर प्रदर्शित होने से रोकने के लिए सेट करना चाहेंगे।

प्रयोग

डेटा विशेषताओं के माध्यम से

ऊपर दिए गए उदाहरण में दिखाए गए अनुसार टाइपहेड कार्यक्षमता वाले तत्व को पंजीकृत करने के लिए डेटा विशेषताएँ जोड़ें।

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

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

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-source=""।

तरीकों

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

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

उदाहरण

बाईं ओर सबनेविगेशन एफिक्स प्लगइन का लाइव डेमो है।

प्रयोग

डेटा विशेषताओं के माध्यम से

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

<div data-spy = "affix" data-offset-top = "200" > ... </div>  

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

जावास्क्रिप्ट के माध्यम से एफिक्स प्लगइन को कॉल करें:

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

विकल्प

विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को में जोड़ें data-, जैसा कि में है data-offset-top="200"।