मोडल के बारे में

एकः सुव्यवस्थितः, परन्तु लचीलः, केवलं न्यूनतम-आवश्यक-कार्यक्षमतायाः स्मार्ट-पूर्वनिर्धारितस्य च सह पारम्परिक-जावास्क्रिप्ट्-मोडल-प्लगिन्-इत्यस्य उपरि गृह्णाति ।

स्थिर उदाहरण

अधः स्थिररूपेण प्रतिपादितं मोडलम् अस्ति ।

लाइव डेमो

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

bootstrap-modal इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

जावास्क्रिप्ट् इत्यस्य एकां पङ्क्तिं न लिखित्वा भवान् स्वपृष्ठे मोडाल्स् इत्येतत् सुलभतया सक्रियं कर्तुं शक्नोति । केवलं a or which corresponds to a modal element id data-toggle="modal"इत्यनेन सह controller element इत्यत्र सेट् कुर्वन्तु , ततः क्लिक् कृत्वा, तत् भवतः modal प्रारम्भं करिष्यति ।data-target="#foo"href="#foo"

अपि च, स्वस्य मोडल-दृष्टान्ते विकल्पान् योजयितुं, केवलं तान् नियन्त्रण-तत्त्वे अथवा मोडल्-मार्कअप-इत्यत्रैव अतिरिक्त-दत्तांश-विशेषतारूपेण समावेशयन्तु ।

<a class = "btn" data-toggle = "modal" href = "#myModal" > मोडल प्रारम्भ करें </a>    

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

विधियाँ

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

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

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

.modal('टॉगल') .

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

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

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

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

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

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

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

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

घटनाः

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

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

ड्रॉपडाउन्स के बारे में

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

उदाहरणानि

ड्रॉपडाउन्स् परीक्षितुं अधः navbar मध्ये dropdown nav links इत्यत्र क्लिक् कुर्वन्तु तथा च pills इत्यत्र क्लिक् कुर्वन्तु।

• नियमित लिंक
• ड्रॉपडाउन
  • Action
  • Another action
  • Something else here
  • Separated link
• पातनम् २
  • Action
  • Another action
  • Something else here
  • Separated link
• पातनम् ३
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js इत्यस्य उपयोगेन

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

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

मार्कअप

शीघ्रं कस्मिन् अपि तत्त्वे ड्रॉपडाउन कार्यक्षमतां योजयितुं केवलं योजयन्तु data-toggle="dropdown"तथा च कोऽपि वैधः बूटस्ट्रैप् ड्रॉपडाउन स्वयमेव सक्रियः भविष्यति ।

<ul class = "नव नव-गोलियाँ" > 
  <li class = "सक्रिय" ><a href = "#" > नियमितलिङ्क </a></li>  
  <li वर्ग = "ड्रॉपडाउन" id = "मेनू1" >  
    <a class = "ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "# मेनू1" >   
      ड्रॉपडाउन
      <b class = "कैरेट्" </b> 
    </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <li><a href = "#" > क्रिया </a></li> 
      <li><a href = "#" > अन्यत् कर्म </a></li> 
      <li><a href = "#" > अत्र अन्यत् किमपि </a></li> 
      <li class = "विभाजक" </li> 
      <li><a href = "#" > पृथक् लिङ्क् </a></li> 
    </ul> इति
  </li> इति
  ...
</ul> इति

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

<ul class = "नव नव-गोलियाँ" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" data-target = "#" href = "मार्ग/प्रति/पृष्ठ.html" >    
      ड्रॉपडाउन
      <b class = "कैरेट्" </b> 
    </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </li> इति
</ul> इति

विधियाँ

$ (). ड्रॉपडाउन () .

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

ScrollSpy प्लगइन स्क्रॉल स्थिति के आधार पर स्वचालित रूप से nav लक्ष्य अद्यतन करने के लिए है।

उदाहरणं scrollspy सह navbar

अधोलिखितं क्षेत्रं स्क्रॉल कृत्वा नेविगेशन अपडेट् पश्यन्तु। ड्रॉप् डाउन उप आइटम्स् अपि हाइलाइट् भविष्यन्ति। प्रयतस्व !

bootstrap-scrollspy.js इत्यस्य उपयोगेन

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

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

मार्कअप

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

<body data-spy = "स्क्रॉल" > ... </body> इति  

विधियाँ

.scrollspy('ताजा') .

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

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

विकल्पाः

घटनाः

