Motho ka o tee ka o tee goba e kgobokeditšwego

Di-plugin di ka akaretšwa ka botee (le ge e le gore tše dingwe di na le dilo tšeo di nyakago go ithekga), goba ka moka ka nako e tee. Bobedi bootstrap.js le bootstrap.min.js di na le di-plugin ka moka ka faeleng e tee.

Dika tša datha

O ka šomiša di-plugin ka moka tša Bootstrap ka go hlweka ka API ya go swaya ntle le go ngwala mola o tee wa JavaScript. Ye ke API ya maemo a pele ya Bootstrap gomme e swanetše go ba go naganelwa ga gago ga mathomo ge o diriša plugin.

Seo se boletšwe, maemong a mangwe go ka ba mo go kganyogegago go tima mošomo wo. Ka hona, re boetse re fana ka bokgoni ba ho thibela ya data tšobotsi API ka unbinding liketsahalo tsohle ka 'mele namespaced le `'data-api'`. Se se lebelega ka tsela ye:

$ ( 'mmele' ). tima ( '.data-api' ) .

Ka go fapana le moo, go nepiša plugin ye e itšego, akaretša fela leina la plugin bjalo ka sekgoba sa maina gotee le sekgoba sa maina sa data-api ka tsela ye:

$ ( 'mmele' ). tima ( '.temošo.data-api' ) .

API ya lenaneo

Re dumela gape gore o swanetše go kgona go diriša di-plugin ka moka tša Bootstrap feela ka JavaScript API. Di-API ka moka tša setšhaba ke mekgwa e tee, yeo e ka tsenywago diketane, gomme e bušetša kgoboketšo yeo e dirilwego ka yona.

$ ( ".btn.kotsi" ). konopo ( "toggle" ). addClass ( "mafura" ) .

Mekgwa ka moka e swanetše go amogela selo sa dikgetho tša boikhethelo, thapo yeo e nepišago mokgwa wo o itšego, goba go se be le selo (yeo e thomago polaka ka boitshwaro bja go se fetoge):

$ ( "#Modal ya ka" ). modal () // e thomilwe ka di-default                       
$ ( "#Modal ya ka" ). modal ({ khiboto : maaka }) // e thomilwe ka ha ho khiboto     
$ ( "#Modal ya ka" ). modal ( 'bontšha' ) // e thoma le go bitša pontšho ka pela                

Plugin ye nngwe le ye nngwe gape e pepentšha moagi wa yona wo tala godimo ga thepa ya `Moagi`: $.fn.popover.Constructor. Ge o rata go hwetša mohlala wo o itšego wa plugin, o e bušetše thwii go tšwa go elemente: $('[rel=popover]').data('popover').

Ga go na Thulano

Ka dinako tše dingwe go a nyakega go diriša di-plugin tša Bootstrap le ditlhako tše dingwe tša UI. Maemong a, dithulano tša sekgoba sa maina di ka direga ka dinako tše dingwe. Ge se se direga, o ka bitša .noConflictplugin yeo o nyakago go bušetša boleng bja yona.

var Konopo ya bootstrap = $ . fn . konopo ya . noConflict () // bušetša $.fn.button go boleng bjo bo abetšwego peleng 
$ . fn . bootstrapBtn = bootstrapButton             // fana ka $ (). bootstrapBtn tshebetso ya bootstrap

Ditiragalo

Bootstrap e fana ka ditiragalo tša tlwaelo bakeng sa bontši bja ditiro tše di kgethegilego tša plugin. Ka kakaretšo, tše di tla ka mokgwa wa go se fele le wa lediri la nakong ye e fetilego - moo lediri la go se fele (ex. show) le hlohleletšwago mathomong a tiragalo, gomme sebopego sa lona sa lediri la nakong ye e fetilego (ex. shown) e hlohleletša ge tiro e phethilwe.

Ditiragalo ka moka tša go se fele di fa mošomo wa preventDefault. Se se fa bokgoni bja go emiša phethagatšo ya tiro pele e thoma.

