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

प्लगिन् व्यक्तिगतरूपेण (यद्यपि केषाञ्चन आश्रयाणां आवश्यकता अस्ति), अथवा सर्वे एकदा एव समाविष्टाः भवितुम् अर्हन्ति । bootstrap.js तथा bootstrap.min.js इत्येतयोः द्वयोः अपि एकस्मिन् सञ्चिकायां सर्वाणि प्लगिन्स् सन्ति ।

दत्तांशगुणाः

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा भवान् सर्वान् Bootstrap प्लगिन् विशुद्धतया मार्कअप एपिआइ मार्गेण उपयोक्तुं शक्नोति । इदं Bootstrap इत्यस्य प्रथमवर्गस्य API अस्ति तथा च प्लगिन् इत्यस्य उपयोगं कुर्वन् भवतः प्रथमः विचारः भवितुम् अर्हति ।

तत् उक्तं, केषुचित् परिस्थितिषु एतत् कार्यं निष्क्रियं कर्तुं इष्टं भवेत् । अतः, वयं `'data-api'` इत्यनेन सह नामस्थानं कृत्वा शरीरे सर्वाणि घटनानि अनबाइण्ड् कृत्वा data attribute API इत्येतत् अक्षमीकरणस्य क्षमताम् अपि प्रदामः । एतत् एवं दृश्यते-

$ ( 'शरीर' ) । off ( '.डाटा-अपि' ) .

वैकल्पिकरूपेण, विशिष्टं प्लगिन् लक्ष्यं कर्तुं, केवलं प्लगिन् नाम नामस्थानरूपेण data-api नामस्थानेन सह एतादृशं समावेशयन्तु:

$ ( 'शरीर' ) । off ( '.सचेतक.दत्तांश-अपि' ) .

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

वयम् अपि मन्यामहे यत् भवान् सर्वान् Bootstrap प्लगिन्स् केवलं जावास्क्रिप्ट् एपिआइ मार्गेण उपयोक्तुं समर्थः भवेत् । सर्वे सार्वजनिक एपिआइ एकाः, श्रृङ्खलायोग्याः पद्धतयः सन्ति, तथा च कार्यं कृतं संग्रहं प्रत्यागच्छन्ति ।

$ ( ".btn.खतरा" ). बटन ( "टॉगल" ). addClass ( "वसा" ) .

सर्वैः विधिभिः वैकल्पिकविकल्पवस्तुं, एकं स्ट्रिंग् यत् विधिविशेषं लक्ष्यते, अथवा किमपि न (यत् पूर्वनिर्धारितव्यवहारेन सह प्लगिन् आरभते) स्वीकुर्वीत:

$ ( "# मेरामोडल" ). modal () // पूर्वनिर्धारितों के साथ आरंभ किया गया                       
$ ( "# मेरामोडल" ). modal ({ keyboard : false }) // कीबोर्ड के साथ आरंभ किया गया     
$ ( "# मेरामोडल" ). modal ( 'show' ) // तुरंत दिखाएँ आरंभ करता है एवं आह्वान करता है                

प्रत्येकं प्लगिन् अपि `Constructor` गुणस्य उपरि स्वस्य कच्चा कन्स्ट्रक्टर् उजागरयति: $.fn.popover.Constructor. यदि भवान् कञ्चन विशेषं प्लगिन् उदाहरणं प्राप्तुम् इच्छति तर्हि तत् प्रत्यक्षतया कस्मात् तत्त्वात् पुनः प्राप्तुम् इच्छति: $('[rel=popover]').data('popover').

न द्वन्द्वः

कदाचित् अन्यैः UI frameworks इत्यनेन सह Bootstrap plugins इत्यस्य उपयोगः आवश्यकः भवति । एतेषु परिस्थितिषु नामस्थानस्य टकरावः यदा कदा भवितुं शक्नुवन्ति । यदि एतत् भवति तर्हि भवान् .noConflictयस्य प्लगिन् इत्यस्य मूल्यं पुनः प्रत्यागन्तुं इच्छति तत् आह्वयितुं शक्नोति ।

var बूटस्ट्रैपबटन = $ . fn . बटन . noConflict () // पूर्वनिर्धारित मान को $.fn.button वापस करें 
$ . fn . bootstrapBtn = bootstrapButton             // $ ().bootstrapBtn को बूटस्ट्रैप कार्यक्षमता दे

घटनाः

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

