Takitahi, whakahiato ranei

Ka taea te whakauru takitahi nga monomai (ahakoa e hiahia ana etahi ki te whakawhirinaki), me te katoa i te wa kotahi. Kei roto i nga bootstrap.js me bootstrap.min.js nga monomai katoa i roto i te konae kotahi.

Nga huanga raraunga

Ka taea e koe te whakamahi i nga taputapu Bootstrap katoa ma te tohu tohu API me te kore e tuhi i tetahi rarangi JavaScript. Koinei te API karaehe tuatahi a Bootstrap a me whakaaro tuatahi koe ina whakamahi ana i te mono.

E ai ki tera, i etahi ahuatanga ka pai ki te whakaweto i tenei mahi. Na reira, ka tukuna ano e matou te kaha ki te whakakore i te API huanga raraunga ma te wetewete i nga huihuinga katoa i runga i te ingoa o te tinana kua tohua ki te `'data-api'`. Ko te ahua tenei:

$ ( 'tinana' ). weto ( '.data-api' )

Hei taapiri, ki te aro ki tetahi mono motuhake, whakauruhia te ingoa o te mono hei mokowāingoa me te mokowāingoa raraunga-api penei:

$ ( 'tinana' ). weto ( '.alert.data-api' )

API Papatono

E whakapono ana matou ka taea e koe te whakamahi i nga taputapu Bootstrap katoa ma te JavaScript API. Ko nga API whanui katoa he tikanga kotahi, ka taea te mekameka, ka whakahoki i te kohinga i mahia.

$ ( ".btn.danger" ). pātene ( "takahuri" ). addClass ( "ngako" )

Ko nga tikanga katoa me whakaae ki tetahi ahanoa kōwhiringa, he aho e aro ana ki tetahi tikanga, kaore ranei (e timata ana i te mono me te whanonga taunoa):

$ ( "#myModal" ). modal () // kua arawhiti me nga taunoa                       
$ ( "#myModal" ). modal ({ papapātuhi : teka }) // i arawhiti me te kore papapātuhi     
$ ( "#myModal" ). modal ( 'whakaatu' ) // arawhiti me te karanga whakaatu tonu                

Ka whakaatu hoki ia mono i tana kaihanga mata ki runga i tetahi taonga `Constructor`: $.fn.popover.Constructor. Mena kei te pirangi koe ki te tiki i tetahi tauira mono, tiki tika mai i tetahi huānga: $('[rel=popover]').data('popover').

Karekau he taupatupatu

I etahi wa ka tika te whakamahi i nga taputapu Bootstrap me etahi atu angamahi UI. I roto i enei ahuatanga, ka taea e nga tukinga mokowā ingoa i etahi wa. Mena ka pa mai tenei, ka waea atu koe .noConflictki te mono e hiahia ana koe ki te whakahoki i te uara o.

var bootstrapButton = $ . fn . pātene . noConflict () // whakahokia te $.fn.button ki te uara kua whakaritea i mua 
$ . fn . bootstrapBtn = bootstrapButton             // hoatu $().bootstrapBtn te mahi bootstrap

Nga huihuinga

Ka whakaratohia e Bootstrap nga huihuinga ritenga mo te nuinga o nga mahi ahurei a te mono. Ko te tikanga, ka puta mai enei i roto i te ahua infinitive me te puka participle o mua - kei reira te infinitive (ex. show) ka puta i te tiimatanga o te huihuinga, me tana puka participle o mua (ex. shown) ka puta i te otinga o te mahi.

Ko nga takahanga mutunga kore ka whakarato i te mahi aukatiTaunoa. Ma tenei ka taea te aukati i te mahi i mua i te tiimata.

$ ( '#myModal' ). kei runga ( 'whakaatu' , mahi ( e ) {   
    ki te hoki mai ( ! raraunga ) e . preventDefault () // ka mutu te whakaatu i te tikanga   
})

Mo nga whakawhitinga

Mo nga paanga whakawhiti ngawari, whakaurua bootstrap-transition.js kotahi ki te taha o etahi atu konae JS. Mena kei te whakamahi koe i te bootstrap.js kua whakaemihia (me iti ranei) , kaore he take ki te whakauru i tenei—kei kona ano.

Whakamahia nga keehi

Ko etahi tauira o te mono whakawhiti:

• Te whakaheke, te memenge ranei i roto i nga tikanga
• Ka memeha atu nga ripa
• Matohi ka memeha haere
• Pihanga carousel retireti

Tauira

Ko nga tauira he mea whakamaarama, engari he ngawari, he korero akiaki me te iti rawa o nga mahi e hiahiatia ana me nga taunoa atamai.

Tauira pateko

He tikanga tuku me te pane, te tinana, me te huinga hohenga kei te hiku.

<div class = "Modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-huna = "pono" > &wa; </pātene>    
    <h3> pane pane </h3>
  </div>
  <div class = "modal-body" > 
    <p> Kotahi te tinana pai… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Katia </a>  
    <a href = "#" class = "btn btn-primary" > Tiakina nga huringa </a>  
  </div>
</div>

Demo ora

Takahurihia he tikanga ma te JavaScript ma te paatene i te paatene kei raro nei. Ka paheke ki raro ka memeha mai i te tihi o te wharangi.

<!-- Patene hei whakaoho i te tikanga -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Whakarewahia te aratau demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "Modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-huna = "pono" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "pono" > × </button>    
    <h3 id = "myModalLabel" > pane pane </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Kotahi te tinana pai… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "pono" > Katia </button>   
    <button class = "btn btn-primary" > Tiakina nga huringa </button> 
  </div>
</div>

Whakamahinga

Ma nga huanga raraunga

Whakahohehia he tikanga me te kore e tuhi JavaScript. Whakatakotoria data-toggle="modal"ki runga i te huānga mana whakahaere, penei i te paatene, me te, ki te whai data-target="#foo"ranei href="#foo"i tetahi aratau motuhake hei takahuri.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Whakarewa tikanga </button>   

Ma te JavaScript

Karangahia he tikanga me te id myModalme te rarangi kotahi o JavaScript:

$ ( '#myModal' ). modal ( kōwhiringa )

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-backdrop="".

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

Nga tikanga

.modal(kōwhiringa)

Whakahohehia to ihirangi hei aratau. Ka whakaae ki nga whiringa whiriwhiri object.

$ ( '#myModal' ). tikanga ({
  papapātuhi : teka 
})

.modal('takahuri')

Ka takahuri-a-ringa i te tikanga.

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

.modal('whakaatu')

Ka whakatuwhera a-ringa i te tikanga.

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

.modal('huna')

Ka huna a-ringa i tetahi tikanga.

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

Nga huihuinga

Ko te karaehe aratau a Bootstrap e whakaatu ana i etahi huihuinga mo te hono atu ki nga mahi tikanga.

$ ( '#myModal' ). kei runga ( 'huna' , mahi () {   
  // mahia tetahi mea…
})

Tauira

Taapirihia nga tahua takaiho ki nga mea katoa me tenei mono ngawari, tae atu ki te pae whakatere, ripa, me nga pire.

I roto i te pae whakatere

I roto i nga ripa

Whakamahinga

Ma nga huanga raraunga

Tāpirihia data-toggle="dropdown"ki tētahi hono, pātene rānei hei takahuri i te takaiho.

<div class = "whakaheke" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Whakataka keu </a>   
  <ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "dTapanga" >   
    ...
  </ul>
</div>

Kia mau tonu nga URL, whakamahia te data-targethuanga hei utu href="#".

<div class = "whakaheke" > 
  <a class = "dropdown-toggle" id = "dTapanga" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Whakataka iho
    <b class = "caret" ></b> 
  </a>
  <ul class = "tahua-whakaheke" role = "tahua" aria-labelledby = "dTapanga" >   
    ...
  </ul>
</div>

Ma te JavaScript

Karangatia nga takaiho ma te JavaScript:

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

Kōwhiringa

Karekau

Nga tikanga

$().dropdown('takahuri')

He api hotaka mo te takahuri i nga tahua mo tetahi pae whakaterenga, whakatere ripa ranei.

Tauira i roto i te navbar

Ko te mono ScrollSpy mo te whakahou aunoa i nga whaainga nav i runga i te tuunga panuku. Panuku i te waahi kei raro i te pae whakatere ka mataki i te huringa o te karaehe hohe. Ka miramirahia nga mea iti takaiho.

Whakamahinga

Ma nga huanga raraunga

Kia ngawari te taapiri i te whanonga scrollspy ki to whakatere pae runga, taapiri noa data-spy="scroll"ki te huānga e hiahia ana koe ki te tutei (te nuinga ko te tinana tenei) me data-target=".navbar"te whiriwhiri ko tehea nav hei whakamahi. Ka hiahia koe ki te whakamahi i te scrollspy me tetahi .navwaahanga.