$ ( '#Modal ya ka' ). ka ( 'bontša' , mosebetsi ( e ) {   
    ge e ba (! ya data ) khutlela e . preventDefault () // e emiša modal go bontšhwa   
}) .

Mabapi le diphetogo

Bakeng sa diphetho tše bonolo tša phetogo, akaretša bootstrap-transition.js gatee go bapa le difaele tše dingwe tša JS. Ge e ba o diriša bootstrap.js yeo e kgobokeditšwego (goba yeo e fokoditšwego) , ga go nyakege gore o akaretše se—se šetše se le gona.

Diriša melato

Mehlala e mmalwa ya plugin ya phetogo:

• Sliding kapa fading ka modals
• Fading tsoa dithepo
• Ditemošo tša go fifala
• Diphaephe tša carousel tše di thelelago

Mehlala

Di-modal di nolofaditšwe, eupša di feto-fetoga, di kgopela poledišano ka bonnyane bjo bo nyakegago bja mošomo le dilo tše di sa fetogego tše bohlale.

Mohlala wa static

Modal ye e tšweleditšwego ka hlogo, mmele, le sete ya ditiro ka go letlakala la ka fase.

<div sehlopha = "modal pata fifala" > 
  <div sehlopha = "modal-hlooho" > 
    < mofuta wa konopo = "konopo" sehlopha = "tswalela" ya data-dismiss = "modal" aria-hidden = "nete" > &nako; </konope>    
    <h3> Hlogo ya modale </h3>
  </div> e
  <div sehlopha = "modal-mmele" > 
    <p> Mmele o tee o mobotse... </p>
  </div> e
  <div sehlopha = "modal-footer" > 
    <a href = "#" sehlopha = "btn" > Tswala </a>  
    <a href = "#" class = "btn btn-primary" > Boloka diphetogo </a>  
  </div> e
</div> e

Demo e phelang

Toggle a modal ka JavaScript ka ho tobetsa konopo e ka tlase. E tla thelela fase gomme ya fifala ka gare go tšwa godimo ga letlakala.

<!-- Konopo ya go hlohleletša modal -->
<a href = "#myModal" karolo = "konope" sehlopha = "btn" data-toggle = "modal" > Thoma mokgwa wa demo </a>    
 
<!-- Modal -->
<div id = "myModal" sehlopha = "modal pata fifala" tabindex = "-1" karolo = "poledisano" aria-labelledby = "myModalLabel" aria-patilwe = "nete" >      
  <div sehlopha = "modal-hlooho" > 
    < mofuta wa konopo = "konopo" sehlopha = "tswala" ya data-dismiss = "modal" aria-hidden = "nete" > × </konopo>    
    <h3 id = "myModalLabel" > Hlogo ya mokgwa </h3> 
  </div> e
  <div sehlopha = "modal-mmele" > 
    <p> Mmele o tee o mobotse... </p>
  </div> e
  <div sehlopha = "modal-footer" > 
    < sehlopha sa konopo = "btn" ya data-dismiss = "modal" aria-hidden = "nete" > Tswala </konopo>   
    <button class = "btn btn-primary" > Boloka diphetogo </konope> 
  </div> e
</div> e

Tšhomišo

Ka dika ya data

Dira gore modal e šome ntle le go ngwala JavaScript. Beakanya data-toggle="modal"godimo ga elemente ya molaodi, go swana le konope, gotee le data-target="#foo"goba href="#foo"go nepiša modal ye e itšego go fetola.

< mohuta wa konope = "konope" ya data-toggle = "modal" ya data-sepheo = "#myModal" > Thoma modal </konopo>   

Ka JavaScript

Bitsa modal ka id myModalka mola o le mong oa JavaScript:

$ ( '#Modal ya ka' ). modal ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-backdrop="".

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

Mekgwa ya go šoma

.modal(dikgetho) .

E dira gore diteng tša gago di šome bjalo ka modal. E amogela dikgetho tša boikhethelo object.

$ ( '#Modal ya ka' ). modal ({ ) .
  khiiboto : maaka 
}) .