सर्वाणि अव्ययघटनानि preventDefault कार्यक्षमतां प्रदास्यन्ति । एतेन क्रियायाः आरम्भात् पूर्वं निष्पादनं निवारयितुं क्षमता प्राप्यते ।

$ ( '# मेरामोडल' ). on ( 'दर्शन' , फंक्शन ( ई ) { .   
    if (! data ) return ई . preventDefault () // मोडल को दिखाने से रोकता है   
}) इति ।

संक्रमणानां विषये

सरलसंक्रमणप्रभावानाम् कृते, अन्येषां JS सञ्चिकानां पार्श्वे एकवारं bootstrap-transition.js इत्येतत् समावेशयन्तु । यदि भवान् संकलितं (अथवा लघुकृतं) bootstrap.js इत्यस्य उपयोगं करोति तर्हि एतत् समावेशयितुं आवश्यकता नास्ति—इदं पूर्वमेव अस्ति ।

प्रयोग केस

संक्रमणप्लगिन् इत्यस्य कतिचन उदाहरणानि :

• मोडल में स्खलन या फीकापन
• ट्याब्स् बहिः फीका भवति
• फीका आउट अलर्ट
• स्लाइडिंग हिंडोला फलक

उदाहरणानि

मोडल्स् सुव्यवस्थिताः, परन्तु लचीलाः, न्यूनतम-आवश्यक-कार्यक्षमतायाः स्मार्ट-पूर्वनिर्धारित-सहिताः संवाद-प्रोम्प्ट् भवन्ति ।

स्थिर उदाहरण

पादलेखे शीर्षकं, शरीरं, क्रियासमूहः च सह रेण्डर्ड् मोडल् ।

<div class = "मोडल छिपाएँ फीका" > 
  <div वर्ग = "मोडल-शीर्षक" > 
    <बटन प्रकार = "बटन" वर्ग = "बंद करें" डेटा-निराकरण = "मोडल" aria-hidden = "सत्य" > × </बटन> इति    
    <h3> मोडल शीर्षक </h3>
  </div> इति
  <div class = "मोडल-शरीर" > 
    <p> एकं सूक्ष्मशरीरं... </p>
  </div> इति
  <div class = "मोडल-पाद लेख" > 
    <a href = "#" वर्ग = "btn" > बन्द करें </a>  
    <a href = "#" class = "btn btn-primary" > परिवर्तनं रक्षतु </a>  
  </div> इति
</div> इति

लाइव डेमो

अधोलिखितं बटन् नुत्वा जावास्क्रिप्ट् मार्गेण एकं मोडल् टॉग् कुर्वन्तु । पृष्ठस्य उपरितः अधः स्लाइड् कृत्वा क्षीणं भविष्यति ।

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

प्रयोगः

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

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

<button type = "बटन" data-toggle = "मोडल" data-target = "#myModal" > मोडल प्रारम्भ करें </button>   

जावास्क्रिप्ट् मार्गेण

myModalजावास्क्रिप्ट् इत्यस्य एकपङ्क्तौ id इत्यनेन सह मोडल् आह्वयन्तु :

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-backdrop=""।

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

विधियाँ

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

भवतः सामग्रीं मोडलरूपेण सक्रियं करोति। एकं वैकल्पिकं विकल्पं स्वीकुर्वति object.

$ ( '# मेरामोडल' ). मोडल ({
  कीलफलकम् : false 
}) इति ।

.modal('टॉगल') .

एकं मोडलं मैन्युअल् रूपेण टॉगल करोति।

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

.modal('दर्शितुम्') .

मैन्युअल् रूपेण एकं मोडल् उद्घाटयति।

$ ( '# मेरामोडल' ). मोडल ( 'दर्शन' ) .

.मोडल('गोपन') .

एकं मोडलं मैन्युअल् रूपेण गोपयति।

$ ( '# मेरामोडल' ). मोडल ( 'गोपनीय' ) .

घटनाः

बूटस्ट्रैप् इत्यस्य मोडलवर्गः मोडलकार्यक्षमतायां हुक् करणाय कतिपयानि घटनानि उजागरयति ।

$ ( '# मेरामोडल' ). on ( 'गुप्त' , फंक्शन () { .   
  // किमपि कुरुत...
}) इति ।

उदाहरणानि

एतेन सरलेन प्लगिन् इत्यनेन प्रायः किमपि मध्ये ड्रॉप् डाउन मेनू योजयन्तु, यत्र navbar, tabs, pills च सन्ति ।