एतत् प्लगिन् स्थानीयसामग्रीद्वारा संक्रमणार्थं द्रुतं, गतिशीलं ट्याब् तथा गोलीकार्यक्षमतां योजयति ।

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

गुप्तफलकानां मध्ये टोग्ल् कर्तुं अधोलिखितानि ट्याब्स् नुदन्तु, ड्रॉप्डाउन मेन्यू मार्गेण अपि ।

• गृहम्‌
• रूपरेखा
• ड्रॉपडाउन
  • @fat
  • @mdo

bootstrap-tab.js इत्यस्य उपयोगेन

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

$ ( '# माईटैब क' ). क्लिक करें ( फंक्शन ( ई ) { .  
  ङ . 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 // पूर्व टैब
}) इति ।

Tooltips के बारे में

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

Tooltips इत्यस्य उदाहरणप्रयोगः

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

bootstrap-tooltip.js इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

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

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

विधियाँ

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

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

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

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

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

.tooltip('गोपन') .

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

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

.tooltip('टॉगल') .

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

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

popovers के बारे में

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

* Tooltip को शामिल करने की आवश्यकता है

उदाहरणम् होवर पोपोवर

पोपोवरं प्रेरयितुं बटनस्य उपरि माउसं कुर्वन्तु।

bootstrap-popover.js इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

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

विधियाँ

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

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

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

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

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

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

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

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

.popover('टॉगल') .

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

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

अलर्ट्स् विषये

अलर्ट् प्लगिन् अलर्ट्स् मध्ये निकटकार्यक्षमतां योजयितुं एकः लघुवर्गः अस्ति ।

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

अलर्ट्स् प्लगिन् नियमितसचेतनासन्देशेषु कार्यं करोति, अवरुद्धसन्देशेषु च ।

bootstrap-alert.js इत्यस्य उपयोगेन

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

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

मार्कअप

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

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

विधियाँ

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

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

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

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

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

घटनाः

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

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

विषये

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

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

राज्यानां टॉगल्स् च कृते बटन्स् प्लगिन् इत्यस्य उपयोगं कुर्वन्तु ।

bootstrap-button.js इत्यस्य उपयोगेन

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

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

मार्कअप

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

<!-- एकस्मिन् बटने टॉगलिंग् सक्रियीकरणाय data-toggle="button" योजयन्तु -->
<button class = "btn" data-toggle = "बटन" > एकल टॉगल </button>  
 
<!-- btn-group --> इत्यत्र चेकबॉक्स शैली टॉगलिंग् कृते data-toggle="buttons-checkbox" योजयन्तु
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-चेकबॉक्स" >  
  <button class = "btn" > वाम </button> 
  <button class = "btn" > मध्य </button> 
  <button class = "btn" > दक्षिण </button> 
</div> इति
 
<!-- btn-group --> इत्यत्र रेडियोशैली टॉगलिंग् कृते data-toggle="buttons-radio" योजयन्तु
<div वर्ग = "btn-समूह" डेटा-टॉगल = "बटन-रेडियो" >  
  <button class = "btn" > वाम </button> 
  <button class = "btn" > मध्य </button> 
  <button class = "btn" > दक्षिण </button> 
</div> इति

विधियाँ

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

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

<button class = "btn" data-toggle = "बटन" > ... </बटन>   

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

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

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

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

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

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

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

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

विषये

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

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

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

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

bootstrap-collapse.js इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

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

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

विधियाँ

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

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

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

.collapse('टॉगल') .

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

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

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

.collapse('गोपन') .

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

घटनाः

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

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

विषये

तत्त्वानां माध्यमेन चक्रं कर्तुं सामान्यं प्लगिन् । A मेरि-गो-रन् ।

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

अधः स्लाइड् शो पश्यन्तु।

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

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

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

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

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

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

‹ . › .

bootstrap-carousel.js इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

पूर्वस्य अग्रिमस्य च conrols कृते Data attributes इत्यस्य उपयोगः भवति । अधः उदाहरणं मार्कअपं पश्यन्तु।

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

विधियाँ

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

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

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

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

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

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

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

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

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

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

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

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

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

घटनाः

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

विषये

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

उदाहरण

typeahead परिणामान् दर्शयितुं अधोलिखिते क्षेत्रे टङ्कनं आरभत ।

bootstrap-typeahead.js इत्यस्य उपयोगेन

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

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

विकल्पाः

मार्कअप

typeahead कार्यक्षमतायाः सह तत्त्वस्य पञ्जीकरणार्थं data attributes योजयन्तु ।

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

विधियाँ

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

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