मॉडेल्स बद्दल

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

स्थिर उदाहरण

खाली स्टॅटिकली रेंडर केलेले मॉडेल आहे.

थेट डेमो

खालील बटणावर क्लिक करून जावास्क्रिप्टद्वारे मॉडेल टॉगल करा. ते खाली सरकले जाईल आणि पृष्ठाच्या शीर्षस्थानी फिकट होईल.

बूटस्ट्रॅप-मॉडल वापरणे

जावास्क्रिप्टद्वारे मॉडेलला कॉल करा:

$ ( '#myModal' ). मॉडेल ( पर्याय )

पर्याय

मार्कअप

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

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

<a class = "btn" data-toggle = "modal" href = "#myModal" > मॉडेल लाँच करा </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> मॉडेल शीर्षलेख </h3>
  </div>
  <div वर्ग = "मॉडल-बॉडी" > 
    <p> एक सुरेख शरीर… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > बंद करा </a>   
    <a href="#" class="btn btn-primary" > बदल जतन करा </a> _  
  </div>
</div>

पद्धती

.modal(पर्याय)

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

$ ( '#myModal' ). मॉडेल ({
  कीबोर्ड : असत्य 
})

.modal('टॉगल')

मॅन्युअली एक मॉडेल टॉगल करते.

$ ( '#myModal' ). मॉडेल ( 'टॉगल' )

.modal('शो')

मॅन्युअली एक मॉडेल उघडते.

$ ( '#myModal' ). मॉडेल ( 'शो' )

.modal('लपवा')

मॅन्युअली एक मॉडेल लपवते.

$ ( '#myModal' ). मॉडेल ( 'लपवा' )

कार्यक्रम

बूटस्ट्रॅपचा मॉडेल क्लास मोडल फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#myModal' ). वर ( 'लपलेले' , कार्य () {   
  // काहीतरी कर…
})

ड्रॉपडाउन बद्दल

या साध्या प्लगइनसह बूटस्ट्रॅपमधील जवळजवळ कोणत्याही गोष्टीमध्ये ड्रॉपडाउन मेनू जोडा. बूटस्ट्रॅपमध्ये नॅव्हबार, टॅब आणि गोळ्यांमध्ये पूर्ण ड्रॉपडाउन मेनू सपोर्ट आहे.

उदाहरणे

ड्रॉपडाउनची चाचणी घेण्यासाठी navbar मधील ड्रॉपडाउन एनएव्ही लिंक आणि खालील गोळ्यांवर क्लिक करा.

• नियमित दुवा
• ड्रॉपडाउन
  • 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 वापरणे

javascript द्वारे ड्रॉपडाउन कॉल करा:

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

मार्कअप

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

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > नियमित लिंक </a></li>  
  <li वर्ग = "ड्रॉपडाउन" आयडी = "मेनू1" >  
    <a वर्ग = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" href = "#menu1" >   
      ड्रॉपडाउन
      <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <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 = "nav nav-pills" > 
  <li वर्ग = "ड्रॉपडाउन" > 
    <a वर्ग = "ड्रॉपडाउन-टॉगल" डेटा-टॉगल = "ड्रॉपडाउन" डेटा-लक्ष्य = "#" href = "path/to/page.html" >    
      ड्रॉपडाउन
      <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul>
  </li>
</ul>

पद्धती

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

दिलेल्या नॅव्हबार किंवा टॅब केलेल्या नेव्हिगेशनसाठी मेनू सक्रिय करण्यासाठी प्रोग्रामेटिक एपीआय.

ScrollSpy प्लगइन स्क्रोल स्थितीवर आधारित एनएव्ही लक्ष्य स्वयंचलितपणे अद्यतनित करण्यासाठी आहे.

scrollspy सह उदाहरण navbar

खालील क्षेत्र स्क्रोल करा आणि नेव्हिगेशन अपडेट पहा. ड्रॉपडाउन उप आयटम देखील हायलाइट केले जातील. हे करून पहा!

bootstrap-scrollspy.js वापरणे

javascript द्वारे scrollspy ला कॉल करा:

$ ( '#navbar' ). scrollspy ()

मार्कअप

तुमच्या टॉपबार नेव्हिगेशनमध्ये सहजपणे स्क्रोलस्पाय वर्तन जोडण्यासाठी, data-spy="scroll"तुम्हाला ज्या घटकाची टेहळणी करायची आहे त्यात जोडा (बहुधा हे मुख्य भाग असेल).