एक नवबार के अन्दर

ट्याब्स् अन्तः

प्रयोगः

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

data-toggle="dropdown"एकं ड्रॉप् डाउन् टॉग्ल् कर्तुं लिङ्क् अथवा बटन् मध्ये योजयन्तु ।

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

URLs अक्षुण्णानि स्थापयितुं, इत्यस्य data-targetस्थाने विशेषतायाः उपयोगं कुर्वन्तु href="#"।

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

जावास्क्रिप्ट् मार्गेण

जावास्क्रिप्ट् मार्गेण ड्रॉप्डाउन्स् आह्वयन्तु:

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

विकल्पाः

न कश्चित्

विधियाँ

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

दत्तस्य नवबारस्य अथवा ट्याब्ड् नेविगेशनस्य कृते मेनू-टोग्लिंग् कृते एकः प्रोग्रामेटिकः api ।

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

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है। navbar इत्यस्य अधः क्षेत्रं स्क्रॉल कृत्वा सक्रियवर्गस्य परिवर्तनं पश्यन्तु । ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति।

प्रयोगः

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

स्वस्य topbar नेविगेशन मध्ये scrollspy व्यवहारं सहजतया योजयितुं, केवलं तस्मिन् data-spy="scroll"तत्त्वे योजयन्तु यस्मिन् भवन्तः जासूसी कर्तुम् इच्छन्ति (अधिकांशतः एतत् शरीरं स्यात्) तथा च data-target=".navbar"कस्य nav इत्यस्य उपयोगं कर्तव्यमिति चयनं कुर्वन्तु भवान् घटकेन सह scrollspy इत्यस्य उपयोगं कर्तुम् इच्छति .nav।

<body data-spy = "स्क्रॉल" data-target = ".नवबार" > ... </body>  

जावास्क्रिप्ट् मार्गेण

जावास्क्रिप्ट् मार्गेण स्क्रॉलस्पायं आह्वयन्तु:

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

विधियाँ

.scrollspy('ताजा') .

DOM तः एलिमेण्ट्स् योजयितुं वा निष्कासयितुं वा सह scrollspy इत्यस्य उपयोगं कुर्वन् भवद्भिः refresh मेथड् इत्येतत् एवं आह्वयितुं आवश्यकं भविष्यति:

$ ( '[डेटा-जासूस = "स्क्रॉल"]' ). प्रत्येकं ( कार्यम् () { .  
  var $ गुप्तचर = $ ( यह ). scrollspy ( 'ताजगी' ) .
});

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset=""।

घटनाः

उदाहरण ट्याब्स्

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

प्रयोगः

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

$ ( '# माईटैब क' ). क्लिक करें ( फंक्शन ( ई ) { .  
  ङ . preventपूर्वनिर्धारित ();
  $ ( इदम् ). tab ( 'दर्शितुम्' );
}) इति ।

भवान् व्यक्तिगत ट्याब्स् अनेकधा सक्रियीकरणं कर्तुं शक्नोति:

$ ( '#myTab a[href="#प्रोफाइल"]' ). tab ( 'दर्शितुम्' ); // नाम से टैब चुनें 
$ ( '# myTab एक: प्रथम' ). tab ( 'दर्शितुम्' ); // प्रथम टैब का चयन करें 
$ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' ); // अन्तिम टैब का चयन करें 
$ ( '# myTab li: eq (2) क' ). tab ( 'दर्शितुम्' ); // तृतीय टैब का चयन करें (0-indexed) 

मार्कअप

data-toggle="tab"केवलं निर्दिष्टं कृत्वा अथवा data-toggle="pill"कस्यचित् तत्त्वस्य उपरि किमपि जावास्क्रिप्ट् लिखित्वा विना ट्याब् अथवा पिल् नेविगेशनं सक्रियं कर्तुं शक्नुवन्ति । navट्याब् मध्ये and nav-tabsक्लास् योजयित्वा ulBootstrap ट्याब् स्टाइलिंग् प्रयुक्तं भविष्यति ।

<ul class = "नव नव-टैब्स" > 
  <li><a href = "#home" data-toggle = "टैब" > गृहम् </a></li>  
  <li><a href = "#प्रोफाइल" data-toggle = "टैब" > प्रोफाइल </a></li>  
  <li><a href = "#messages" data-toggle = "टैब" > सन्देशाः </a></li>  
  <li><a href = "#सेटिंग्स्" data-toggle = "टैब" > सेटिंग्स् </a></li>  
