Bɔt di modal dɛn

Wan strimlayn, bɔt fleksibul, tek pan di tradishɔnal javaskript modal plɔgin wit ɔl di minimum rikwayd funkshɔnaliti ɛn smat difɔlt dɛn.

Statik ɛgzampul

Di wan dɛn we de dɔŋ ya na wan statically rendered modal.

Layf dɛmo

Toggle wan modal via javascript bay we yu klik di bɔtin we de dɔŋ. I go slayv dɔŋ ɛn fade insay frɔm di ɔp pat na di pej.

Yuz di bootstrap-modal fɔ yuz

Kɔl di modal bay javascript:

$ ( '#miModal' ). modal ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Yu kin aktiv modal dɛn na yu pej izi wan we yu nɔ nid fɔ rayt wan layn fɔ javaskript. Jɔs sɛt data-toggle="modal"pan wan kɔntrol ɛlimɛnt wit wan data-target="#foo"ɔ href="#foo"we kɔrɛkt to wan modal ɛlimɛnt id, ɛn we yu klik, i go lanch yu modal.

Dɔn bak, fɔ ad opshɔn dɛn to yu modal instans, jɔs inklud dɛn as ɔda data atribyut dɛn pan ɛni wan pan di kɔntrol ɛlimɛnt ɔ di modal mak sɛf.

<a klas = "btn" data-tɔgl = "modal" href = "#miModal" > Lanch Mɔdal </a>    

<div klas = "modal ayd" id = "miModal" >  
  <div klas = "modal-hɛda" > 
    <bɔtin tayp = "bɔtin" klas = "klos" data-dismis = "modal" > × </bɔtin>   
    <h3> Modal hεda </h3>
  </div> fɔ di wan dɛn we de
  <div klas = "modal-bɔdi" > 
    <p> Wan fayn bɔdi... </p>
  </div> fɔ di wan dɛn we de
  <div klas = "modal-fut" > 
    <a href = "#" klas = "btn" data-dismis = "modal" > Klos </a>   
    <a href = "#" klas = "btn btn-praymari" > Sev chenj dɛn </a>  
  </div> fɔ di wan dɛn we de
</div> fɔ di wan dɛn we de

Di we aw dɛn de du am

.modal(opshɔn dɛn) .

Aktiv yu kɔntinyu as modal. Aksept wan opshɔnal opshɔn dɛn object.

$ ( '#miModal' ). modal ({
  kibɔd : lay lay tɔk 
}) bin de.

.modal('tɔgl') .

Manually de toggle wan modal.

$ ( '#miModal' ). modal ( ‘tɔgl’ ) .

.modal('sho') .

Manually de opin wan modal.

$ ( '#miModal' ). modal ( ‘sho’ ) .

.modal('ayd') .

Manually de ayd wan modal.

$ ( '#miModal' ). modal ( ‘ayd’ ) .

Di tin dɛn we kin apin

Bootstrap in modal klas de ɛksplɔz sɔm ivin dɛn fɔ huk insay modal funkshɔnaliti.

$ ( '#miModal' ). on ( 'ayd' , fɛnshɔn () {   
  // du sɔntin...
}) bin de.

Bɔt di tin dɛn we dɛn kin drɔp

Ad drɔpdɔwn mɛnyu dɛn to nia ɛnitin na Bootstrap wit dis simpul plɔgin. Bootstrap gɛt ful drɔpdɔwn mɛnyu sɔpɔt pan insay di navbar, tab dɛn, ɛn pils dɛn.

Ɛgzampul dɛn

Klik pan di drɔpdɔwn nav link dɛn na di navbar ɛn pils dɛn we de dɔŋ fɔ tɛst drɔpdɔwn dɛn.

• Link we de ɔltɛm
• Drɔpdɔwn
  • Action
  • Another action
  • Something else here
  • Separated link
• Drɔpdɔwn 2. Di wan dɛn we de drɔp
  • Action
  • Another action
  • Something else here
  • Separated link
• Drɔpdɔwn 3. Di wan dɛn we de drɔp
  • Action
  • Another action
  • Something else here
  • Separated link

Yuz di bootstrap-dropdown.js we yu de yuz

Kɔl di drɔpdɔwn dɛn bay javascript:

$ ( '.drɔpdɔwn-tɔgl' ). drɔp dɔŋ () .

Mak-ap fɔ di tin dɛn we de apin

Fɔ ad drɔpdɔwn funkshɔnaliti kwik kwik wan to ɛni ɛlimɛnt jɔs ad data-toggle="dropdown"ɛn ɛni valid butstrap drɔpdɔwn go ɔtomɛtik aktiv.

<ul klas = "nav nav-pils" > 
  <li klas = "aktiv" ><a href = "#" > Rigyul link </a></li>  
  <li klas = "drɔpdɔwn" id = "mɛnyu1" >  
    <a klas = "drɔpdɔwn-tɔgl" data-tɔgl = "drɔpdɔwn" href = "#mɛnyu1" >   
      Drɔpdɔwn
      <b klas = "kɛrɛt" ></b> 
    </a> fɔ di wan dɛn we de
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      <li><a href = "#" > Akshɔn </a></li> 
      <li><a href = "#" > Wan ɔda akshɔn </a></li> 
      <li><a href = "#" > Sɔntin ɔda tin ya </a></li> 
      <li klas = "divayda" </li> 
      <li><a href = "#" > Separet link </a></li> 
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
  ...
</ul> fɔ di wan dɛn we de

Fɔ mek di URL dɛn nɔ pwɛl, yuz di data-targetatribyut instead fɔ href="#".

<ul klas = "nav nav-pils" > 
  <li klas = "drɔpdɔwn" > 
    <a klas = "drɔpdɔwn-tɔgl" data-tɔgl = "drɔpdɔwn" data-target = "#" href = "pat/to/pej.html" >    
      Drɔpdɔwn
      <b klas = "kɛrɛt" ></b> 
    </a> fɔ di wan dɛn we de
    <ul klas = "drɔpdɔwn-mɛnyu" > 
      ...
    </ul> fɔ di wan dɛn we de
  </li> fɔ di wan dɛn we de
</ul> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().drɔpdɔwn()

Wan programatik api fɔ aktivet mɛnyu fɔ wan givɛn navbar ɔ tab nevigishɔn.

Di ScrollSpy plɔgin na fɔ ɔtomɛtik ɔpdet nav target dɛn bays pan skrol pozishɔn.

Example navbar wit skrolspy

Skrol di eria we de dɔŋ ɛn wach di ɔpdet fɔ di nevigishɔn. Di drɔpdɔwn sab aytem dɛn go aylayt bak. Tray am!

Yuz di bootstrap-scrollspy.js we yu de yuz

Kɔl di skrol dɛn bay javascript:

$ ( '#navbar' na di wan dɛn we de yuz am ). skrol dɛn () .

Mak-ap fɔ di tin dɛn we de apin

Fɔ ad skrolspi bihayvya izi wan to yu tɔpba nevigishɔn, jɔs ad data-spy="scroll"to di ɛlimɛnt we yu want fɔ spay pan (mɔs tipikli dis go bi di bɔdi).

<bɔdi data-spy = "skrol" > ... </bɔdi>  

Di we aw dɛn de du am

.skrolspy('rifresh') .

We yu de yuz scrollspy in kɔnjɔkt wit ad ɔ pul ɛlimɛnt dɛn frɔm di DOM, yu go nid fɔ kɔl di rifresh we lɛk so:

$ ( '[data-spy="skrol"]' ). ɛni wan ( fɛnshɔn () { .  
  var $spy = $ ( dis ). skrolspy ( ‘rifresh’ ) .
});

Di tin dɛn we yu kin pik fɔ du

Di tin dɛn we kin apin

Dis plɔgin de ad kwik, dinamik tab ɛn pil funkshɔnaliti fɔ chenj tru lokal kɔntinyu.

Ɛgzampul tab dɛn

Klik di tab dɛn we de dɔŋ fɔ chenj bitwin di say dɛn we dɛn ayd, ivin bay di meny dɛn we de dɔŋ.

• Os
• Profayl
• Drɔpdɔwn
  • @fat
  • @mdo

Yuz di bootstrap-tab.js

Enable tabable tabs via javascript (ɛni tab nid fɔ aktiv wan wan):