.modal (' go fetola') .

Ka seatla e fetola modal.

$ ( '#Modal ya ka' ). modal ( 'go fetola' ) .

.modal ('bontša') .

Ka letsoho bula e modal.

$ ( '#Modal ya ka' ). modal ( 'bontša' ) .

.modal('pata') .

Ka letsoho pata e modal.

$ ( '#Modal ya ka' ). modal ( 'pata' ) .

Ditiragalo

Bootstrap o modal sehlopha pepesa liketsahalo tse seng kae bakeng sa hooking ka modal tshebetso.

$ ( '#Modal ya ka' ). ka ( 'e patiloeng' , mosebetsi () {   
  // dira se sengwe...
}) .

Mehlala

Oketša dimenu tša go theoga go mo e nyakilego go ba selo le ge e le sefe ka plugin ye e bonolo, go akaretša le navbar, dithepo le dipilisi.

Ka gare ga navbar

Ka gare ga dithepo

Tšhomišo

Ka dika ya data

Oketša data-toggle="dropdown"go kgokagano goba konope go fetoša go theoga.

<div sehlopha = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "go theoga" href = "#" > Sehlohleletši sa go theoga </a>   
  <ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div> e

Go boloka di-URL di sa senyega, diriša data-targetseka go e na le href="#".

<div sehlopha = "dropdown" > 
  <a sehlopha = "go theoga-go fetola" id = "dLabel" tema = "konope" ya data-toggle = "go theoga" ya data-sepheo = "#" href = "/letlakala.html" >      
    Dropdown ya go theoga
    <b sehlopha = "caret" </b> 
  </a>
  <ul sehlopha = "thepo ya go theoga" tema = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div> e

Ka JavaScript

Bitša di-drolodown ka JavaScript:

$ ( '.go theoga-go fetola' ). go theoga () .

Dikgetho

Ga go selo

Mekgwa ya go šoma

$ ().dropdown ('fetola') .

Api ya lenaneo bakeng sa go fetola dimenu bakeng sa navbar e filwego goba go sepelasepela mo go nago le dithepo.

Mohlala ka navbar

The ScrollSpy plugin ke bakeng sa ka tsela e iketsang ntjhafatsa nav diphetho thehiloeng scroll boemo. Scroll lefelo ka fase ga navbar gomme o lebelele phetogo ya sehlopha se se šomago. Diaetheme tša ka fasana tša go theoga di tla hlaolwa gape.

Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja scrollspy go go sepelasepela ga gago ga topbar, oketša feela data-spy="scroll"go elemente yeo o nyakago go e hlola (ka tlwaelo kudu se e tla ba mmele) le data-target=".navbar"go kgetha gore ke nav efe yeo o tlago go e diriša. O tla nyaka go šomiša scrollspy ka .navkarolo.

<mmele ya data-spy = "phetola" ya data-sepheo = ".navbar" > ... </mmele>  

Ka JavaScript

Bitsa scrollspy ka JavaScript:

$ ( '# navbar' ). scrollspy () .

Mekgwa ya go šoma

.scrollspy (' hlabolla') .

Ge o diriša scrollspy ka kopanelo le go tlaleletša goba go tloša dielemente go tšwa go DOM, o tla swanelwa ke go bitša mokgwa wa go hlabolla go swana le bjalo:

$ ( '[data-spy = "phetola"]' ). e mong le e ( mosebetsi () { .  
  var $ sehloela = $ ( ena ). scrollspy ( 'tlhabolla' ) .
});

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset="".

Ditiragalo

Dithepo tša mohlala

Oketša mošomo wa thepo ya ka pela, ye e fetogago go phetogo ka diphanephe tša diteng tša selegae, gaešita le ka dimenu tša go theoga.

Tšhomišo

Kgontšha dithepo tša dithepo ka JavaScript (thepo ye nngwe le ye nngwe e swanetše go tsenywa tirišong ka botee):

$ ( '#Tab ya ka a' ). klika ( mosebetsi ( e ) { .  
  e . thibelaDefault ();
  $ ( ena ). tab ( 'bontša' );
}) .