</ul> इति

विधियाँ

$ ().टैब

एकं ट्याब् एलिमेण्ट् तथा सामग्रीपात्रं सक्रिययति । ट्याब् मध्ये DOM मध्ये एकं पात्रं नोड् लक्ष्यं कृत्वा एकं data-targetवा एकं वा भवितव्यम् ।href

<ul वर्ग = "नव नव-टैब" id = "myTab" >  
  <li class = "सक्रिय" ><a href = "#home" > गृहम् </a></li>  
  <li><a href = "#प्रोफाइल" > प्रोफाइल </a></li> 
  <li><a href = "#messages" > सन्देशाः </a></li> 
  <li><a href = "#सेटिंग्स्" > सेटिंग्स् </a></li> 
</ul> इति
 
<div class = "टैब-सामग्री" > 
  <div class = "टैब-पैन सक्रिय" id = "गृह" > ... </div>  
  <div class = "टैब-पैन" id = "प्रोफाइल" > ... </div>  
  <div class = "टैब-पैन" id = "सन्देशाः" > ... </div>  
  <div class = "टैब-पैन" id = "सेटिंग्स्" > ... </div>  
</div> इति
 
<लिपि> इति
  $ ( फंक्शन () { .  
    $ ( '# myTab एक: अन्तिम' ). tab ( 'दर्शितुम्' );
  }) इति ।
</script> इति

घटनाः

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

उदाहरणानि

जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tipsy प्लगइन द्वारा प्रेरित; Tooltips एकं अद्यतनं संस्करणम् अस्ति, यत् चित्रेषु न अवलम्बते, एनिमेशनस्य कृते CSS3 इत्यस्य उपयोगं करोति, स्थानीयशीर्षकभण्डारणार्थं च data-attributes इत्यस्य उपयोगं करोति ।

कार्यप्रदर्शनकारणात्, tooltip तथा popover data-apis opt in भवन्ति, अर्थात् भवान् स्वयमेव तान् आरभणीयम् .

उपकरणसूचनानि द्रष्टुं अधोलिङ्कानि उपरि माउसं कुर्वन्तु:

चत्वारि दिशः

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

Bootstrap इनपुट् समूहैः सह टूल्टिप्स तथा पोपोवर्स् इत्यस्य उपयोगं कुर्वन्, अवांछितदुष्प्रभावान् containerपरिहरितुं भवद्भिः (अधः दस्तावेजितं) विकल्पं सेट् कर्तव्यं भविष्यति ।

प्रयोगः

जावास्क्रिप्ट् मार्गेण टूलटिप् ट्रिगरं कुर्वन्तु:

$ ( '# उदाहरण' ). tooltip ( विकल्पाः ) .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

मार्कअप

<a href = "#" data-toggle = "उपकरणटिप्पणी" title = "प्रथमं साधनटिप्पणी" > मम उपरि मण्डुमं कुरुत </a>   

विधियाँ

$ ().उपकरणटिप (विकल्प) .

एलिमेण्ट्-सङ्ग्रहे टूल्टिप्-हन्डलर् संलग्नं करोति ।

.tooltip('दर्शितुम्') .

एकस्य तत्त्वस्य टूल्टिप् प्रकाशयति ।

$ ( '# तत्व' ). tooltip ( 'दर्शितुम्' ) .

.tooltip('गोपन') .

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति ।

$ ( '# तत्व' ). tooltip ( 'गोपनीयम्' ) .

.tooltip('टॉगल') .

कस्यचित् एलिमेण्ट् इत्यस्य टूल्टिप् टॉग्ल् करोति ।

$ ( '# तत्व' ). tooltip ( 'टॉगल' ) .

.tooltip('नाश करना')

कस्यचित् तत्त्वस्य टूल्टिप् गोपयति, नष्टं च करोति ।

$ ( '# तत्व' ). tooltip ( 'नाश करना' ) .

उदाहरणानि

गौणसूचनायाः आवासार्थं कस्मिन् अपि तत्त्वे iPad इत्यत्र इव सामग्रीयाः लघु-आच्छादनानि योजयन्तु । पोपोवरं प्रेरयितुं बटनस्य उपरि माउसं कुर्वन्तु। Tooltip इत्येतत् समाविष्टं कर्तुं आवश्यकम् ।

स्थिर पोपोवर