<body data-spy = "स्क्रोल" > ... </body>  

पद्धती

.scrollspy('रिफ्रेश')

DOM मधील घटक जोडणे किंवा काढून टाकणे याच्या संयोगाने scrollspy वापरताना, तुम्हाला याप्रमाणे रीफ्रेश पद्धत कॉल करणे आवश्यक आहे:

$ ( '[डेटा-स्पाय="स्क्रोल"]' ). प्रत्येक ( कार्य () {  
  var $spy = $ ( हे ). scrollspy ( 'रिफ्रेश' )
});

पर्याय

कार्यक्रम

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

उदाहरण टॅब

लपलेल्या पॅन्समध्ये टॉगल करण्यासाठी खालील टॅबवर क्लिक करा, अगदी ड्रॉपडाउन मेनूद्वारे.

• मुख्यपृष्ठ
• प्रोफाइल
• ड्रॉपडाउन
  • @fat
  • @mdo

bootstrap-tab.js वापरणे

जावास्क्रिप्टद्वारे टॅब करण्यायोग्य टॅब सक्षम करा (प्रत्येक टॅब स्वतंत्रपणे सक्रिय करणे आवश्यक आहे):

$ ( '#myTab a' ). क्लिक करा ( कार्य ( e ) {  
  ई _ प्रतिबंधित डीफॉल्ट ();
  $ ( हे ). टॅब ( 'शो' );
})

तुम्ही वैयक्तिक टॅब अनेक प्रकारे सक्रिय करू शकता:

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

मार्कअप

तुम्ही कोणतेही जावास्क्रिप्ट न लिहिता टॅब किंवा पिल नेव्हिगेशन सक्रिय करू शकता फक्त एक घटक निर्दिष्ट करून data-toggle="tab"किंवा त्यावर. टॅबमध्ये आणि वर्ग data-toggle="pill"जोडल्याने बूटस्ट्रॅप टॅब शैली लागू होईल.navnav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#प्रोफाइल"   data-toggle = "tab" > प्रोफाइल </a></li>
  <li><a href = "#messages"   data-toggle = "tab" > संदेश </a></li>
  <li><a href = "#सेटिंग्ज"   data-toggle = "tab" > सेटिंग्ज </a></li>
</ul>

पद्धती

$().टॅब

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

<ul class = "nav nav-tabs" आयडी   = "myTab" >
  <li वर्ग = "सक्रिय" ><a href = "#home" >   घर </a></li>
  <li><a href = "#profile" >  प्रोफाइल </a></li>
  <li><a href = "#messages" >  संदेश </a></li>
  <li><a href = "#सेटिंग्ज"  > सेटिंग्ज </a></li>
</ul>
 
<div वर्ग =  "टॅब-सामग्री" >
  <div वर्ग = "टॅब-पेन सक्रिय" आयडी = "होम" > ...   </div>
  <div class = "tab-pane" id = "profile" >   ... </div>
  <div class = "tab-pane" id = "संदेश" >   ... </div>
  <div class = "tab-pan" id = "सेटिंग्ज"   > ... </div>
</div>
 
<script>
  $ ( कार्य ()   {
    $ ( '#myTab a:last' ). टॅब ( 'शो' );
  })
</script>

कार्यक्रम

$ ( 'a[data-toggle="tab"]' ). वर ( 'दर्शविले' , कार्य ( ई )    {
  ई _ लक्ष्य // सक्रिय टॅब
  ई _ संबंधित लक्ष्य // मागील टॅब
})

टूलटिप्स बद्दल

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

टूलटिप वापरण्याचे उदाहरण

टूलटिप पाहण्यासाठी खालील लिंकवर फिरवा:

bootstrap-tooltip.js वापरणे

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

$ ( '#उदाहरण' ). टूलटिप ( पर्याय )

पर्याय

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्हाला त्यांचा वापर करायचा असेल तर फक्त निवडक पर्याय निर्दिष्ट करा.

<a href = "#" rel = "tooltip" title = "पहिली टूलटिप" > माझ्यावर फिरवा </a>   

पद्धती

$().टूलटिप(पर्याय)

घटक संकलनासाठी टूलटिप हँडलर संलग्न करते.

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

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

$ ( '#element' ). टूलटिप ( 'शो' )