O ka tsenya tirišong dithepo ka botee ka ditsela tše mmalwa:

$ ( '# Tab ya ka a [href="#profaele"]' ). tab ( 'bontša' ); // Kgetha tab ka lebitso 
$ ( '#Tab ya ka a:pele' ). tab ( 'bontša' ); // Kgetha tab ya pele 
$ ( '# Tab ya ka a: ya mafelelo' ). tab ( 'bontša' ); // Kgetha tab ya ho qetela 
$ ( '# Tab ya ka li: eq (2) a' ). tab ( 'bontša' ); // Kgetha tab ya boraro (0-indexed) . 

Go swaya

O ka tsenya tirišong go sepelasepela ga thepo goba pilisi ntle le go ngwala JavaScript efe goba efe ka go fo laetša data-toggle="tab"goba data-toggle="pill"godimo ga elemente. Go tlaleletša diklase tša navle nav-tabsgo thepo go ultla diriša setaele sa thepo ya Bootstrap.

<ul sehlopha = "nav nav-dithepo" > 
  <li><a href = "#gae" data-toggle = "thepo" > Gae </a></li>  
  <li><a href = "#profaele" data-toggle = "thepo" > Profaele </a></li>  
  <li><a href = "#melaetša" data-toggle = "thepo" > Melaetša </a></li>  
  <li><a href = "#dipeakanyo" data-toggle = "thepo" > Dipeakanyo </a></li>  
</ul>

Mekgwa ya go šoma

$ (). thepo ya

E tsenya tirišong elemente ya thepo le setshelo sa diteng. Tab e swanetše go ba le e ka ba a data-targetgoba a go hrefnepiša noutu ya setshelo ka go DOM.

<ul sehlopha = "nav nav-dithepo" id = "Tab ya ka" >  
  <li class = "mafolofolo" ><a href = "#gae" > Gae </a></li>  
  <li><a href = "#profaele" > Profaele </a></li> 
  <li><a href = "#melaetša" > Melaetša </a></li> 
  <li><a href = "#dipeakanyo" > Dipeakanyo </a></li> 
</ul>
 
<div sehlopha = "tab-diteng" > 
  <div sehlopha = "thepo-lefasetere le sebetsang" id = "gae" > ... </div>  
  <div sehlopha = "thepo-lefasetere" id = "profaele" > ... </div>  
  <div class = "tab-pane" id = "melaetša" > ... </div>  
  <div sehlopha = "tab-pane" id = "dipeakanyo" > ... </div>  
</div> e
 
<sengwalwa>
  $ ( mosebetsi () { .  
    $ ( '# Tab ya ka a: ya mafelelo' ). tab ( 'bontša' );
  }) .
</script>

Ditiragalo

$ ( 'a [data-toggle = "thepo"]' ). ka ( 'bontšhitšwe' , mošomo ( e ) { .   
  e . sepheo // kenya tshebetsong tab
  e . relatedTarget // thepo ya peleng
}) .

Mehlala

E hlohleleditšwe ke plugin ye botse kudu ya jQuery.tipsy yeo e ngwadilwego ke Jason Frame; Dikeletšo tša didirišwa ke phetolelo ye e mpshafaditšwego, yeo e sa ithekgego ka diswantšho, e šomiša CSS3 bakeng sa ditshwantšho tša go phela, le dika tša datha bakeng sa polokelo ya thaetlele ya selegae.

Ka mabaka a tshebetso, tooltip le popover data-apis ba kgetha ka, ho bolela hore u lokela ho qala ka bowena .

Beakanya godimo ga dikgokagano tše di lego ka mo tlase go bona ditšhišinyo tša didirišwa:

Ditaelo tše nne

Dikeletšo tša didirišwa ka dihlopha tša go tsenya

Ge o šomiša ditšhišinyo tša didirišwa le dipopover ka dihlopha tša tsenyo tša Bootstrap, o tla swanelwa ke go beakanya containerkgetho ya (yeo e ngwadilwego ka mo tlase) go efoga ditlamorago tše di sa nyakegego.