चत्वारः विकल्पाः उपलभ्यन्ते : उपरि, दक्षिणं, अधः, वामं च संरेखितम् ।

Popovers इति दर्शितं कोऽपि मार्कअपः जावास्क्रिप्ट् तः dataविशेषणस्य अन्तः सामग्री च उत्पद्यते ।

लाइव डेमो

चत्वारि दिशः

प्रयोगः

जावास्क्रिप्ट् मार्गेण popovers सक्षमं कुर्वन्तु:

$ ( '# उदाहरण' ). popover ( विकल्पाः ) .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-animation=""।

मार्कअप

कार्यप्रदर्शनकारणात्, Tooltip तथा Popover data-apis इत्येतयोः विकल्पः अस्ति यदि भवान् तान् उपयोक्तुं इच्छति तर्हि केवलं चयनकर्ता विकल्पं निर्दिशतु ।

विधियाँ

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

एकस्य तत्वसङ्ग्रहस्य कृते popovers आरभते ।

.popover('दर्शन') .

एक तत्वों popover प्रकट करता है।

$ ( '# तत्व' ). popover ( 'दर्शन' ) .

.पोपोवर('गोपन') .

एकं तत्वं पोपोवरं गोपयति।

$ ( '# तत्व' ). पोपोवर ( 'गोपनीय' ) .

.popover('टॉगल') .

एकं एलिमेण्ट्स् पोपोवरं टॉगल करोति।

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

.popover('नाश') .

एकस्य तत्त्वस्य पोपोवरं गोपयति, नाशयति च।

$ ( '# तत्व' ). पोपोवर ( 'नाश' ) .

उदाहरण सचेतना

एतेन प्लगिन् इत्यनेन सर्वेषु अलर्टसन्देशेषु dismiss कार्यक्षमतां योजयन्तु ।

प्रयोगः

जावास्क्रिप्ट् मार्गेण अलर्टस्य निराकरणं सक्षमं कुर्वन्तु:

$ ( ".सचेतना" ). अलर्ट () .

मार्कअप

केवलं स्वस्य close बटन् मध्ये योजयन्तु data-dismiss="alert"यत् स्वयमेव alert close कार्यक्षमतां दातुं शक्नुवन्ति।

<a class = "बंद करें" data-dismiss = "सचेतना" href = "#" > × </a> इति   

विधियाँ

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

सर्वाणि अलर्ट्स् निकटकार्यक्षमतायाः सह लपेटति। भवतः अलर्ट्स् बन्दं कृत्वा बहिः एनिमेट् कर्तुं, सुनिश्चितं कुर्वन्तु यत् तेषां कृते पूर्वमेव .fadeand .inवर्गः प्रयुक्तः अस्ति ।

.alert('बन्द करें') .

एकं अलर्ट् बन्दं करोति।

$ ( ".सचेतना" ). alert ( 'बन्द' ) .

घटनाः

Bootstrap इत्यस्य alert वर्गः alert कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि प्रकाशयति ।

$ ( '#मम-सचेतना' ). bind ( 'बन्द' , फंक्शन () {   
  // किमपि कुरुत...
}) इति ।

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

बटन्स् इत्यनेन अधिकं कुर्वन्तु। नियन्त्रणबटनं वदति अथवा उपकरणपट्टिका इत्यादीनां अधिकघटकानाम् कृते बटनसमूहान् रचयति ।

राज्यपूर्णः

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

<button type = "button" class = "btn btn-primary" data-loading-text = "लोडिंग्..." > लोडिंग स्थिति </button>   

एकल टॉगल

data-toggle="button"एकस्मिन् बटन् मध्ये टॉग्लिंग् सक्रियीकरणाय योजयन्तु ।

<बटन प्रकार = "बटन" वर्ग = "btn btn-प्राथमिक" data-toggle = "बटन" > एकल टॉगल </button>   

चेकबॉक्स

data-toggle="buttons-checkbox"btn-group इत्यत्र चेकबॉक्स शैली टॉगलिंग् कृते योजयन्तु ।

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

रेडियो

data-toggle="buttons-radio"btn-group इत्यत्र रेडियोशैली टॉगलिंग् कृते योजयन्तु ।

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

प्रयोगः

जावास्क्रिप्ट् मार्गेण बटन् सक्षमं कुर्वन्तु:

$ ( '.नव-टैब्स्' ). बटन () .

मार्कअप