$ ( '#miTab a' ). klik ( fonkshɔn ( e ) { .  
  e . prɛventDifɔlt ();
  $ ( dis ). tab ( ‘sho’ );
}) bin de.

Yu kin aktiv wan wan tab dɛn difrɛn we dɛn:

$ ( '#miTab wan[href="#profayl"]' ). tab ( ‘sho’ ); // Selekt tab bay nem 
$ ( '#miTab a:fɔs' ). tab ( ‘sho’ ); // Selekt fɔs tab 
$ ( '#miTab a: las' ). tab ( ‘sho’ ); // Selekt las tab 
$ ( '# miTab li: eq (2) a' ). tab ( ‘sho’ ); // Selekt tɔd tab (0-indeks) 

Mak-ap fɔ di tin dɛn we de apin

Yu kin aktiv wan tab ɔ pil nevigishɔn we yu nɔ rayt ɛni javaskript bay we yu jɔs spɛsifa data-toggle="tab"ɔ data-toggle="pill"pan wan ɛlimɛnt. We yu ad di navɛn nav-tabsklas dɛn to di tab ul, i go yuz di bootstrap tab stayl.

<ul klas = "nav nav-tab dɛn" > 
  <li><a href = "#os" data-tɔgl = "tab" > Os </a></li>  
  <li><a href = "#prɔfayl" data-tɔgl = "tab" > Profayl </a></li>  
  <li><a href = "#mɛsej dɛn" data-tɔgl = "tab" > Mɛsej dɛn </a></li>  
  <li><a href = "#sɛtin" data-tɔgl = "tab" > Sɛtin dɛn </a></li>  
</ul> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().tab fɔ di wan dɛn

Aktiv wan tab ɛlimɛnt ɛn kɔntinyu kɔntena. Tab fɔ gɛt ɛni wan pan wan data-targetɔ wan hrefwe de tɔch wan kɔntena node na di DOM.

<ul klas = "nav nav-tab" id = "miTab" >  
  <li klas = "aktiv" ><a href = "#os" > Os </a></li>  
  <li><a href = "#prɔfayl" > Profayl </a></li> 
  <li><a href = "#mɛsej dɛn" > Mɛsej dɛn </a></li> 
  <li><a href = "#sɛtin dɛn" > Sɛtin dɛn </a></li> 
</ul> fɔ di wan dɛn we de
 
<div klas = "tab-kɔntinɛnt" > 
  <div klas = "tab-pan aktiv" id = "os" > ... </div>  
  <div klas = "tab-pan" id = "prɔfayl" > ... </div>  
  <div klas = "tab-pan" id = "mɛsej dɛn" > ... </div>  
  <div klas = "tab-pan" id = "sɛtin dɛn" > ... </div>  
</div> fɔ di wan dɛn we de
 
<skript>
  $ ( fɛnshɔn () { .  
    $ ( '#miTab a: las' ). tab ( ‘sho’ );
  }) bin de.
</skript>

Di tin dɛn we kin apin

$ ( 'a[data-tɔgl="tab"]' ). on ( 'sho' , funkshɔn ( e ) {   
  e . target // tab we dɛn dɔn aktiv
  e . relatedTarget // tab we bin de bifo
}) bin de.

Bɔt Tultip dɛn

Inspɛkt bay di fayn fayn jQuery.tipsy plɔgin we Jason Frame rayt; Tultip dɛn na ɔpdet vɛshɔn, we nɔ de abop pan pikchɔ dɛn, dɛn de yuz css3 fɔ animashɔn dɛn, ɛn data-atribyut dɛn fɔ lokal taytul stɔrɔj.

Ɛgzampul we fɔ yuz Tultip dɛn

Hova oba di link dɛn we de dɔŋ fɔ si tultip dɛn:

Yuz di bootstrap-tooltip.js

Trig di tultip via javascript:

$ ( '#ɛgzampul' ). tultip ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Fɔ pefɔmɛns rizin, di Tooltip ɛn Popover data-apis de opt in. If yu want fɔ yuz dɛn jɔs spɛsifa wan sɛlɛktɔ opshɔn.

<a href = "#" rel = "tultip" title = "fɔs tultip" > hova oba mi </a>   

Di we aw dɛn de du am

$().tultip(opshɔn dɛn)

Ataya wan tultip handla to wan ɛlimɛnt kɔlɛkshɔn.

