मोडलां विशीं

एक सुव्यवस्थित, पूण लवचीक, फकत उण्यांत उणी गरज आशिल्ली कार्यक्षमताय आनी स्मार्ट मुलभूत आशिल्ल्या पारंपारीक जावास्क्रिप्ट मोडल प्लगइनाचेर घेवप.

स्थिर उदाहरण

सकयल स्थिरपणान रेंडर केल्लो मोडल आसा.

लायव्ह डेमो

सकयल दिल्ल्या बटणाचेर क्लिक करून जावास्क्रिप्ट वरवीं मोडल टॉगल करात. तो सकयल सरकतलो आनी पानाच्या वयल्या भागांतल्यान भितर फीको जातलो.

बूटस्ट्रॅप-मोडल वापरप

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

$ ( '#मायमोडल' ). मोडल ( पर्याय ) .

पर्याय आसात

मार्कअप करप

जावास्क्रिप्टाची एकूय ओळ बरोवचे पडनासतना तुमी तुमच्या पानाचेर मोडल सहज सक्रिय करूंक शकतात. फकत a वा जो मोडल घटक id कडेन जुळटा data-toggle="modal"अशा नियंत्रक घटकाचेर सेट करात, आनी क्लिक केल्यार, तो तुमचो मोडल सुरू करतलो.data-target="#foo"href="#foo"

तशेंच, तुमच्या मोडल दृष्टांतांत पर्याय जोडपाक, फकत नियंत्रण घटकाचेर वा मोडल मार्कअपाचेर स्वता अतिरिक्त डेटा गुणधर्म म्हणून तांचो आस्पाव करचो.

<a class = "btn" data-toggle = "मोडल" href = "#myModal" > मोडल सुरू करचें </a>    

<div वर्ग = "मोडल" id = "मायमोडल" >  
  <div वर्ग = "मोडल-शीर्षक" > 
    <बटण वर्ग = "बंद" डेटा-डिस्मिस = "मोडल" > × </बटण>  
    <h3> मोडल शीर्षक </h3>
  </div> हें नांव
  <div वर्ग = "मोडल-शरीर" > 
    <p> एक बारीक आंग... </p>
  </div> हें नांव
  <div वर्ग = "मोडल-पाद लेख" > 
    <a href = "#" वर्ग = "btn" > बंद करचें </a>  
    <a href = "#" class = "btn btn-primary" > बदल जतनाय घेयात </a>  
  </div> हें नांव
</div> हें नांव

पद्दती

.मोडल(पर्याय) .

तुमची सामग्री मोडल म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

$ ( '#मायमोडल' ). मोडल ({ 1).
  कीबोर्ड : खोटें 
}) हें .

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

हाताळणीन एक मोडल टॉगल करता.

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

.मोडल('दाखोवचें') .

हाताळणीन एक मोडल उगडटा.

$ ( '#मायमोडल' ). मोडल ( 'दाखोवप' ) .

.मोडल('लिपोवप') .

हाताळणीन एक मोडल लिपयता.

$ ( '#मायमोडल' ). मोडल ( 'लिपोवप' ) .

घडणुको

बूटस्ट्रॅपाचो मोडल वर्ग मोडल कार्यक्षमतायांत हुक करपाखातीर कांय घडणुको उक्ती करता.