दत्तांशविशेषताः बटनप्लगिन् इत्यस्य अभिन्नं भवन्ति । विभिन्नानां मार्कअपप्रकारानाम् कृते अधोलिखितं उदाहरणसङ्केतं पश्यन्तु ।

विकल्पाः

न कश्चित्

विधियाँ

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

पुश अवस्था को टॉगल करता है। बटनं सक्रियम् इति रूपं ददाति ।

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

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

बटन स्थितिं लोडिंग् इत्यत्र सेट् करोति - बटनं निष्क्रियं करोति तथा च पाठं लोड् करणाय स्वैप् करोति । data attribute इत्यस्य उपयोगेन बटन एलिमेण्ट् इत्यत्र लोड् करणं पाठं परिभाषितव्यम् data-loading-text|

<button type = "बटन" class = "btn" data-loading-text = "सामग्री लोड कर रहा है..." > ... </button>    

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

बटन स्थितिं पुनः सेट् करोति - पाठं मूलपाठं प्रति स्वैप करोति ।

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

बटन स्थितिं पुनः सेट् करोति - पाठं कस्यापि आँकडा परिभाषितपाठस्थितौ स्वैप् करोति ।

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

विषये

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

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

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

collapse plugin इत्यस्य उपयोगेन वयं सरलं accordion शैली विजेट् निर्मितवन्तः:

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

अकॉर्डियन मार्कअपं विना अपि भवान् प्लगिन् इत्यस्य उपयोगं कर्तुं शक्नोति । अन्यस्य तत्त्वस्य विस्तारं संकुचनं च एकं बटनं टॉगलं कुर्वन्तु ।

<बटन प्रकार = "बटन" वर्ग = "btn btn-खतरा" डेटा-टॉगल = "पतन" डेटा-लक्ष्य = "# डेमो" >    
  सरल संकुचित
</बटन> इति
 
<div id = "demo" class = "अन्तर्गतम्" > ... </div>  

प्रयोगः

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

केवलं संकुचनीयस्य तत्त्वस्य नियन्त्रणं स्वयमेव नियुक्तुं केवलं एलिमेण्ट् अपि data-toggle="collapse"च एकं योजयन्तु । data-targetएट्रिब्यूट् एकं css चयनकर्तारं स्वीकुर्वति यस्मिन् data-targetसंकुचनं प्रयोक्तुं शक्नोति । collapseसंकुचनीयतत्त्वे वर्गं अवश्यं योजयन्तु । यदि भवान् इदं पूर्वनिर्धारितरूपेण उद्घाटितुम् इच्छति तर्हि अतिरिक्तवर्गं योजयन्तु in.

संकुचनीयनियन्त्रणे accordion-सदृशं समूहप्रबन्धनं योजयितुं, data attribute योजयन्तु data-parent="#selector"। एतत् कार्ये द्रष्टुं डेमो पश्यन्तु।

जावास्क्रिप्ट् मार्गेण

सह मैन्युअल् रूपेण सक्षमं कुर्वन्तु:

$ ( ".संकुचनम्" ). संकुचनम् () ९.

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-parent=""।

विधियाँ

.collapse(विकल्पाः) .

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

$ ( '# मेरासंकुचित' ). संकुचति ({ ) .
  toggle : असत्यम् 
}) इति ।

.collapse('टॉगल') .

एकं संकुचनीयं तत्त्वं दर्शितं वा गुप्तं वा प्रति टॉगलं करोति ।

.collapse('दर्शयतु') .

संकुचनीयं तत्त्वं दर्शयति ।

.collapse('गोपन') .

संकुचनीयं तत्त्वं गोपयति ।

घटनाः

Bootstrap इत्यस्य collapse वर्गः collapse कार्यक्षमतायाः हुक् करणाय कतिपयानि घटनानि उजागरयति ।

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

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

अधोलिखितः स्लाइड् शो हिंडोला इव तत्त्वानां माध्यमेन चक्रं कर्तुं सामान्यं प्लगिन् घटकं च दर्शयति ।

प्रथमं लघुचित्र लेबलम्

क्रास justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

द्वितीय लघुचित्र लेबल

क्रास justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

तृतीय लघुचित्र लेबल

क्रास justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

‹ . › .

