Onye ma ọ bụ chịkọtara

Enwere ike itinye ngwa mgbakwunye n'otu n'otu (n'agbanyeghị ụfọdụ chọrọ ịdabere), ma ọ bụ ha niile otu oge. Abụọ bootstrap.js na bootstrap.min.js nwere plugins niile n'otu faịlụ.

Njirimara data

Ị nwere ike iji plugins Bootstrap niile naanị site na API akara na-edeghị otu ahịrị Javascript. Nke a bụ API klas mbụ Bootstrap ma kwesịrị ịbụ ihe mbụ ị ga-echebara mgbe ị na-eji ngwa mgbakwunye.

Nke ahụ kwuru, n'ọnọdụ ụfọdụ ọ nwere ike ịdị mma ka gbanyụọ ọrụ a. Ya mere, anyị na-enyekwa ikike iji gbanyụọ njirimara data API site na iwepu ihe omume niile dị na aha ahụ nke ejiri ''data-api''. Nke a dị ka nke a:

$ ( 'ahụ' ). gbanyụọ ( '.data-api' )

N'aka nke ọzọ, iji kwado ngwa mgbakwunye a kapịrị ọnụ, tinye naanị aha ngwa mgbakwunye dị ka oghere aha yana data-api namespace dị ka nke a:

$ ( 'ahụ' ). gbanyụọ ( '.alert.data-api' )

API mmemme

Anyị kwenyekwara na ị ga-enwe ike iji plugins Bootstrap naanị site na API Javascript. API ọhaneze niile bụ otu, ụzọ enwere ike ịgbanye, wee weghachi mkpokọta emere.

$ ( ".btn.danger" ). bọtịnụ ( "ịtụgharị" ). addClass ( "abụba" )

Ụzọ niile kwesịrị ịnakwere ihe nhọrọ nhọrọ, eriri nke lekwasịrị anya otu usoro, ma ọ bụ ihe ọ bụla (nke na-amalite ngwa mgbakwunye nwere omume ndabara):

$ ( "#myModal" ). modal () // jiri ndabara malite ya                       
$ ( "#myModal" ). modal ({ ahụigodo : ụgha }) // ibido na enweghị ahụigodo     
$ ( "#myModal" ). modal ( 'show' ) // na-ebido na ịkpọku ihe ngosi ozugbo                

Ngwa mgbakwunye ọ bụla na-ekpughekwa ihe nrụpụta ya na akụrụngwa 'Constructor': $.fn.popover.Constructor. Ọ bụrụ na ị ga-achọ ịnweta otu ngwa mgbakwunye ihe atụ, weghachite ya ozugbo na mmewere: $('[rel=popover]').data('popover').

Enweghị esemokwu

Mgbe ụfọdụ, ọ dị mkpa iji plugins Bootstrap nwere usoro UI ndị ọzọ. N'ọnọdụ ndị a, ndakọrịta oghere aha nwere ike ime mgbe ụfọdụ. Ọ bụrụ na nke a emee, ị nwere ike ịkpọ .noConflictna ngwa mgbakwunye ịchọrọ iweghachi uru nke.

var bootstrapButton = $ . fn . bọtịnụ . noConflict () // weghachi $.fn.bọtịnụ na uru ekenyere mbụ 
$ . fn . bootstrapBtn = bootstrapButton             // nye $() .bootstrapBtn arụmọrụ bootstrap.

Ihe omume

Bootstrap na-enye mmemme omenala maka ọtụtụ mmemme pụrụ iche nke ngwa mgbakwunye. N'ozuzu, ndị a na-abịa na njedebe njedebe na nke gara aga - ebe njedebe (dịka show) na-akpalite na mmalite nke mmemme, na ụdị nsonye ya gara aga (dịka shown) na-akpalite na mmecha nke omume.

Ihe omume enweghị ngwụcha na-enye ọrụ mgbochi ndabara. Nke a na-enye ikike ịkwụsị mmezu nke ihe tupu ya amalite.

$ ( '#myModal' ). na ( 'show' , ọrụ ( e ) {   
    ọ bụrụ (! data ) laghachi e . preventDefault () // akwụsị modal igosi   
})

Banyere mgbanwe

Maka mmetụta mgbanwe dị mfe, gụnyere bootstrap-transition.js otu ugboro n'akụkụ faịlụ JS ndị ọzọ. Ọ bụrụ na ị na-eji chịkọtara (ma ọ bụ miniified) bootstrap.js , ọ dịghị mkpa ịgụnye nke a-ọ dịlarị.

Jiri ikpe

Ọmụmaatụ ole na ole nke ngwa mgbakwunye mgbanwe:

• Na-amị amị ma ọ bụ na-ada ada na modal
• Taabụ na-apụ apụ
• Na-ebelata ọkwa
• Ogwe carousel na-amị amị

Ihe atụ

A na-ahazi usoro, mana na-agbanwe agbanwe, na-akpalite mkparịta ụka na arụrụ ọrụ kacha nta achọrọ yana ndabara smart.

Ihe atụ kwụ ọtọ

Modal emepụtara nwere nkụnye eji isi mee, ahụ, na usoro omume n'okpuru ụkwụ.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < ụdị bọtịnụ = "bọtịnụ" klaasị = "emechi" data-dismiss = "modal" aria-hidden = "eziokwu" > & ugboro; </bọtịnụ>    
    <h3> Ihe nkụnye eji isi mee </h3>
  </div>
  <div klas = "modal-body" > 
    <p> Otu ahụ mara mma… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" klaasị = "btn"> Mechie </a> _  
    <a href = "#" klas = "btn btn-primary" > Chekwa mgbanwe </a>  
  </div>
</div>

Ihe ngosi dị ndụ

Gbanwee modal site na JavaScript site na ịpị bọtịnụ dị n'okpuru. Ọ ga-adaba ma daa site n'elu ibe ahụ.

<!-- bọtịnụ iji kpalite modal -->
<a href = "#myModal" ọrụ = "bọtịnụ" klas = "btn" data-toggle = "modal" > Mwepụta ngosi modal </a>    
 
<!-- Modal -->
<div id = "myModal" klas = "modal hide fade" tabindex = "-1" ọrụ = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "eziokwu" >      
  <div class = "modal-header" > 
    < ụdị bọtịnụ = "bọtịnụ" klaasị = "emechi" data-dismiss = "modal" aria-hidden = "eziokwu" > × </button>    
    <h3 id = "myModalLabel" > Ntụnye modal </h3> 
  </div>
  <div klas = "modal-body" > 
    <p> Otu ahụ mara mma… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "eziokwu" > Mechie </button>   
    <button class = "btn btn-primary" > Chekwa mgbanwe </button> 
  </div>
</div>

Ojiji

Site na njirimara data

Mee modal rụọ ọrụ na-edeghị Javascript. Tọọ data-toggle="modal"na ihe njikwa, dị ka bọtịnụ, yana otu data-target="#foo"ma ọ bụ href="#foo"iji lekwasịrị anya otu modal ka ị gbanwee.

<button type = "bọtịnụ" data-toggle = "modal" data-target = "#myModal" > Mwepụta modal </button>   

Site JavaScript

Kpọọ modal nwere id myModalnwere otu ahịrị Javascript:

$ ( '#myModal' ). modal ( nhọrọ )

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-backdrop="".

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

Ụzọ

.modal(nhọrọ)

Na-eme ka ọdịnaya gị rụọ ọrụ dị ka modal. Nabata nhọrọ nhọrọ object.

$ ( '#myModal' ). modal ({
  ahụigodo : ụgha 
})

.modal('ntụgharị')

Iji aka na-atụgharị modal.

$ ( '#myModal' ). modal ( 'ntụgharị' )

.modal('show')

Iji aka na-emepe modal.

$ ( '#myModal' ). modal ( 'show' )

.modal('zoo')

Iji aka na-ezo modal.

$ ( '#myModal' ). modal ( 'zoo' )

Ihe omume

Klas modal Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ modal.

$ ( '#myModal' ). na ( 'zoro ezo' , ọrụ () {   
  // mee ihe…
})

Ihe atụ

Tinye menu ndọda n'ihe fọrọ nke nta ka ọ bụrụ ihe ọ bụla nwere ngwa mgbakwunye a dị mfe, gụnyere navbar, taabụ, na ọgwụ.

N'ime navbar

N'ime taabụ

Ojiji

Site na njirimara data

Tinye data-toggle="dropdown"na njikọ ma ọ bụ bọtịnụ ka ịgbanwee mkpọda.

<div klas = "mkpọda" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Mbudata </a>   
  <ul class = "nchịkọta-nchịkọta-n'ala " ọrụ = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Iji dobe URL adịghị, jiri data-targetnjirimara kama href="#".

<div klas = "mkpọda" > 
  <a class = "dropdown-toggle" id = "dLabel" ọrụ = "bọtịnụ" data-toggle = "dobe" data-target = "#" href = "/page.html" >      
    Wedaa
    <b klas = "nlekọta" </b> 
  </a>
  <ul class = "nchịkọta-nchịkọta-n'ala " ọrụ = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Site JavaScript

Kpọọ dropdowns site na Javascript:

$ ( '.dropdown-toggle' ). dropdown ()

Nhọrọ

Ọ dịghị

Ụzọ

$()dokwa ('toggle')

Api mmemme maka ntugharị menus maka ihe navbar enyere ma ọ bụ igodo taabụ.

Ọmụmaatụ na navbar

Ihe mgbakwunye ScrollSpy bụ maka imelite ebumnuche nav na-akpaghị aka dabere na ọnọdụ mpịakọta. Pịgharịa mpaghara n'okpuru ebe ịnya ụgbọ mmiri wee lelee klaasị na-agbanwe agbanwe. A ga-eme ka ọ pụta ìhè nke obere ihe ndọpụta.

Ojiji

Site na njirimara data

Ka mfe tinye scrollspy omume gị topbar igodo, dị nnọọ tinye data-spy="scroll"na mmewere ị chọrọ inyocha na (kasị a ga-abụ ahụ) na data-target=".navbar"họrọ nke nav iji. Ị ga-achọ iji scrollspy nwere .navakụrụngwa.

<body data-spy = "mpịakọta" data-target = ".navbar" > ... </ body>  

Site JavaScript

Kpọọ scrollspy site na Javascript:

$ ( '#navbar' ). scrollspy ()

Ụzọ

.scrollspy('refresh')

Mgbe ị na-eji scrollspy yana mgbakwunye ma ọ bụ wepụ ihe ndị sitere na DOM, ị ga-akpọ usoro ume ọhụrụ dị ka:

$ ( '[data-spy="mpịakọta"]' ). nke ọ bụla ( ọrụ () {  
  var $ nledo = $ ( nke a ). scrollspy ( 'refresh' )
}

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset="".

Ihe omume

Ihe atụ taabụ

Tinye ngwa ngwa taabụ arụ ọrụ ike ka ị gbanwee site na pane nke ọdịnaya mpaghara, ọbụlagodi site na nchịkọta nhọrọ.

Ojiji

Kwado taabụ tabbable site na Javascript (taabụ ọ bụla kwesịrị ịgbalite n'otu n'otu):

$ ( '#myTab a' ). pịa ( ọrụ ( e ) {  
  e . mgbochiDedfault ();
  $ ( nke a ). tab ( 'show' );
})

Ị nwere ike ịgbalite taabụ n'otu n'otu n'ụzọ dị iche iche:

$ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Họrọ taabụ n'aha 
$ ( '#myTab a: nke mbụ' ). tab ( 'show' ); // Họrọ taabụ mbụ 
$ ( '#myTab a: ikpeazụ' ). tab ( 'show' ); // Họrọ taabụ ikpeazụ 
$ ( '#myTab li: eq(2) a' ). tab ( 'show' ); // Họrọ taabụ nke atọ (0-indexed) 

Akara akara

Ị nwere ike ịgbalite taabụ ma ọ bụ pill navigation na-edeghị Javascript ọ bụla site na ịkọwapụta data-toggle="tab"ma ọ bụ data-toggle="pill"na mmewere. Ịtinye navna nav-tabsklaasị na taabụ ulahụ ga-etinye nhazi taabụ Bootstrap.

<ul klas = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "taabụ" > Ụlọ </a></li>  
  <li><a href = "#profile" data-toggle = "taabụ" > Profaịlụ </a></li>  
  <li><a href = "#messages" data-toggle = "taabụ" > Ozi </a></li>  
  <li><a href = "#settings" data-toggle = "taabụ" > Ntọala </a></li>  
</ul>

Ụzọ

$()tab

Na-arụ ọrụ mmemme taabụ na akpa ọdịnaya. Tab kwesịrị inwe ma ọ data-targetbụ ihe hrefezubere iche maka ọnụ akpa na DOM.

<ul klas = "nav nav-tabs" id = "myTab" >  
  <li class = "ọrụ" ><a href = "#ụlọ" > Ụlọ </a></li>  
  <li><a href = "#profile" > Profaịlụ </a></li> 
  <li><a href = "#messages" > Ozi </a></li> 
  <li><a href = "#settings" > Ntọala </a></li> 
</ul>
 
<div class = "taabụ-ọdịnaya" > 
  <div class = "tab-pane active" id = "ụlọ" > ... </div>  
  <div class = "tab-pane" id = "profaịlụ" > ... </div>  
  <div class = "tab-pane" id = "ozi" > ... </div>  
  <div class = "tab-pane" id = "ntọala" > ... </div>  
</div>
 
<edemede>
  $ ( ọrụ () {  
    $ ( '#myTab a: ikpeazụ' ). tab ( 'show' );
  })
</script>

Ihe omume

$ ( 'a[data-toggle = "taabụ"]' ). na ( 'gosiri' , ọrụ ( e ) {   
  e . target // taabụ arụ ọrụ
  e . metụtaraTarget // taabụ gara aga
})

Ihe atụ

Site na ngwa mgbakwunye jQuery.tipsy mara mma nke Jason Frame dere; Ntuziaka ngwaọrụ bụ ụdị emelitere, nke anaghị adabere na onyonyo, jiri CSS3 maka eserese, yana njirimara data maka nchekwa aha mpaghara.

Maka ebumnuche arụmọrụ, mpio ngwaọrụ na popover data-apis abanyela, nke pụtara na ị ga-ebido ya n'onwe gị .

Gaa na njikọ dị n'okpuru ka ịhụ ndụmọdụ ndụmọdụ:

Ụzọ anọ

Ndụmọdụ n'ime otu ntinye

Mgbe ị na-eji Tooltips na popovers na otu ntinye Bootstrap, ị ga-edozi containernhọrọ (ederede n'okpuru) iji zere mmetụta ndị achọghị.

Ojiji

Kpalite ntụnye aka site na Javascript:

$ ( '#ihe atụ' ). Tooltip ( nhọrọ )

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Akara akara

<a href = "#" data-toggle = "tooltip" aha = "ngwaọrụ izizi" > fesa m </a>   

Ụzọ

$().tooltip(nhọrọ)

Na-ejikọta onye na-ahụ maka ndụmọdụ ngwaọrụ na mkpokọta mmewere.

.tooltip('show')

Na-ekpughe ngwa ọrụ mmewere.

$ ( '# element' ). Tooltip ( 'show' )

.tooltip('zoo')

Na-ezobe ntụaka ngwa ọrụ mmewere.

$ ( '# element' ). Tooltip ( 'zoo' )

.tooltip('toggle')

Na-atụgharị ihe ntụnye aka nke mmewere.

$ ( '# element' ). Tooltip ( 'ntụgharị' )

.tooltip('bibi')

Na-ezo ma na-ebibi ngwa ọrụ mmewere.

$ ( '# element' ). Tooltip ( 'bibi' )

Ihe atụ

Tinye obere ihe machie nke ọdịnaya, dị ka ndị dị na iPad, na ihe ọ bụla maka ozi nke abụọ nke ụlọ. Chekwaa n'elu bọtịnụ iji kpalite popover. Achọrọ ka etinyere ndụmọdụ ngwaọrụ .

Popover kwụ ọtọ

Nhọrọ anọ dị: n'elu, aka nri, ala na aka ekpe kwadoro.

Ọnweghị akara egosiri ka ewepụtara popovers site na Javascript yana ọdịnaya dị n'ime datanjirimara.

Ihe ngosi dị ndụ

Ụzọ anọ

Ojiji

Kwado popovers site na Javascript:

$ ( '#ihe atụ' ). popover ( nhọrọ )

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-animation="".

Akara akara

Maka ebumnuche arụmọrụ, Tooltip na Popover data-apis abanyela. Ọ bụrụ na ịchọrọ iji ha naanị ezipụta nhọrọ nhọrọ.

Ụzọ

$().popover(nhọrọ)

Na-ebute popovers maka mkpokọta mmewere.

.popover('show')

Na-ekpughe ihe ngosi popover.

$ ( '# element' ). popover ( 'show' )

.popover('zoo')

Na-ezobe ihe nchacha mmapụta.

$ ( '# element' ). popover ( 'zoo' )

.popover('toggle')

Na-atụgharị ihe ndị mejupụtara popover.

$ ( '# element' ). popover ( 'ntụgharị' )

.popover('bibi')

Na-ezo ma na-ebibi popover nke mmewere.

$ ( '# element' ). popover ( 'bibi' )

Ngosipụta ihe atụ

Tinye ọrụ achụpụ na ozi njikere niile na ngwa mgbakwunye a.

Ojiji

Kwado ịchụpụ ọkwa site na Javascript:

$ ( ".ọhụụ" ). njikere ()

Akara akara

Naanị tinye data-dismiss="alert"na bọtịnụ mmechi gị iji nye ọrụ nso nsonye na-akpaghị aka.

<a class = "emechi" data-dismiss = "alert" href = "#" > & ugboro; </a>   

Ụzọ

$().ọmụma()

Na-eji arụ ọrụ nso kechie ọkwa niile. Iji mee ka ọkwa gị dị ndụ mgbe emechiri emechi, gbaa mbọ hụ na ha etinyelarị ya .fadena .inklas ahụ.

.ọmụma (' nso')

Na-emechi mkpu.

$ ( ".ọhụụ" ). njikere ( 'emechi' )

Ihe omume

Klas njikere Bootstrap na-ekpughe ihe omume ole na ole maka ịbanye n'ime ọrụ njikere.

$ ( '#my-alert' ). kechie ( 'emechi' , ọrụ () {   
  // mee ihe…
})

Ihe atụ eji

Jiri bọtịnụ mee ihe ndị ọzọ. Bọtịnụ njikwa na-ekwu ma ọ bụ mepụta otu bọtịnụ maka ihe ndị ọzọ dị ka ogwe ngwaọrụ.

Ọchịchị

Tinye data-loading-text="Loading..."ka iji ọnọdụ nbudata na bọtịnụ.

< ụdị bọtịnụ = "bọtịnụ" klaasị = "btn btn-primary" data-loading-text = "Na-ebugo..." > Ala na- ebu </button>   

Otu ngbanwe

Tinye data-toggle="button"ka ịgbalite toggling n'otu bọtịnụ.

<button type = "bọtịnụ" klaasị = "btn btn-primary" data-toggle = "bọtịnụ" > Otu ngbanwe </button>   

Igbe nbanye

Tinye data-toggle="buttons-checkbox"maka ụdị ịgbagharị igbe igbe n'otu btn.

<div class = "btn-group" data-toggle = "bọtịnụ-checkbox" >  
  <button type = "bọtịnụ" klaasị = "btn btn-primary" > Aka ekpe </button>  
  <bọtịnụ ụdị = "bọtịnụ" klas = "btn btn-primary" > Nke etiti </button>  
  <button type = "bọtịnụ" klas = "btn btn-primary" > Right </button>  
</div>

Redio

Tinye data-toggle="buttons-radio"maka ụdị ntụgharị redio na otu btn.

<div class = "btn-group" data-toggle = "bọtịnụ-redio" >  
  <button type = "bọtịnụ" klaasị = "btn btn-primary" > Aka ekpe </button>  
  <bọtịnụ ụdị = "bọtịnụ" klas = "btn btn-primary" > Nke etiti </button>  
  <button type = "bọtịnụ" klas = "btn btn-primary" > Right </button>  
</div>

Ojiji

Kwado bọtịnụ site na Javascript:

$ ( '.nav-taabụ' ). bọtịnụ ()

Akara akara

Njirimara data bụ ihe dị mkpa na ngwa mgbakwunye bọtịnụ. Lelee koodu ihe atụ dị n'okpuru maka ụdị akara akara dị iche iche.

Nhọrọ

Ọ dịghị

Ụzọ

$().bọtịnụ('ntụgharị')

Tụgharịa steeti. Na-enye bọtịnụ ka ọ dị ka agbanyere ya.

< ụdị bọtịnụ = "bọtịnụ" klaasị = "btn" data-toggle = "bọtịnụ" > … </button>    

$().bọtịnụ('loading')

Tọọ ọnọdụ bọtịnụ ka ọ na-ebunye - gbanyụọ bọtịnụ ma gbanwee ederede na ntinye ederede. Ekwesịrị ịkọwapụta ederede na-ebunye na mmewere bọtịnụ site na iji njirimara data data-loading-text.

< ụdị bọtịnụ = "bọtịnụ" klaasị = "btn" data-loading-text = "na-ebunye ihe..." > ... </button>    

$().bọtịnụ('tọgharịa')

Tọgharịa steeti bọtịnụ - gbanwee ederede na ederede izizi.

$().bọtịnụ(string)

Tọgharịa steeti bọtịnụ - gbanwee ederede na ọnọdụ ederede akọwapụtara data ọ bụla.

< ụdị bọtịnụ = "bọtịnụ" klaasị = "btn" data-complete-text = "mechara!" > ... </bọtịnụ>    
<edemede>
  $ ( '.btn' ). bọtịnụ ( 'zuru ezu' )
</script>

Ihe gbasara

Nweta ụdị ntọala yana nkwado na-agbanwe agbanwe maka ihe ndị nwere ike imebi dị ka accordions na igodo.

* Achọrọ ka etinyere ngwa mgbakwunye Transitions.

Ihe atụ accordion

N'iji ngwa mgbakwunye ọdịda, anyị wuru wijetị ụdị accordion dị mfe:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Otu ihe nwere ike igbakota
      </a>
    </div>
    <div id = "collapseOne" klaasị = "accordion-body dara na" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Otu ihe nwere ike igbakota
      </a>
    </div>
    <div id = "collapseTwo" klaasị = "accordion-body ọdịda" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Ị nwekwara ike iji ngwa mgbakwunye na-enweghị akara accordion. Mee ka bọtịnụ gbanwee ịgbasa na ndakpọ nke ihe ọzọ.

< ụdị bọtịnụ = "bọtịnụ" klas = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  mfe ndakpọ
</bọtịnụ>
 
<div id = "demo" klaasị = "daba n'ime" > … </div>  

Ojiji

Site na njirimara data

Naanị tinye data-toggle="collapse"na a data-targetna mmewere iji nye njikwa nke mmewere nwere ike ịdaba na-akpaghị aka. Àgwà ahụ data-targetna-anabata css ahọpụtara iji tinye ọdịda ahụ. Jide n'aka na ịtinye klas collapseahụ na mmewere nwere ike ịdaba. Ọ bụrụ na ị ga-achọ ka ọ meghee, tinye klaasị agbakwunyere in.

Ka ịgbakwunye njikwa otu accordion dị ka njikwa nwere ike imebi, tinye njirimara data data-parent="#selector". Rụtụ aka na ngosi ngosi ka ịhụ nke a na-arụ ọrụ.

Site JavaScript

Jiri aka jiri:

$ ( ".dakpọ" ). daa ()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-parent="".

Ụzọ

.dakpọ (nhọrọ)

Na-eme ka ọdịnaya gị rụọ ọrụ ka ihe nwere ike imebi. Nabata nhọrọ nhọrọ object.

$ ( '#myCollapsible' ). daa ({
  toggle : ụgha 
})

.dakpọ ('toggle')

Na-atụgharị ihe nwere ike ịdaba ka egosiri ma ọ bụ zoo.

.dakpọ ('show')

Na-egosi mmewere nwere ike ịdaba.

daa('zoo')

Na-ezobe mmewere nwere ike ịdaba.

Ihe omume

Klas ndakpọ Bootstrap na-ekpughe ihe omume ole na ole maka itinye aka n'ọrụ ọdịda.

$ ( '#myCollapsible' ). na ( 'zoro ezo' , ọrụ () {   
  // mee ihe…
})

Ihe atụ carousel

Ihe ngosi mmịfe dị n'okpuru na-egosi ngwa mgbakwunye ọnụọgụ yana akụrụngwa maka ịgba ígwè site na ihe dị ka carousel.

Labelụ Thumbnail mbụ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula 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 = "myCarousel" klas = "carousel slide" >  
  <ol klas = "carousel-egosi" > 
    <li data-target = "#myCarousel" data-slide-to = "0" klas = "arụ ọrụ" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Ihe carousel -->
  <div klas = "carousel-inner" > 
    <div class = "ihe na-arụ ọrụ" > … </div> 
    <div class = "ihe" > … </div> 
    <div class = "ihe" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "na-esote" > & rsaquo; </a>   
</div>

Ojiji

Site na njirimara data

Jiri njirimara data iji jikwaa ọnọdụ carousel ngwa ngwa. data-slidena-anabata mkpụrụokwu prevma ọ bụ next, nke na-agbanwe ọnọdụ mmịfe n'akụkụ ọ dị ugbu a. N'aka nke ọzọ, jiri data-slide-tonyefee ndeksi mmịfe raw na carousel data-slide-to="2", nke na-awụli elu na ọnọdụ mmịfe gaa n'otu ndeksi malite na 0.

Site JavaScript

Jiri aka kpọọ carousel:

$ ( '.carousel' ). carousel ()

Nhọrọ

Enwere ike gafere nhọrọ site na njirimara data ma ọ bụ JavaScriptz. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-interval="".

Ụzọ

.carousel(nhọrọ)

Na-ebute carousel na nhọrọ nhọrọ objectwee malite ịnya igwe site na ihe.

$ ( '.carousel' ). carousel ({
  Ogologo oge : 2000 
})

.carousel('cycle')

Na-agagharị na ihe carousel site n'aka ekpe gaa n'aka nri.

.carousel('kwụsịtụ')

Na-akwụsị carousel site n'ịgba ígwè na ihe.

.carousel(nọmba)

Na-eme okirikiri carousel gaa n'otu etiti (0 dabere, yiri n'usoro).

.carousel('bu')

Ọkpụkpụ gaa na ihe gara aga.

.carousel('na-esote')

Chọgharịa gaa na ihe na-esote.

Ihe omume

Klas carousel Bootstrap na-ekpughe ihe omume abụọ maka itinye aka na ọrụ carousel.

Ọmụmaatụ

Ngwa mgbakwunye bụ isi, gbatịpụrụ ngwa ngwa maka imepụta ụdị ụdịdị mara mma na ntinye ederede ọ bụla.

< ụdị ntinye = "ederede" data-provide = "ụdị isi" >  

Ị ga-achọ ịtọọ autocomplete="off"ka igbochi menu ihe nchọgharị ndabara ka ọ pụta n'elu mwụda ụdịdị Bootstrap.

Ojiji

Site na njirimara data

Tinye njirimara data iji debanye aha ihe mmewere nwere ọrụ typeahead dị ka egosiri na ihe atụ dị n'elu.

Site JavaScript

Jiri aka were kpọọ typeahead:

$ ( '.typehead' ). typeahead ()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-source="".

Ụzọ

.typehead(nhọrọ)

Na-ebute ntinye n'isi n'isi.

Ọmụmaatụ

The subnavigation n'aka ekpe bụ a ndụ ngosi nke affix plugin.

Ojiji

Site na njirimara data

Ka ịgbakwunye omume affix ngwa ngwa na mmewere ọ bụla, tinye naanị data-spy="affix"na mmewere ịchọrọ iledo. Mgbe ahụ, jiri offsets kọwapụta mgbe ị ga-atụgharị pinning nke mmewere ma gbanye ma gbanyụọ.

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

Site JavaScript

Kpọọ ngwa mgbakwunye affix site na Javascript:

$ ( '#navbar' ). tinye ()

Nhọrọ

Enwere ike ịfefe nhọrọ site na njirimara data ma ọ bụ Javascript. Maka njirimara data, tinye aha nhọrọ na data-, dị ka ọ dị na data-offset-top="200".