$ ( '#मायमोडल' ). on ( 'लिपलेले' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

ड्रॉपडावन विशीं

ह्या साद्या प्लगइनान बूटस्ट्रॅपांतल्या लागीं लागीं खंयच्याय वस्तूक ड्रॉपडावन मेनू जोडात. बूटस्ट्रॅप नवबार, टॅब, आनी गोळ्यांत चालू पुराय ड्रॉपडावन मेनू समर्थन वैशिश्ट्य करता.

उदाहरणां

ड्रॉपडावनाची चांचणी करपाक सकयल दिल्ल्या नावबारांतल्या ड्रॉपडावन nav लिंकांचेर क्लिक करात.

• नेमान लिंक करप
• ड्रॉपडावन करप
  • Action
  • Another action
  • Something else here
  • Separated link
• ड्रॉपडावन 2
  • Action
  • Another action
  • Something else here
  • Separated link
• ड्रॉपडावन 3
  • Action
  • Another action
  • Something else here
  • Separated link

bootstrap-dropdown.js वापरप

जावास्क्रिप्ट वरवीं ड्रॉपडावनांक कॉल करात:

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

मार्कअप करप

खंयच्याय घटकाक ड्रॉपडावन कार्यक्षमताय बेगीन जोडपाक फकत जोडात data-toggle="dropdown"आनी खंयचोय वैध बूटस्ट्रॅप ड्रॉपडावन आपोआप सक्रिय जातलो.

<ul class = "नव नव-गोळ्या" > 
  <li class = "सक्रीय" ><a href = "#" > नेमान दुवो </a></li>  
  <li वर्ग = "ड्रॉपडावन" id = "मेनू1" >  
    <a class = "ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" href = "#menu1" >   
      ड्रॉपडावन करप
      <b वर्ग = "कॅरेट" </b> 
    </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      <li><a href = "#" > कृती </a></li> 
      <li><a href = "#" > दुसरी कृती </a></li> 
      <li><a href = "#" > हांगा आनीक कितें तरी </a></li> 
      <li वर्ग = "विभाजक" </li> 
      <li><a href = "#" > वेगळी दुवो </a></li> 
    </ul> हें नांव
  </li> हें नांव
  ...
</ul> हें नांव

URL अखंड दवरपाखातीर, च्या data-targetबदला गुणधर्म वापरात href="#".

<ul class = "नव नव-गोळ्या" > 
  <li वर्ग = "ड्रॉपडावन" > 
    <a class = "ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" डेटा-लक्ष्य = "#" href = "मार्ग/ते/पान.html" >    
      ड्रॉपडावन करप
      <b वर्ग = "कॅरेट" </b> 
    </a> हें नांव
    <ul वर्ग = "ड्रॉपडावन-मेनू" > 
      ...
    </ul> हें नांव
  </li> हें नांव
</ul> हें नांव

पद्दती

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

दिल्ल्या नवबार वा टॅब केल्ल्या नेव्हिगेशनाक मेनू सक्रिय करपाखातीर एक प्रोग्रामेटिक api.

ScrollSpy प्लगइन स्क्रोल स्थितीचेर आदारीत आपोआप nav लक्ष्य अद्ययावत करपा खातीर आसा.

स्क्रोलस्पाय आशिल्लें उदाहरण नवबार

सकयल दिल्लो वाठार स्क्रोल करात आनी नेव्हिगेशन अपडेट पळयात. तशेंच ड्रॉपडावन उप आयटम हायलाइट करतले. करून पळयात!

bootstrap-scrollspy.js वापरप

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

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

मार्कअप करप

तुमच्या टॉपबार नेव्हिगेशनांत स्क्रोलस्पाय वर्तन सहज जोडपाक, फकत data-spy="scroll"तुमकां गुप्तचर करपाक जाय आशिल्ल्या घटकांत जोडात (चड करून हें कुडीचें आसतलें).

<body data-spy = "स्क्रॉल करचें" > ... </body>  

पद्दती

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

DOM वयल्यान घटक जोडपाक वा काडपा वांगडा scrollspy वापरतना, तुमकां रिफ्रेश पद्दत अशे तरेन कॉल करची पडटली:

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

पर्याय आसात

घडणुको

थळाव्या सामुग्रींतल्यान संक्रमणा खातीर हें प्लगइन जलद, गतिशील टॅब आनी गोळी कार्यक्षमताय जोडटा.

उदाहरण टॅब

ड्रॉपडावन मेनू वरवीं लेगीत, लिपयल्ल्या फलकां मदीं टॉगल करपाक सकयल दिल्ल्या टॅबांचेर क्लिक करात.

• घर
• प्रोफायल
• ड्रॉपडावन करप
  • @fat
  • @mdo

bootstrap-tab.js वापरप

जावास्क्रिप्ट वरवीं टॅब करपाक येवपी टॅब सक्षम करात (दरेक टॅब वैयक्तीकपणान सक्रिय करपाची गरज आसा):

$ ( '#मायटॅब एक' ). क्लिक ( फंक्शन ( ई ) { .  
  इ . आडावपाक पूर्वनिर्धारीत ();
  $ ( हें ). tab ( 'दाखोवचें' );
}) हें .

तुमी जायत्या तरांनी वैयक्तीक टॅब सक्रिय करूंक शकतात:

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

मार्कअप करप

data-toggle="tab"तुमी फकत स्पश्ट करून वा data-toggle="pill"घटकाचेर कसलीच जावास्क्रिप्ट बरयनासतना टॅब वा पिल नेव्हिगेशन सक्रिय करूंक शकतात . navटॅबांत and nav-tabsवर्ग जोडल्यार ulबूटस्ट्रॅप टॅब स्टायलिंग लागू जातली.

<ul वर्ग = "nav nav-टॅब" > 
  <li><a href = "#घर" डेटा-टॉगल = "टॅब" > मुखेल </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> हें नांव

पद्दती

$ ().टॅब

टॅब घटक आनी सामुग्री कंटेनर सक्रिय करता. टॅबांत एक तर एक data-targetवा एक hrefलक्ष्य करपी एक कंटेनर नोड DOM त आसपाक जाय.

<ul वर्ग = "nav nav-टॅब" id = "मायटॅब" >  
  <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 = "टॅब-पॅन सक्रिय" id = "घर" > ... </div>  
  <div class = "टॅब-पॅन" id = "प्रोफायल" > ... </div>  
  <div class = "टॅब-पॅन" id = "संदेश" > ... </div>  
  <div class = "टॅब-पॅन" id = "सेटिंग्ज" > ... </div>  
</div> हें नांव
 
<लिपी> हें नांव
  $ ( फंक्शन () { 1 .  
    $ ( '#मायटॅब एक:निमाणें' ). tab ( 'दाखोवचें' );
  }) हें .
</script> हें नांव

घडणुको

$ ( 'एक [डेटा-टॉगल = "टॅब"]' ). on ( 'दाखयलें' , फंक्शन ( ई ) { .   
  इ . लक्ष्य // सक्रिय केला टॅब
  इ . relatedTarget // फाटलो टॅब
}) हें .

टूलटिप्स विशीं

जेसन फ्रेम हांणी बरयल्ल्या उत्कृश्ट jQuery.tipsy प्लगइनांतल्यान प्रेरीत; साधनटिप ही एक अद्ययावत आवृत्ती आसा, जी प्रतिमांचेर आदारीत ना, एनिमेशनांखातीर css3 वापरतात, आनी थळाव्या शीर्षक सांठवणाखातीर डेटा-गुणधर्म वापरतात.

Tooltips चो उदाहरण वापर

साधनसुचोवण्यो पळोवपाक सकयल दिल्ल्या दुव्यांचेर होवर करात:

bootstrap-tooltip.js वापरून

जावास्क्रिप्ट वरवीं टूलटिप ट्रिगर करात:

$ ( '# उदाहरण' ). साधनटिप ( पर्याय ) .

पर्याय आसात

मार्कअप करप

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट इन आसात.तुमकां त्यो वापरपाक जाय जाल्यार फकत निवडक पर्याय निर्देशीत करात.

<a href = "#" rel = "साधन टिप" title = "पयली साधन टिप" > म्हजेर होवर करात </a>   

पद्दती

$ ().साधन टिप (पर्याय)

घटक संग्रहाक टूलटिप हॅन्डलर जोडटा.

.tooltip('दाखोवचें') .

एका घटकाची टूलटिप उक्ती करता.

$ ( '# घटक' ). tooltip ( 'दाखोवचें' ) .

.tooltip('लिपोवप') .

घटकाची टूलटिप लिपयता.

$ ( '# घटक' ). tooltip ( 'लिपोवप' ) .

.tooltip('टॉगल') .

घटकाचो टूलटिप टॉगल करता.

$ ( '# घटक' ). साधनटिप ( 'टॉगल' ) .

पोपोव्हरां विशीं

दुय्यम म्हायती दवरपा खातीर खंयच्याय घटकाक, iPad चेर आशिल्ल्या प्रमाणें, सामुग्रीचे ल्हान आच्छादन जोडात.

* टूलटिप समाविष्ट करपाची गरज आसा

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

पॉपओवर ट्रिगर करपाक बटणाचेर होवर करात.

bootstrap-popover.js वापरप

जावास्क्रिप्ट वरवीं पॉपओव्हर सक्षम करात:

$ ( '# उदाहरण' ). पोपोव्हर ( पर्याय ) .

पर्याय आसात

मार्कअप करप

कार्यक्षमताय कारणांक लागून, Tooltip आनी Popover data-apis ऑप्ट इन आसात.तुमकां त्यो वापरपाक जाय जाल्यार फकत निवडक पर्याय निर्देशीत करात.

पद्दती

$ ().popover (पर्याय) 1.5.

घटक संग्रहाखातीर पोपोव्हर्स आरंभ करता.

.popover('दाखोवचें') .

एक तत्व पॉपओवर उक्तो करता.

$ ( '# घटक' ). popover ( 'दाखोवप' ) .

.popover('लिपोवप') .

एक तत्व पॉपओवर लिपयता.

$ ( '# घटक' ). पोपोव्हर ( 'लिपोवप' ) .

.popover('टॉगल') .

एक तत्व पॉपओवर टॉगल करता.

$ ( '# घटक' ). पोपोव्हर ( 'टॉगल' ) .

सावधानताये विशीं

सावधानताय प्लगइन हो इशाऱ्यांक लागींची कार्यक्षमताय जोडपाखातीर एक ल्हान वर्ग आसा.

देखीक सावधानताय

सावधानताय प्लगइन नेमान सावधानताय संदेशांचेर काम करता, आनी संदेश आडायता.

bootstrap-alert.js वापरून

जावास्क्रिप्ट वरवीं इशारो काडून उडोवप सक्षम करात:

$ ( ".सचेतक" ). सावधान करप () .

मार्कअप करप

फकत data-dismiss="alert"तुमच्या बंद बटणांत जोडात आपोआप एक इशारो बंद कार्यक्षमताय दिवपाक.

<a class = "बंद करचें" data-dismiss = "अलर्ट" href = "#" > × </a> हें नांव   

पद्दती

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

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

.alert('बंद करचें') .

एक इशारो बंद करता.

$ ( ".सचेतक" ). alert ( 'बंद करचें' ) .

घडणुको

Bootstrap चो सावधान वर्ग सावधान कार्यक्षमतेक हुक करपा खातीर कांय घडणुको उक्ती करता.

$ ( '#म्हजी-अलर्ट' ). bind ( 'बंद' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

संबंदीं

बटणां वरवीं चड करचें. नियंत्रण बटण राज्य करता वा साधनपट्टी सारकिल्या चड घटकांखातीर बटणांचे गट तयार करतात.

उदाहरण वापरता

राज्यां आनी टॉगलां खातीर बटणां प्लगइन वापरात.

bootstrap-button.js वापरून

जावास्क्रिप्ट वरवीं बटणां सक्षम करात:

$ ( '.नाव-टॅब' ). बटण () 1.1.

मार्कअप करप

डेटा गुणधर्म बटण प्लगइनाक अभिन्न आसात. वेगवेगळ्या मार्कअप प्रकारां खातीर सकयल दिल्लो उदाहरण कोड पळयात.

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

पद्दती

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

पुश स्टेट टॉगल करता. बटणाक तें सक्रिय केलां अशें दिसप दिता.

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

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

बटण स्थिती लोड करपाक सेट करता - बटण अक्षम करता आनी मजकूर लोड करपाक मजकूर स्वॅप करता. डेटा गुणधर्म वापरून बटण घटकाचेर मजकूर लोड करपाची व्याख्या करची data-loading-text.

<button class = "btn" data-loading-text = "सामान लोड करप..." > ... </button>   

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

बटण स्थिती रिसेट करता - मजकूर मूळ मजकूरांत स्वॅप करता.

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

बटण स्थिती रिसेट करता - खंयच्याय डेटा व्याख्या केल्ल्या मजकूर स्थितींत मजकूर स्वॅप करता.

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

संबंदीं

अकॉर्डियन आनी नेव्हिगेशन सारकिल्या संकुचीत घटकांखातीर बेस शैली आनी लवचीक आदार मेळोवचो.

* संक्रमण प्लगइन समाविष्ट करपाची गरज आसा.

देखीक अकॉर्डियन

संकुचीत प्लगइन वापरून, आमी एक सादें अकॉर्डियन शैली विजेट तयार केलें:

bootstrap-collapse.js वापरप

जावास्क्रिप्ट वरवीं सक्षम करात:

$ ( ".कोळप" ). कोसळप () .

पर्याय आसात

मार्कअप करप

फकत जोडचें data-toggle="collapse"आनी एक data-targetto घटक आपोआप संकुचीत करपाक येवपी घटकाचें नियंत्रण नेमपाक. गुणधर्म data-targetसंकुचीत लागू करपाक css निवडक स्वीकारता. collapseसंकुचीत करपाक येवपी घटकांत वर्ग जोडपाची खात्री करात . तुमकां तो पूर्वनिर्धारीत उगडपाक जाय जाल्यार, अतिरिक्त वर्ग जोडात in.

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

पद्दती

.collapse(पर्याय) .

तुमची सामुग्री संकुचीत करपाक येवपी घटक म्हणून सक्रिय करता. एक पर्यायी पर्याय स्वीकारता object.

$ ( '#माझें संकुचीत करपाक येता' ). कोसळप ({
  toggle : खोटें आसा 
}) हें .

.collapse('टॉगल') .

दाखोवपाक वा लिपोवन दवरपाक संकुचीत करपाक येवपी घटक टॉगल करता.

.collapse('दाखोवचें') .

संकुचीत करपाक येवपी घटक दाखयता.

.collapse('लिपोवप') .

संकुचीत करपाक येवपी घटक लिपयता.

घडणुको

बूटस्ट्रॅपाचो कोसळपाचो वर्ग कोळसो कार्यक्षमतेक हुक करपाखातीर कांय घडणुको उक्ती करता.

$ ( '#माझें संकुचीत करपाक येता' ). on ( 'लिपलेले' , फंक्शन () {   
  // कितें तरी करचें...
}) हें .

संबंदीं

घटकांवरवीं सायकल करपाखातीर एक सामान्य प्लगइन. एक मेरि-गो-राउंड.

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

सकयल दिल्लो स्लाइडशो पळयात.

पयलें लघुप्रतिमा लेबल

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

दुसरें लघुप्रतिमा लेबल

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

तिसरें लघुप्रतिमा लेबल

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

‹ हें . › हें .

bootstrap-carousel.js वापरून

जावास्क्रिप्ट वरवीं कॉल करात:

$ ( '.हिंडोळ' ). हिंडोळ () 1 .

पर्याय आसात

मार्कअप करप

फाटल्या आनी फुडल्या conrols खातीर डेटा गुणधर्म वापरतात. सकयल दिल्लें उदाहरण मार्कअप पळयात.

<div id = "माय हिंडोला" वर्ग = "हिंडोला " >  
  <!-- हिंडोळ वस्तू -->
  <div वर्ग = "हिंडोला-अंतर्गत" > 
    <div class = "सक्रीय आयटम" > ... </div> 
    <div वर्ग = "आयटम" > ... </div> 
    <div वर्ग = "आयटम" > ... </div> 
  </div> हें नांव
  <!-- हिंडोळ नव -->
  <a class = "हिंडोला-नियंत्रण उरलें" href = "#मायकारोसेल" डेटा-स्लाइड = "आदीं" > ‹ </a> हें नांव   
  <a class = "हिंडोला-नियंत्रण उजवें" href = "#म्हजें हिंडोळा" डेटा-स्लाइड = "फुडें" > › </a> हें नांव   
</div> हें नांव

पद्दती

.हिंडोला(पर्याय) .

एक पर्यायी पर्यायां सयत हिंडोला आरंभ करता objectआनी आयटमांतल्यान सायकल चलोवंक सुरवात करता.

$ ( '.हिंडोळ' ). हिंडोळ ({ ) .
  अंतर : 2000 इतलो आसा 
}) हें .

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

हिंडोळाच्या वस्तूंतल्यान डाव्यान उजव्यान सायकल करता.

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

वस्तूंतल्यान सायकल चलोवपी हिंडोळाक आडायता.

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

हिंडोलाक एका विशिश्ट फ्रेमाक (0 आदारीत, ऍरे सारकें) चक्र करता.

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

फाटल्या वस्तू कडेन चक्रां करता.

.हिंडोला('फुडें') .

फुडल्या आयटमाचेर चक्रां करता.

घडणुको

बूटस्ट्रॅपाचो हिंडोला वर्ग हिंडोला कार्यक्षमतायांत हुक करपा खातीर दोन घडणुको उक्ती करता.

संबंदीं

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

उदारण

typeahead परिणाम दाखोवपाक सकयल दिल्ल्या क्षेत्रांत टायप करपाक सुरवात करात.

bootstrap-typeahead.js वापरून

जावास्क्रिप्ट वरवीं टायपहेड कॉल करात:

$ ( '.टायपहेड' ). टायपहेड () 1.1.

पर्याय आसात

मार्कअप करप

typeahead कार्यक्षमताय आशिल्ल्या घटकाची नोंदणी करपाक डेटा गुणधर्म जोडात.

<इनपुट प्रकार = "मजकूर" डेटा-पुरवण = "typeahead" >  

पद्दती

.typeahead(पर्याय) .

टायपहेड आशिल्ल्या इनपुटाक आरंभ करता.