.टूलटिप('लपवा')

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

$ ( '#element' ). टूलटिप ( 'लपवा' )

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

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

$ ( '#element' ). टूलटिप ( 'टॉगल' )

popovers बद्दल

गृहनिर्माण दुय्यम माहितीसाठी कोणत्याही घटकामध्ये iPad वरील सामग्रीचे छोटे आच्छादन जोडा.

* टूलटिप समाविष्ट करणे आवश्यक आहे

होव्हर पॉपओव्हरचे उदाहरण

पॉपओव्हर ट्रिगर करण्यासाठी बटणावर फिरवा.

bootstrap-popover.js वापरणे

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

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

पर्याय

मार्कअप

कार्यक्षमतेच्या कारणास्तव, टूलटिप आणि पॉपओव्हर डेटा-एपीआय निवडले आहेत. जर तुम्हाला त्यांचा वापर करायचा असेल तर फक्त निवडक पर्याय निर्दिष्ट करा.

पद्धती

$().पॉपओव्हर(पर्याय)

घटक संकलनासाठी पॉपओव्हर्स आरंभ करते.

.popover('शो')

घटक पॉपओव्हर प्रकट करते.

$ ( '#element' ). पॉपओव्हर ( 'शो' )

.popover('लपवा')

एक घटक पॉपओव्हर लपवते.

$ ( '#element' ). पॉपओव्हर ( 'लपवा' )

.popover('टॉगल')

घटक पॉपओव्हर टॉगल करते.

$ ( '#element' ). पॉपओव्हर ( 'टॉगल' )

अलर्ट बद्दल

अलर्ट प्लगइन अलर्टमध्ये जवळची कार्यक्षमता जोडण्यासाठी एक लहान वर्ग आहे.

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

अॅलर्ट प्लगइन नियमित अॅलर्ट मेसेज आणि ब्लॉक मेसेजवर काम करते.

bootstrap-alert.js वापरणे

जावास्क्रिप्टद्वारे अलर्ट डिसमिस करणे सक्षम करा:

$ ( ". अलर्ट" ). इशारा ()

मार्कअप

data-dismiss="alert"अलर्ट क्लोज कार्यक्षमता स्वयंचलितपणे देण्यासाठी फक्त तुमच्या क्लोज बटणावर जोडा .

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

पद्धती

$().सूचना()

जवळच्या कार्यक्षमतेसह सर्व अलर्ट गुंडाळते. तुमच्‍या सूचना बंद केल्‍यावर अॅनिमेट करण्‍यासाठी, त्‍यांना आधीपासून लागू केलेला वर्ग .fadeआणि वर्ग आहे याची खात्री करा..in

.alert('बंद')

सूचना बंद करते.

$ ( ". अलर्ट" ). इशारा ( 'बंद' )

कार्यक्रम

बूटस्ट्रॅपचा अॅलर्ट क्लास अॅलर्ट फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#my-alert' ). bind ( 'बंद' , कार्य () {   
  // काहीतरी कर…
})

बद्दल

बटणांसह अधिक करा. कंट्रोल बटण स्टेटस किंवा टूलबार सारख्या अधिक घटकांसाठी बटणांचे गट तयार करा.

उदाहरण वापर

राज्ये आणि टॉगलसाठी बटणे प्लगइन वापरा.

bootstrap-button.js वापरणे

जावास्क्रिप्टद्वारे बटणे सक्षम करा:

$ ( '.nav-टॅब' ). बटण ()

मार्कअप

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

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

पद्धती

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

टॉगल पुश स्थिती. बटण सक्रिय केले आहे असे स्वरूप देते.

<button class = "btn" data-toggle = "button" > … </button>   

$().बटण('लोड करत आहे')

बटण स्थिती लोड करण्यासाठी सेट करते - बटण अक्षम करते आणि मजकूर लोड करण्यासाठी मजकूर बदलते. डेटा विशेषता वापरून लोडिंग मजकूर बटण घटकावर परिभाषित केला पाहिजे data-loading-text.

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

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

बटण स्थिती रीसेट करते - मजकूर मूळ मजकुरामध्ये बदलतो.

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

बटण स्थिती रीसेट करते - कोणत्याही डेटा परिभाषित मजकूर स्थितीत मजकूर स्वॅप करते.

<button class = "btn" data-complete-text = "पूर्ण!" > ... </ बटन>   
<script>
  $ ( '.btn' ). बटण ( 'पूर्ण' )