Tšhomišo

Hlohleletša keletšo ya sedirišwa ka JavaScript:

$ ( '#mohlala' ). tooltip ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Go swaya

<a href = "#" data-toggle = "keletšo ya sedirišwa" title = "keletšo ya mathomo ya sedirišwa" > bea godimo ga ka </a>   

Mekgwa ya go šoma

$ (). tooltip (dikgetho) .

E kgomaretša sedirišwa sa go swara sedirišwa go kgoboketšo ya elemente.

.tooltip ('bontša') .

E utolla keletšo ya sedirišwa ya elemente.

$ ( '# elemente' ). tooltip ( 'bontša' ) .

.tooltip ('pata') .

E uta keletšo ya sedirišwa ya elemente.

$ ( '# elemente' ). tooltip ( 'pata' ) .

.sedirišwa ('toggle') .

E fetola keletšo ya sedirišwa ya elemente.

$ ( '# elemente' ). keletšo ya sedirišwa ( 'toggle' ) .

.tooltip ('senya') .

E uta le go senya sedirišwa sa elemente.

$ ( '# elemente' ). tooltip ( 'senya' ) .

Mehlala

Oketša dikhupetšo tše nnyane tša dikagare, go swana le tšeo di lego go iPad, go elemente efe goba efe ya go apa tshedimošo ya bobedi. Hover godimo ga konope go hlohleletša popover. E nyaka gore Tooltip e akaretšwe.

Popover e sa fetoheng

Dikgetho tše nne di a hwetšagala: di logagantšwe ka godimo, ka go le letona, ka tlase le ka go le letshadi.

Ga go na go swaya mo go bontšhitšwego bjalo ka di-popover tšeo di tšweleditšwego go tšwa go JavaScript le diteng ka gare ga dataseka.

Demo e phelang

Ditaelo tše nne

Tšhomišo

Kgontšha di-popover ka JavaScript:

$ ( '#mohlala' ). popover ( dikgetho ) .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-animation="".

Go swaya

Ka mabaka a tshepedišo, Tooltip le Popover data-apis di kgetha go tsena Ge o rata go di šomiša e no laetša kgetho ya mokgethi.

Mekgwa ya go šoma

$ ().popover (dikgetho) .

E thoma di-popovers bakeng sa kgoboketšo ya elemente.

.popover('bontša') .

E senola e elements popover.

$ ( '# elemente' ). popover ( 'bontša' ) .

.popover('pata') .

Pata e elements popover.

$ ( '# elemente' ). popover ( 'pata' ) .

.popover ('fetola') .

Toggles e elements popover.

$ ( '# elemente' ). popover ( 'go fetola' ) .

.popover('senya') .

Pata le go senya popover ya elemente.

$ ( '# elemente' ). popover ( 'senya' ) .

Ditemošo tša mohlala

Oketša mošomo wa go raka go melaetša ka moka ya temošo ka plugin ye.

Tšhomišo

Kgontšha go rakwa ga temošo ka JavaScript:

$ ( ".temošo" ). temošo () .

Go swaya

E no oketša data-dismiss="alert"go konope ya gago ya go tswalela go fa ka go iketla mošomo wa go tswalela temošo.

<a sehlopha = "tswalela" data-dismiss = "temošo" href = "#" > & dinako; </a>   

Mekgwa ya go šoma

$ (). temošo () .

E phuthela ditemošo ka moka ka tšhomišo ya kgauswi. Go dira gore ditemošo tša gago di phele ge di tswaletšwe, kgonthiša gore di na le .fadele .insehlopha seo se šetšego se dirišitšwe go tšona.

.alert ('tswalela') .

E tswalela temošo.

$ ( ".temošo" ). temošo ( 'tswalela' ) .

Ditiragalo

Sehlopha sa temošo sa Bootstrap se pepentšha ditiragalo tše mmalwa bakeng sa go goketša mošomong wa temošo.

$ ( '#temošo ya ka' ). tlama ( 'koaloa' , mosebetsi () {   
  // dira se sengwe...
}) .