<div id = "myCarousel" वर्ग = "हिंडोला स्लाइड" >  
  <ol class = "हिंडोला-सूचक" > 
    <li data-target = "#myCarousel" data-slide-to = "0" वर्ग = "सक्रिय" ></li>   
    <li data-target = "#myCarousel" दत्तांश-स्लाइड्-तो = "1" ></li>  
    <li data-target = "#myCarousel" दत्तांश-स्लाइड्-तो = "2" ></li>  
  </ol> इति
  <!-- हिंडोला द्रव्य -->
  <div class = "हिंडोला-अन्तर्गत" > 
    <div class = "सक्रिय वस्तु" > ... </div> 
    <div वर्ग = "वस्तु" > ... </div> 
    <div वर्ग = "वस्तु" > ... </div> 
  </div> इति
  <!-- हिंडोला नव -->
  <a class = "हिंडोला-नियंत्रण छोड़ा" href = "# myCarousel" data-slide = "पूर्व" > ‹ </a> इति   
  <a class = "हिंडोला-नियंत्रण अधिकार" href = "# myCarousel" डेटा-स्लाइड = "अगला" > › </a> इति   
</div> इति

प्रयोगः

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

हिंडोलायाः स्थितिं सुलभतया नियन्त्रयितुं data attributes इत्यस्य उपयोगं कुर्वन्तु । data-slideकीवर्ड prevअथवा next, को स्वीकार करता है, जो इसकी वर्तमान स्थिति के सापेक्ष स्लाइड स्थिति को परिवर्तित करता है। वैकल्पिकरूपेण, data-slide-toएकं कच्चा स्लाइड अनुक्रमणिका हिंडोला - मध्ये पारयितुं उपयुज्यताम् data-slide-to="2", यत् jump's स्लाइड् स्थितिः एकं विशेषसूचकाङ्कं आरभ्यते 0।

जावास्क्रिप्ट् मार्गेण

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

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScriptz मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-interval=""।

विधियाँ

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

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

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

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

वामतः दक्षिणत: हिंडोलावस्तूनाम् माध्यमेन चक्रं करोति।

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

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

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

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

.हिंडोला('पूर्व') .

पूर्ववस्तुं प्रति चक्रं करोति।

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

अग्रिम मदं प्रति चक्रं करोति।

घटनाः

बूटस्ट्रैप् इत्यस्य हिंडोलावर्गः हिंडोलाकार्यक्षमतायां हुकिंग् कर्तुं द्वौ घटनाद्वयं प्रकाशयति ।

उदाहरण

कस्यापि रूपस्य पाठनिवेशेन सह शीघ्रं सुरुचिपूर्णं typeaheads निर्मातुं मूलभूतं, सुलभतया विस्तारितं प्लगिन् ।

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

autocomplete="off"Bootstrap typeahead ड्रॉप्डाउन् उपरि पूर्वनिर्धारितब्राउजरमेनूः न दृश्यन्ते इति निवारयितुं भवान् सेट् कर्तुम् इच्छति ।

प्रयोगः

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

उपरि उदाहरणे दर्शितवत् typeahead कार्यक्षमतायाः सह एलिमेण्ट् पञ्जीकरणार्थं data attributes योजयन्तु ।

जावास्क्रिप्ट् मार्गेण

typeahead इत्येतत् मैन्युअल् रूपेण आह्वयन्तु :

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

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-source=""।

विधियाँ

.typeahead(विकल्पाः) .

typeahead इत्यनेन सह इनपुट् आरभते ।

उदाहरण

वामभागे उपमार्गदर्शनं affix plugin इत्यस्य live demo अस्ति ।

प्रयोगः

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

कस्मिन् अपि तत्त्वे सहजतया affix व्यवहारं योजयितुं, केवलं data-spy="affix"यस्मिन् तत्त्वे भवन्तः गुप्तचरं कर्तुम् इच्छन्ति तस्मिन् तत्त्वे योजयन्तु । ततः कदा कस्यचित् तत्त्वस्य पिनिंग् चालू-निष्क्रान्तं कर्तव्यम् इति परिभाषितुं offsets इत्यस्य उपयोगं कुर्वन्तु ।

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

जावास्क्रिप्ट् मार्गेण

जावास्क्रिप्ट् मार्गेण प्रत्ययप्लगिन् आह्वयन्तु:

$ ( '# नवबार' ). affix () .

विकल्पाः

विकल्पाः data attributes अथवा JavaScript मार्गेण पारयितुं शक्यन्ते । दत्तांशविशेषतानां कृते, विकल्पनाम , इत्यत्र data-योजयन्तु data-offset-top="200"।