.tultip('sho') .

Rivɛl wan ɛlimɛnt in tultip.

$ ( '#ɛlimɛnt' ). tultip ( ‘sho’ ) .

.tultip('ayd') .

Ayd wan ɛlimɛnt in tultip.

$ ( '#ɛlimɛnt' ). tultip ( ‘ayd’ ) .

.tultip('tɔgl')

Toggles wan element in tultip.

$ ( '#ɛlimɛnt' ). tultip ( ‘tɔgl’ ) .

Na bɔt di popover dɛn

Ad smɔl ɔvalayz dɛn fɔ kɔntinyu, lɛk di wan dɛn we de na di iPad, to ɛni ɛlimɛnt fɔ haus sɛkɔndari infɔmeshɔn.

* I nid fɔ de insay di Tultip

Ɛgzampul fɔ hova popover

Hover ova di bɔtin fɔ trig di popover.

Yuz di bootstrap-popover.js we yu de yuz

Enable popovers via javaskript:

$ ( '#ɛgzampul' ). popover ( opshɔn dɛn ) .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Fɔ pefɔmɛns rizin, di Tooltip ɛn Popover data-apis de opt in. If yu want fɔ yuz dɛn jɔs spɛsifa wan sɛlɛktɔ opshɔn.

Di we aw dɛn de du am

$().popover(opshɔn dɛn) .

Initializes popovers fɔ wan ɛlimɛnt kɔllɛkshɔn.

.popover('sho') .

Rivɛl wan ɛlimɛnt dɛn popover.

$ ( '#ɛlimɛnt' ). popover ( ‘sho’ ) .

.popover('ayd') .

Ayd wan ɛlimɛnt dɛn popover.

$ ( '#ɛlimɛnt' ). popover ( ‘ayd’ ) .

.popover('tɔgl') .

Toggles wan ɛlimɛnt dɛn popover.

$ ( '#ɛlimɛnt' ). popover ( ‘tɔgl’ ) .

Bɔt di alɛt dɛn

Di alɛt plɔgin na wan smɔl klas fɔ ad klos funkshɔnaliti to alɛt dɛn.

Ɛgzampul alɛt dɛn

Di alɛt plɔgin de wok pan rɛgyula alɛt mɛsej dɛn, ɛn blok mɛsej dɛn.

Yuz di bootstrap-alert.js

Ɛnable fɔ dismis wan alɛt bay javascript:

$ ( ".alɛt" ). alɛrt () .

Mak-ap fɔ di tin dɛn we de apin

Jɔs ad data-dismiss="alert"to yu klos bɔtin fɔ gi yu wan alɛt klos funkshɔnaliti ɔtomɛtik wan.

<a klas = "klos" data-dismiss = "alɛt" href = "#" > &tayms; </a> fɔ di wan dɛn we de   

Di we aw dɛn de du am

$().alɛrt() .

Rap ɔl di alɛt dɛn wit klos funkshɔnaliti. Fɔ mek yu alɛt dɛn animate aut we dɛn lɔk, mek shɔ se dɛn gɛt di .fadeɛn .inklas we dɔn ɔlrɛdi aplay to dɛn.

.alert('klos') .

Klos wan alɛt.

$ ( ".alɛt" ). alert ( ‘klos’ ) .

Di tin dɛn we kin apin

Bootstrap in alɛt klas de ɛksplɔz sɔm ivintɛns fɔ huk insay alert funkshɔnaliti.

$ ( '#mi-alɛt' ). bind ( 'klos' , fɛnshɔn () {   
  // du sɔntin...
}) bin de.

Bɔt

Du mɔ wit bɔtin dɛn. Kɔntrol bɔtin de tɔk ɔ mek grup dɛn fɔ bɔtin fɔ mɔ kɔmpɔnɛnt dɛn lɛk tulba dɛn.

Ɛgzampul we dɛn kin yuz

Yuz di bɔtin dɛn plɔgin fɔ stet ɛn tɔgl dɛn.

Yuz di bootstrap-bɔt.js

Enable bɔtin dɛn tru javascript:

$ ( '.nav-tab dɛn' ). bɔtin () .

Mak-ap fɔ di tin dɛn we de apin