<body data-spy = "scroll" data-target = ".navbar" > ... </body>  

Ma te JavaScript

Karangatia te scrollspy mā JavaScript:

$ ( '#navbar' ). scrollspy ()

Nga tikanga

.scrollspy('whakahou')

Ina whakamahi i te scrollspy me te taapiri, te tango ranei i nga huānga mai i te DOM, me waea koe ki te tikanga whakahou penei:

$ ( '[data-spy="scroll"]' ). ia ( mahi () {  
  var $spy = $ ( tenei ). scrollspy ( 'whakahou' )
});

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset="".

Nga huihuinga

Tauira ripa

Tāpirihia te mahinga ripa tere, hihiko ki te whakawhiti i roto i nga pihanga o nga ihirangi o te rohe, ahakoa ma nga tahua takaiho.

Whakamahinga

Whakahohehia nga ripa ripa ma te JavaScript (me whakahohe takitahi ia ripa):

$ ( '#myTab a' ). pawhiria ( mahi ( e ) {  
  e . āraiTaunoa ();
  $ ( tenei ). ripa ( 'whakaatu' );
})

Ka taea e koe te whakahohe i nga ripa takitahi i roto i nga huarahi maha:

$ ( '#myTab a[href="#profile"]' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa mā te ingoa 
$ ( '#myTab a:tuatahi' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa tuatahi 
$ ( '#myTab a: last' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa whakamutunga 
$ ( '#myTab li:eq(2) a' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa tuatoru (0-taupū) 

Tohutohu

Ka taea e koe te whakahohe i te whakatere ripa, pire ranei me te kore e tuhi i tetahi JavaScript ma te tohu noa , ki runga data-toggle="tab"ranei data-toggle="pill"i tetahi huānga. Ko te taapiri i nga karaehe navme nav-tabsnga karaehe ki te ripa ulka whakamahia te ahua o te ripa Bootstrap.

<ul class = "nav nav-ripa" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a> </li>  
  <li><a href = "#profile" data-toggle = "ripa" > Kōtaha </a> </li>  
  <li><a href = "#messages" data-toggle = "ripa" > Karere </a> </li>  
  <li><a href = "#settings" data-toggle = "ripa" > Tautuhinga </a> </li>  
</ul>

Nga tikanga

$(). ripa

Ka whakahohe i te huānga ripa me te ipu ihirangi. Me whai Ripa he data-target, he hrefkohanga ipu ranei kei roto i te DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a> </li>  
  <li><a href = "#profile" > Kōtaha </a> </li> 
  <li><a href = "#karere" > Nga Karere </a> </li> 
  <li><a href = "#settings" > Tautuhinga </a> </li> 
</ul>
 
<div class = "ripa-ihirangi" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "nga karere" > ... </div>  
  <div class = "tab-pane" id = "tautuhinga" > ... </div>  
</div>
 
<hōtuhi>
  $ ( mahi () {  
    $ ( '#myTab a: last' ). ripa ( 'whakaatu' );
  })
</script>

Nga huihuinga

$ ( 'a[data-toggle="ripa"]' ). kei runga ( 'whakaatuhia' , mahi ( e ) {   
  e . ūnga // ripa whakahohe
  e . relatedTarget // ripa o mua
})

Tauira

I whakaaweahia e te mono jQuery.tipsy pai i tuhia e Jason Frame; Ko nga aki-utauta he putanga whakahou, kaore e whakawhirinaki ki nga whakaahua, whakamahi CSS3 mo nga pakiwaituhi, me nga huanga-raraunga mo te rokiroki taitara rohe.

Mo nga take mahi, ka uru mai te aki taputapu me te popover data-apis, ko te tikanga me arawhiti koe i a koe .

Whakaparo ki runga i nga hononga i raro nei kia kite i nga aki taputapu:

E wha nga ahunga

Aki taputapu i roto i nga roopu whakauru

I te wa e whakamahi ana koe i nga aki taputapu me nga popovers me nga roopu whakauru Bootstrap, me whakarite e koe te containerwhiringa (kua tuhia ki raro) hei karo i nga paanga taha kino.

Whakamahinga

Whakaohohia te aki taputapu ma te JavaScript:

$ ( '#tauira' ). aki taputapu ( kōwhiringa )

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Tohutohu

<a href = "#" data-toggle = "taputapu" title = "matautauta tuatahi" > whakaparo ki runga i ahau </a>   

Nga tikanga

$().tiputauta(kwhiringa)

Ka taapirihia he kaihautu taputapu ki tetahi kohinga huānga.

.utautauta('whakaatu')

He whakaatu i te aki taputapu o tetahi huānga.

$ ( '#huānga' ). aki taputapu ( 'whakaatu' )

.utautauta('huna')

Hunaia te aki taputapu o tetahi huānga.

$ ( '#huānga' ). aki taputapu ( 'huna' )

.utautauta('takahuri')

Ka takahurihia te akiutauta o tetahi huānga.

$ ( '#huānga' ). aki taputapu ( 'takahuri' )

.utautauta('whakangaromia')

He huna me te whakangaro i te aki taputapu o tetahi huānga.

$ ( '#huānga' ). aki taputapu ( 'whakangaromia' )

Tauira

Tāpirihia nga whakakikorua iti o te ihirangi, penei i era i runga i te iPad, ki tetahi huānga mo nga korero tuarua mo te whare. Whakaparo ki runga i te paatene hei whakaoho i te pouver. Me whakauru te Akiutauta .

Pouaka pateko

E wha nga whiringa e waatea ana: runga, matau, raro me te taha maui.

Karekau he tohu e whakaatuhia ana ko nga popovers ka puta mai i te JavaScript me nga ihirangi kei roto i tetahi datahuanga.

Demo ora

E wha nga ahunga

Whakamahinga

Whakahohehia nga popovers ma JavaScript:

$ ( '#tauira' ). popover ( kōwhiringa )

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-animation="".

Tohutohu

Mo nga take mahi, ka uru mai te Aki Utauta me te Popover data-apis. Mena kei te pirangi koe ki te whakamahi, tohua he kowhiringa kaiwhiriwhiri.

Nga tikanga

$().popover(kōwhiringa)

Ka arataki popover mo te kohinga huānga.

.popover('whakaatu')

He whakaatu i tetahi huānga popover.

$ ( '#huānga' ). popover ( 'whakaatu' )

.popover('huna')

Hunaia he huānga popover.

$ ( '#huānga' ). popover ( 'huna' )

.popover('takahuri')

Ka takahuri i tetahi huānga popover.

$ ( '#huānga' ). popover ( 'takahuri' )

.popover('whakangaromia')

Huna me te whakangaro i te popover o tetahi huānga.

$ ( '#huānga' ). popover ( 'whakangaromia' )

Tauira matohi

Tāpirihia te mahi whakakore ki nga karere mataara katoa me tenei mono.

Whakamahinga

Whakahohehia te whakakore i te matohi ma te JavaScript:

$ ( ".matohi" ). mataara ()

Tohutohu

Taapiri noa data-dismiss="alert"ki to patene kati hei hoatu aunoa i te mahi kati matohi.

<a class = "kati" data-dismiss = "matohi" href = "#" > × </a>   

Nga tikanga

$().matohi()

Ka takai i nga matohi katoa me te mahi tata. Kia whakakorikorihia o matohi ina katia, me mohio kei a raatau te karaehe .fademe .inte karaehe kua tukuna ki a raatau.

.matohi('kati')

Katia he matohi.

$ ( ".matohi" ). mataara ( 'kati' )

Nga huihuinga

Ko te karaehe mataara a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi mataara.

$ ( '#taku-matohi' ). herea ( 'katia' , mahi () {   
  // mahia tetahi mea…
})

Tauira whakamahi

Mahi atu ki nga paatene. Ka kii te paatene mana, te hanga roopu patene ranei mo etahi atu waahanga penei i nga paeutauta.

Stateful

Tāpiri data-loading-text="Loading..."ki te whakamahi i te ahua uta ki runga i te paatene.

<button type = "button" class = "btn btn-primary" data-loading-text = "Kei te uta..." > Te ahua o te uta </button>   

Takahuri kotahi

Tāpirihia data-toggle="button"hei whakahohe i te takahuri i runga i te paatene kotahi.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Takahuri Kotahi </button>   

Pouakataki

Tāpiri data-toggle="buttons-checkbox"mo te kāhua pouakataki takahuri i runga btn-rōpū.

<div class = "btn-group" data-toggle = "pātene-pouakataki" >  
  <button type = "button" class = "btn btn-primary" > Mauī </button>  
  <button type = "button" class = "btn btn-primary" > Waenga </button>  
  <button type = "button" class = "btn btn-primary" > Matau </button>  
</div>

reo irirangi

Tāpirihia data-toggle="buttons-radio"mo te kāhua reo irirangi takahuri i runga btn-rōpū.

<div class = "btn-group" data-toggle = "pātene-reo irirangi" >  
  <button type = "button" class = "btn btn-primary" > Mauī </button>  
  <button type = "button" class = "btn btn-primary" > Waenga </button>  
  <button type = "button" class = "btn btn-primary" > Matau </button>  
</div>

Whakamahinga

Whakahohehia nga paatene ma te JavaScript:

$ ( '.nav-tabs' ). pātene ()

Tohutohu

Ko nga huanga raraunga he mea nui ki te paatene mono. Tirohia te tauira waehere i raro nei mo nga momo tohu tohu.

Kōwhiringa

Karekau

Nga tikanga

$().pātene('takahuri')

Ka takahuri te ahua pana. Ka hoatu ki te paatene te ahua kua whakahohehia.

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

$().pātene('uta')

Ka tautuhi i te ahua o te paatene ki te uta - ka monohia te paatene me te huri i te kuputuhi ki te uta kuputuhi. Ko te uta kuputuhi me tautuhi ki te huānga paatene ma te whakamahi i te huanga raraunga data-loading-text.

<button type = "button" class = "btn" data-loading-text = "uta mea..." > ... </button>    

$().pātene('tautuhi')

Ka tautuhi ano i te ahua o te paatene - ka huri i te kuputuhi ki te tuhinga taketake.

$().pātene(aho)

Ka tautuhi ano i te ahua o te paatene - ka huri i te kuputuhi ki tetahi ahuatanga kuputuhi kua tautuhia.

<button type = "button" class = "btn" data-complete-text = "kua oti!" > ... </pātene>    
<hōtuhi>
  $ ( '.btn' ). pātene ( 'oti' )
</script>

Mō

Tikina nga momo turanga me te tautoko ngawari mo nga waahanga tiango penei i te accordions me te whakatere.

* Me whakauru te mono Whakawhiti.

Tauira accordion

Ma te whakamahi i te mono tiango, i hangaia e matou he widget ahua accordion ngawari:

<div class = "accordion" id = "accordion2" >  
  <div class = "akordion-rōpū" > 
    <div class = "akordion-upoko" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Tūemi Rōpū Tiango #1
      </a>
    </div>
    <div id = "collapseOne" class = "akordion-tinana tiango ki roto" >  
      <div class = "akordion-roto" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "akordion-rōpū" > 
    <div class = "akordion-upoko" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Tūemi Rōpū Tiango #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body collapse" >  
      <div class = "akordion-roto" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Ka taea hoki e koe te whakamahi i te mono me te kore te tohu accordion. Hangaia he paatene takahuri te whakaroa me te tiango o tetahi atu huānga.

< type button = "pātene" class = "btn btn-dater" data-toggle = "tiango" data-target = "#demo" >    
  ngawari te tiango
</pātene>
 
<div id = "demo" class = "collapse in" > … </div>  

Whakamahinga

Ma nga huanga raraunga

Tāpiri noa data-toggle="collapse"me te data-targetki te huānga ki te tautapa aunoa i te mana o te huānga tiango. Ka data-targetwhakaaetia e te huanga he kaikowhiri css hei hoatu i te tiango ki. Me tino taapiri te karaehe collapseki te huānga tiango. Mena kei te pirangi koe kia tuwhera taunoa, taapirihia te akomanga taapiri in.

Hei taapiri i te whakahaere roopu rite-akordion ki te mana tiango, taapirihia te huanga raraunga data-parent="#selector". Tirohia te demo kia kite i tenei mahi.

Ma te JavaScript

Whakahohe ā-ringa ki:

$ ( ".collapse" ). tiango ()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-parent="".

Nga tikanga

.collapse(kōwhiringa)

Ka whakahohe i to ihirangi hei huānga tiango. Ka whakaae ki nga whiringa whiriwhiri object.

$ ( '#myCollapsible' ). tiango ({
  takahuri : teka 
})

.collapse('takahuri')

Ka takahuri i tetahi huānga tiango hei whakaatu, huna ranei.

.collapse('whakaatu')

Ka whakaatu i tetahi huānga tiango.

.collapse('huna')

Hunaia he huānga tiango.

Nga huihuinga

Ko te karaehe tiango a Bootstrap e whakaatu ana i etahi huihuinga mo te hono ki te mahi tiango.

$ ( '#myCollapsible' ). kei runga ( 'huna' , mahi () {   
  // mahia tetahi mea…
})

Tauira carousel

Ko te whakaatakiriata i raro nei e whakaatu ana i tetahi mono me te waahanga mo te eke paihikara ma nga huānga penei i te carousel.

Tapanga Karakōnui Tuatahi

Ka taea e koe te mahi, ka taea e koe te whakahaere, ka taea e koe te mahi. Donec id elit non mi porta gravida and eget metus. Ko te ingoa o nga mea katoa ka taea e koe.

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" class = "carousel slide" >  
  <ol class = "carousel-tohu" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Tuemi Carousel -->
  <div class = "carousel-roto" > 
    <div class = "tuemi hohe" > … </div> 
    <div class = "tuemi" > … </div> 
    <div class = "tuemi" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "mua" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "muri" > › </a>   
</div>

Whakamahinga

Ma nga huanga raraunga

Whakamahia nga huanga raraunga kia ngawari te whakahaere i te tuunga o te carousel. data-slideka whakaae ki nga kupumatua prev, next, ka whakarereke i te tuunga kiriata e pa ana ki tona turanga o naianei. Arā, whakamahia data-slide-toki te tuku i te taupū kiriata mata ki te carousel data-slide-to="2", e peke ana i te tūnga kiriata ki tetahi taupū ka timata ki te 0.

Ma te JavaScript

Waea a ringatia te carousel me:

$ ( '.carousel' ). carousel ()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScriptz ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-interval="".

Nga tikanga

.carousel(kōwhiringa)

Ka arataki i te carousel me etahi whiringa objectka tiimata ka timata te paihikara i roto i nga taonga.

$ ( '.carousel' ). carousel ({
  wā : 2000 
})

.carousel('huringa')

Ka huri i nga taonga carousel mai i te maui ki te matau.

.carousel('pause')

Ka aukati te carousel i te eke paihikara ma nga taonga.

.carousel(tau)

Ka huri i te carousel ki tetahi anga (0 te ahua, he rite ki te huranga).

.carousel('mua')

Ka huri ki te mea o mua.

.carousel('muri')

Ka huri ki te tuemi e whai ake nei.

Nga huihuinga

Ko te karaehe carousel a Bootstrap e whakaatu ana i nga huihuinga e rua mo te hono ki te mahi carousel.

Tauira

He mono taketake, ngawari te whakaroa mo te hanga tere i nga momo upoko huatau me nga momo whakauru kuputuhi.

< momo whakauru = "kuputuhi" raraunga-provide = "typeahead" >  

Ka hiahia koe ki te tautuhi autocomplete="off"kia kore e puta nga tahua kaitirotiro taunoa ki runga i te maturuturunga iho o Bootstrap typeahead.

Whakamahinga

Ma nga huanga raraunga

Taapirihia nga huanga raraunga hei rehita i tetahi huānga me te mahi a te momotuhi e whakaatuhia ana i te tauira i runga ake nei.

Ma te JavaScript

Waea a ringa ki te upoko patopato me:

$ ( '.typeahead' ). upoko patopato ()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-source="".

Nga tikanga

.typeahead(kōwhiringa)

Ka arataki i te whakaurunga me te upoko patopato.

Tauira

Ko te whakaterenga i te taha maui he whakaaturanga ora o te mono affix.

Whakamahinga

Ma nga huanga raraunga

Kia ngawari te taapiri i te whanonga piri ki tetahi huānga, taapiri noa data-spy="affix"ki te huānga e hiahia ana koe ki te tutei. Na ka whakamahi i nga waahi hei tautuhi i te wa e huri ai te titi o te huānga ki runga me te weto.

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

Ma te JavaScript

Karangatia te mono affix ma te JavaScript:

$ ( '#navbar' ). whakapiri ()

Kōwhiringa

Ko nga whiringa ka taea te tuku ma nga huanga raraunga, JavaScript ranei. Mo nga huanga raraunga, apitihia te ingoa whiringa ki data-, penei i te data-offset-top="200".