Ditirišo tša mohlala

Dira mo gontši ka dikonope. Taolo konope e bolela goba hlama dihlopha tša dikonope bakeng sa dikarolo tše dingwe go swana le dibara tša didirišwa.

Stateful

Oketša data-loading-text="Loading..."go šomiša boemo bja go laetša godimo ga konope.

< mohuta wa konope = "konope" sehlopha = "btn btn-primary" data-loading-text = "E laetša ..." > Boemo bja go laetša </konope>   

Toggle e le nngwe

Oketša data-toggle="button"go tsenya tirišong go fetola go konope e tee.

< mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" data-toggle = "konopo" > Fetola e le 'ngoe </konopo>   

Lepokisi la go hlahloba

Oketša data-toggle="buttons-checkbox"bakeng sa go fetola setaele sa lepokisi la go hlahloba go btn-group.

<div sehlopha = "btn-sehlopha" ya data-toggle = "dikonopo-lebokose la hlahloba" >  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Letsohong le letšehali </konopo>  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Bohareng </konopo>  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Tokelo ya </konopo>  
</div> e

Seyalemoya

Add data-toggle="buttons-radio"bakeng sa radio setaele toggling ka btn-sehlopha.

<div sehlopha = "btn-sehlopha" ya data-toggle = "dikonopo-radio" >  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Letsohong le letšehali </konopo>  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Bohareng </konopo>  
  < mofuta wa konopo = "konopo" sehlopha = "btn btn-primary" > Tokelo ya </konopo>  
</div> e

Tšhomišo

Kgontšha dikonope ka JavaScript:

$ ( '.nav-dithepo' ). konopo () .

Go swaya

Dika tša data ke tša bohlokwa go plugin ya konope. Lekola khoutu ya mohlala ka mo tlase bakeng sa mehuta e fapa-fapanego ya go swaya.

Dikgetho

Ga go selo

Mekgwa ya go šoma

$ (). konopo ( 'toggle') .

Toggles kgorometsa boemo. E fa konope ponagalo ya gore e tsentšwe tirišong.

< mofuta wa konopo = "konopo" sehlopha = "btn" data-toggle = "konopo" > ... </konopo>    

$ (). konopo ( 'ho laela') .

E beakanya boemo bja konope go laetša - e šitiša konope le go fapantšha sengwalwa go laetša sengwalwa. Go laetša sengwalwa go swanetše go hlalošwa godimo ga elemente ya konope ka go šomiša seka sa datha data-loading-text.

< mohuta wa konope = "konope" sehlopha = "btn" data-loading-text = "go laetša dilo ..." > ... </konope>    

$ (). konopo ( 'reset') .

E beakanya gape boemo bja konope - e fapantšha sengwalwa go sengwalwa sa mathomo.

$ (). konopo (khoele) .

E beakanya gape boemo bja konope - e fapantšha sengwalwa go seemo sefe goba sefe sa sengwalwa seo se hlalošitšwego sa datha.

< mofuta wa konopo = "konopo" sehlopha = "btn" ya data-feletseng-sengwalwa = "qetile!" > ... </konope>    
<sengwalwa>
  $ ( '.bt n ' ) ) . konopo ( 'e feletseng' ) .
</script>

Mabapi le

Hwetša mekgwa ya motheo le thekgo ye e fetofetogago ya dikarolo tše di phuhlamago go swana le di-accordion le go sepelasepela.

* E nyaka gore plugin ya Diphetogo e akaretšwe.

Mohlala wa accordion

Ka go diriša plugin ya go phuhlama, re ile ra aga sedirišwa se bonolo sa setaele sa accordion:

<div sehlopha = "accordion" id = "accordion2" >  
  <div sehlopha = "accordion-sehlopha" > 
    <div sehlopha = "hlogo ya accordion" > 
      <a sehlopha = "accordion-toggle" data-toggle = "ho phuhlama" ya data-motswadi = "# accordion2" href = "# phuhlamaOne" >    
        Ntlha ya Sehlopha yeo e ka phuhlamago #1
      </a>
    </div> e
    <div id = "collapseOne" class = "go phuhlama ga mmele wa accordion ka" >  
      <div sehlopha = "accordion-ka hare" > 
        Anim pariatur cliche ya go swana le yona...
      </div> e
    </div> e
  </div> e
  <div sehlopha = "accordion-sehlopha" > 
    <div sehlopha = "hlogo ya accordion" > 
      <a sehlopha = "accordion-toggle" data-toggle = "ho phuhlama" ya data-motswadi = "# accordion2" href = "# phuhlamaTwo" >    
        Ntlha ya Sehlopha e Phuthelelang #2
      </a>
    </div> e
    <div id = "collapseTwo" sehlopha = "acordion-mmele phuhlama" >  
      <div sehlopha = "accordion-ka hare" > 
        Anim pariatur cliche ya go swana le yona...
      </div> e
    </div> e
  </div> e
</div> e
...

O ka boela wa sebelisa plugin ntle le accordion markup. Dira gore konope e fetoše go katološa le go phuhlama ga elemente ye nngwe.

< mofuta wa konopo = "konopo" sehlopha = "btn btn-kotsi" ya data-toggle = "ho phuhlama" ya data-sepheo = "# demo" >    
  bonolo collapsible
</konope>
 
<div id = "demo" sehlopha = "phuhlama ka" > ... </div>  

Tšhomišo

Ka dika ya data

E no tlaleletša data-toggle="collapse"le data-targetgo elemente go abela ka go iketla taolo ya elemente ye e phuhlamago. Sebopego data-targetse amogela mokgethi wa css go diriša go phuhlama go yena. Kgonthiša gore o tlaleletša sehlopha collapsego elemente ye e phuhlamago. Ge e ba o rata gore e bulege ka go ikemela, oketša sehlopha sa tlaleletšo in.

Go oketša taolo ya sehlopha ya go swana le accordion go taolo ye e phuhlamago, oketša seka sa datha data-parent="#selector". Lebelela demo go bona se se šoma.

Ka JavaScript

Kgontšha ka seatla ka:

$ ( ".e phuhlama" ). go phuhlama () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-parent="".

Mekgwa ya go šoma

.collapse(dikgetho) .

E dira gore diteng tša gago di šome bjalo ka elemente ye e phuhlamago. E amogela dikgetho tša boikhethelo object.

$ ( '# e ka phuhlamang ya ka' ). go phuhlama ({
  toggle : maaka 
}) .

.collapse ('fetola') .

E fetola elemente ye e phuhlamago go bontšhwa goba ye e utilwego.

.collapse ('bontša') .

E bontšha elemente yeo e ka phuhlamago.

.collapse('pata') .

Pata elemente e phuhlamang.

Ditiragalo

Sehlopha sa go phuhlama sa Bootstrap se pepentšha ditiragalo tše mmalwa tša go goketša ka mošomo wa go phuhlama.

$ ( '# e ka phuhlamang ya ka' ). ka ( 'e patiloeng' , mosebetsi () {   
  // dira se sengwe...
}) .

Mohlala wa carousel

Pontšo ya diselaete ka fase e bontšha plugin ya kakaretšo le karolo ya go sepela ka dipaesekele ka dielemente tša go swana le carousel.

Letshwao la Pele la Setshwantsho se Senyenyane

Cras justo odio, dapibus ac facilisis ka, di-egestas di eget quam. Donec id elit e seng mi porta gravida ka eget metus. Nullam id dolor id nibh dikoloi tša dikoloi ut id elit.

Second Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Third Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ . › .

<div id = "Carousel ya ka" sehlopha = "slide ya carousel" >  
  <ol sehlopha = "carousel-ditšhupetšo" > 
    <li ya data-sepheo = "#myCarousel" ya data-slide-ho = "0" sehlopha = "mafolofolo" </li>   
    <li ya data-sepheo = "#myCarousel" ya data-slide-ho = "1" ></li>  
    <li ya data-sepheo = "#myCarousel" ya data-slide-ho = "2" ></li>  
  </ol>
  <!-- Dilo tša carousel -->
  <div sehlopha = "carousel-ka hare" > 
    <div class = "ntho e sebetsang" > ... </div> 
    <div sehlopha = "ntho" > ... </div> 
    <div sehlopha = "ntho" > ... </div> 
  </div> e
  <!-- Carousel nav -->
  <a sehlopha = "carousel-taolo e letšehali" href = "#Carousel ya ka" data-slide = "pele" > ‹ </a>   
  <a sehlopha = "tokelo ya taolo ya carousel" href = "#Carousel ya ka" ya data-slide = "e latelang" > › </a>   
</div> e

Tšhomišo

Ka dika ya data

Diriša dika tša data go laola gabonolo boemo bja carousel. data-slidee amogela mantšu a bohlokwa prevgoba next, yeo e fetošago maemo a selaete ge e bapetšwa le maemo a yona a bjale. Ka go fapana le moo, šomiša data-slide-togo fetiša tšhupamabaka ya selaete ye tala go carousel data-slide-to="2", yeo e tlolago's boemo bja selaete go ya go tšhupamabaka ye e itšego yeo e thomago ka 0.

Ka JavaScript

Bitsa carousel ka letsoho le:

$ ( '.kharosele' ). carousel () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScriptz. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-interval="".

Mekgwa ya go šoma

.carousel(dikgetho) .

Initializes carousel le dikgetho boikhethelo objectle qala baesekele ka dintho.

$ ( '.kharosele' ). carousel ({ ) .
  sekgoba : 2000 
}) .

.carousel ('modikologo') .

Didikologa ka dilo tša carousel go tloga go le letshadi go ya go le letona.

.carousel('go khutša') .

E thibela carousel go sepela ka dipaesekele ka dilo.

.carousel(nomoro) .

Cycles carousel ho foreime e itseng (0 e thehiloeng, e tšoanang le hlophisitsoeng).

.carousel('pele') .

Didikologo go ya go selo sa go feta.

.carousel('e latelang') .

Didikologo go ya go selo se se latelago.

Ditiragalo

Sehlopha sa carousel sa Bootstrap se pepentšha ditiragalo tše pedi tša go goketša ka mošomo wa carousel.

Mohlala

Plugin ya motheo, yeo e katološitšwego gabonolo bakeng sa go hlama ka pela di-typeahead tša maemo ka tsenyo efe goba efe ya sengwalwa sa foromo.

< mohuta wa tsenyo = "sengwalwa" data-fana = "typeahead" >  

O tla nyaka go beakanya autocomplete="off"go thibela dimenu tša sephephediši tša maitirelo go tšwelela godimo ga go theoga ga Bootstrap typeahead.

Tšhomišo

Ka dika ya data

Oketša dika tša datha go ngwadiša elemente ka mošomo wa typeahead bjalo ka ge go bontšhitšwe mohlaleng wo o lego ka mo godimo.

Ka JavaScript

Bitša typeahead ka seatla ka:

$ ( '.thaepa pele' ). typeahead () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-source="".

Mekgwa ya go šoma

.typeahead(dikgetho) .

E thoma tsenyo ka typeahead.

Mohlala

The subnavigation ka le letšehali ke demo e phelang ya plugin ya affix.

Tšhomišo

Ka dika ya data

Go oketša gabonolo boitshwaro bja go kgomaretša go elemente efe goba efe, e no oketša data-spy="affix"go elemente yeo o nyakago go e hlola. Ke moka o šomiše di-offset go hlaloša gore o swanetše go fetoša neng go bulela le go tima go kgomaretša ga elemente.

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

Ka JavaScript

Bitsa plugin ya affix ka JavaScript:

$ ( '# navbar' ). kgomaretša () .

Dikgetho

Dikgetho di ka fetišwa ka dika tša datha goba JavaScript. Bakeng sa dika tša datha, tlaleletša leina la kgetho go data-, bjalo ka go data-offset-top="200".