Data atribyut dɛn na impɔtant tin fɔ di bɔtin plɔgin. Chek di ɛgzampul kɔd we de dɔŋ fɔ di difrɛn kayn mak dɛn.

<!-- Ad data-toggle="button" fɔ aktiv toggling pan wan singl bɔtin -->
<bɔtin klas = "btn" data-tɔgl = "bɔt" > Singl Tɔgl </bɔtin>  
 
<!-- Ad data-toggle="buttons-checkbox" fɔ chɛkbɔks stayl tɔgl pan btn-grup -->
<div klas = "btn-grup" data-tɔgl = "bɔt-chɛkbɔks" >  
  <bɔtin klas = "btn" > Lɛft </bɔtin> 
  <bɔtin klas = "btn" > Midul </bɔtin> 
  <bɔtin klas = "btn" > Rayt </bɔtin> 
</div> fɔ di wan dɛn we de
 
<!-- Ad data-toggle="buttons-radio" fɔ redio stayl tɔgl na btn-grup -->
<div klas = "btn-grup" data-tɔgl = "bɔtin-redio" >  
  <bɔtin klas = "btn" > Lɛft </bɔtin> 
  <bɔtin klas = "btn" > Midul </bɔtin> 
  <bɔtin klas = "btn" > Rayt </bɔtin> 
</div> fɔ di wan dɛn we de

Di we aw dɛn de du am

$().bɔtin('tɔgl')

Toggles push stet. Gi di bɔtin di we aw i tan lɛk se dɛn dɔn aktiv am.

<bɔtin klas = "btn" data-tɔgl = "bɔt" > ... </bɔtin>   

$().bɔtin('lod')

Set bɔtin stet to lod - disables bɔtin ɛn swap tɛks to lod tɛks. Lod tɛks fɔ difayn pan di bɔtin ɛlimɛnt yuz di data atribyut data-loading-text.

<bɔtin klas = "btn" data-lɔd-tɛks = "lɔd tin..." > ... </bɔtin>   

$().bɔtin('riset')

Riset bɔtin stet - swap tɛks to ɔrijinal tɛks.

$().bɔtin(string) .

Riset bɔtin stet - swap tɛks to ɛni data difayn tɛks stet.

<bɔt klas = "btn" data-kɔmplit-tɛks = " dɔn!" > ... </bɔtin>   
<skript>
  $ ( '.btn' ) we de na di wɔl. bɔtin ( ‘kɔmplit’ ) .
</skript>

Bɔt

Gɛt bays stayl ɛn fleksibul sɔpɔt fɔ kɔlapsibl kɔmpɔnɛnt dɛn lɛk akodiɔn ɛn nevigishɔn.

* I nid fɔ de insay di Transitions plɔgin.

Ɛgzampul fɔ sho se di akodiɔn

Yuz di kollaps plɔgin, wi bil wan simpul akkɔdin stayl widget:

Yuz di bootstrap-kollaps.js

Ɛnable via javascript:

$ ( ".kɔlaps" ). fɔdɔm () .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Jɔs ad data-toggle="collapse"ɛn wan data-targetto ɛlimɛnt fɔ ɔtomɛtik asaynd kɔntrol fɔ wan kollapsbul ɛlimɛnt. Di data-targetatribyut aksept wan css sɛlɛktɔ fɔ aplay di kɔlaps to. Mek shɔ se yu ad di klas collapseto di ɛlimɛnt we yu kin kɔlap. If yu want fɔ mek i opin difɔlt, ad di ɔda klas in.

<bɔt klas = "btn btn-denja" data-tɔgl = "kɔlaps" data-target = "#demo" >   
  simpul we pɔsin kin kɔlap
</bɔtin>
 
<div id = "demo" klas = "kɔlaps insay" > ... </div>  

Di we aw dɛn de du am

.kollaps(opshɔn dɛn) .

Aktiv yu kɔntinyu as wan ɛlimɛnt we pɔsin kin kɔlap. Aksept wan opshɔnal opshɔn dɛn object.

$ ( '#mi Kɔlapsibl' ). kollaps ({
  toggle : na lay lay tɔk 
}) bin de.

.kollaps('tɔgl') .

Toggles wan kollapsibl elemɛnt fɔ sho ɔ ayd.