</script>

बद्दल

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

* संक्रमण प्लगइन समाविष्ट करणे आवश्यक आहे.

एकॉर्डियनचे उदाहरण

कोलॅप्स प्लगइन वापरून, आम्ही एक साधे एकॉर्डियन शैलीचे विजेट तयार केले:

bootstrap-collapse.js वापरणे

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

$ ( ". कोलॅप्स" ). कोसळणे ()

पर्याय

मार्कअप

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

<बटण वर्ग = "btn btn-धोका" डेटा-टॉगल = "कोलॅप्स " डेटा-लक्ष्य = "#डेमो" >   
  साधे संकुचित
</ बटन>
 
<div id = "डेमो" वर्ग = "संकुचित करा" > … </div>  

पद्धती

.कोलॅप्स(पर्याय)

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

$ ( '#myCollapsible' ). संकुचित ({
  टॉगल : खोटे 
})

.कोलॅप्स('टॉगल')

दर्शविण्यासाठी किंवा लपविण्यासाठी संकुचित करण्यायोग्य घटक टॉगल करते.

.कोलॅप्स('शो')

एक संकुचित घटक दर्शविते.

.कोलॅप्स ('लपवा')

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

कार्यक्रम

बूटस्ट्रॅपचा कोलॅप्स क्लास कोलॅप्स फंक्शनॅलिटीमध्ये जोडण्यासाठी काही इव्हेंट्स उघड करतो.

$ ( '#myCollapsible' ). वर ( 'लपलेले' , कार्य () {   
  // काहीतरी कर…
})

बद्दल

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

कॅरोसेलचे उदाहरण

खालील स्लाइडशो पहा.

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

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

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

‹ ›

bootstrap-carousel.js वापरणे

जावास्क्रिप्टद्वारे कॉल करा:

$ ( '. कॅरोसेल' ). कॅरोसेल ()

पर्याय

मार्कअप

डेटा विशेषता मागील आणि पुढील नियंत्रणासाठी वापरली जातात. खालील उदाहरण मार्कअप पहा.

<div id = "myCarousel" वर्ग = "कॅरोसेल स्लाइड" >  
  <!-- कॅरोसेल आयटम -->
  <div class = "carousel-inner" > 
    <div वर्ग = "सक्रिय आयटम" > … </div> 
    <div वर्ग = "आयटम" > … </div> 
    <div वर्ग = "आयटम" > … </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>

पद्धती

कॅरोसेल(पर्याय)

पर्यायी पर्यायांसह कॅरोसेल objectसुरू करते आणि आयटममधून सायकल चालवण्यास सुरुवात करते.

$ ( '. कॅरोसेल' ). कॅरोसेल ({
  मध्यांतर : 2000 
})

कॅरोसेल ('सायकल')

कॅरोसेल आयटममधून डावीकडून उजवीकडे सायकल.

.carousel('विराम द्या')

कॅरोसेलला आयटममधून सायकल चालवण्यापासून थांबवते.

कॅरोसेल(संख्या)

कॅरोसेलला एका विशिष्‍ट फ्रेमवर (0 आधारित, अॅरे प्रमाणे) सायकल करते.

कॅरोसेल('मागील')

मागील आयटमवर सायकल.

कॅरोसेल ('पुढील')

पुढील आयटमवर सायकल.

कार्यक्रम

बूटस्ट्रॅपचा कॅरोसेल क्लास कॅरोसेल कार्यक्षमतेमध्ये जोडण्यासाठी दोन इव्हेंट्स उघड करतो.

बद्दल

कोणत्याही फॉर्म मजकूर इनपुटसह त्वरीत मोहक टाइपहेड तयार करण्यासाठी मूलभूत, सहज विस्तारित प्लगइन.

उदाहरण

टाइपहेड परिणाम दर्शविण्यासाठी खालील फील्डमध्ये टाइप करणे सुरू करा.

bootstrap-typeahead.js वापरणे

जावास्क्रिप्टद्वारे टाइपहेडला कॉल करा:

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

पर्याय

मार्कअप

टाइपहेड कार्यक्षमतेसह घटकाची नोंदणी करण्यासाठी डेटा विशेषता जोडा.

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

पद्धती

.typeahead(पर्याय)

टाइपहेडसह इनपुट सुरू करते.