.kollaps('sho') .

Sho wan ɛlimɛnt we pɔsin kin kɔlap.

.kollaps('ayd') .

I de ayd wan ɛlimɛnt we pɔsin kin kɔlap.

Di tin dɛn we kin apin

Bootstrap in kollaps klas de ɛksplɔz sɔm ivintɛns fɔ huk insay kollaps funkshɔnaliti.

$ ( '#mi Kɔlapsibl' ). on ( 'ayd' , fɛnshɔn () {   
  // du sɔntin...
}) bin de.

Bɔt

Wan jenɛrik plɔgin fɔ sayklis tru ɛlimɛnt dɛn. Wan mɛri-go-rɔund.

Ɛgzampul fɔ karusel

Wach di slayd sho we de dɔŋ ya.

Fɔs Thumbnail lɛbl

Kras jɔsto odio, dapibus asid fasilisis in, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

Sɛkɔn Thumbnail lɛbl

Kras jɔsto odio, dapibus asid fasilisis in, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

Tɔd Thumbnail lɛbl

Kras jɔsto odio, dapibus asid fasilisis in, egestas eget quam. Donec id elit non mi porta gravida na eget metus. Nullam id dolor id nibh ultrisis vehikula ut id elit.

‹ Di wan dɛn we de › Di wan dɛn we de

We yu de yuz bootstrap-carousel.js

Kɔl bay javascript:

$ ( '.karɔsel' ). karusel () ɛn .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Data atribyut dɛn de yuz fɔ di fɔs ɛn nɛks kɔnrol dɛn. Chek di ɛgzampul mak we de dɔŋ ya.

<div id = "miKarosel" klas = "karusel slayd" >  
  <!-- Karusel tin dɛn -->
  <div klas = "karusel-ina" > 
    <div klas = "aktiv aytem" > ... </div> 
    <div klas = "aytem" > ... </div> 
    <div klas = "aytem" > ... </div> 
  </div> fɔ di wan dɛn we de
  <!-- Karusel nav -->
  <a klas = "karusel-kɔntrol lɛf" href = "#miKarosel" data-slayd = "prev" > ‹ </a> fɔ di wan dɛn we de   
  <a klas = "karusel-kɔntrol rayt" href = "#miKarosel" data-slayd = "nɛks" > › </a> fɔ di wan dɛn we de   
</div> fɔ di wan dɛn we de

Di we aw dɛn de du am

.karosel(opshɔn dɛn) .

Initializes di carousel wit wan opshonal opshon objecten stat saikl tru tin dem.

$ ( '.karɔsel' ). karɔsel ({
  intaval : 2000 na di ia 
}) bin de.

.karosel('saykl') .

Saykl dɛn tru di karusel tin dɛn frɔm lɛft to rayt.

.karosel(‘pɔz’) .

Stɔp di karusel fɔ sayklɔs tru tin dɛn.

.karosel(nɔmba) .

Saykl di karusel to wan patikyula freym (0 bays, we fiba wan arenjmɛnt).

.karosel(' bifo') .

Saykl dɛn to di tin we bin dɔn de bifo.

.karosel('nɛks')

Saykl dɛn to di nɛks tin.

Di tin dɛn we kin apin

Bootstrap in karusel klas de ɛksplɔz tu ivintɛns fɔ huk insay karusel funkshɔnaliti.

Bɔt

Wan besik, izi fɔ ɛkstɛnd plɔgin fɔ mek kwik kwik wan elegant tayp-hɛd wit ɛni fɔm tɛks input.

Ɛgzampul

Start fɔ tayp na di fil we de dɔŋ fɔ sho di rizɔlt dɛn we de bifo di tayp.

Yuz di bootstrap-typeahead.js we yu de yuz

Kɔl di typeahead bay javascript:

$ ( '.tayp bifo' ). tayp bifo () .

Di tin dɛn we yu kin pik fɔ du

Mak-ap fɔ di tin dɛn we de apin

Ad data atribyut fɔ rɛjista wan ɛlimɛnt wit typeahead funkshɔnaliti.

<input tayp = "tɛks" data-provayd = "tayp bifo" >  

Di we aw dɛn de du am

.typeahead(opshɔn dɛn) .

Initialize wan input wit wan typeahead.