Mo nga tikanga

He ngawari, engari he ngawari, ka mau ki te mono javascript mod me te iti rawa o nga mahi me nga taunoa atamai.

Tauira pateko

Kei raro nei te ahua o te ahua o te ahua.

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.

Te whakamahi bootstrap-modal

Karangatia te tikanga ma te javascript:

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

Kōwhiringa

Tohutohu

Ka taea e koe te whakahohe i nga tikanga i runga i to wharangi ngawari me te kore e tuhi i tetahi rarangi javascript. Whakaturia noa ki data-toggle="modal"runga i tetahi huānga kaiwhakahaere me te e rite ana data-target="#foo"ranei href="#foo"ki te id huānga aratau, a ka paohia, ka whakarewahia to aratau.

Ano, hei taapiri i nga whiringa ki to tauira aratau, whakauru noa hei huanga raraunga taapiri i runga i te huānga mana, i te tohu aratau ranei.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Whakarewa Modal </a>    

<div class = "tauira huna" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> pane pane </h3>
  </div>
  <div class = "modal-body" > 
    <p> Kotahi te tinana pai… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Katia </a>   
    <a href = "#" class = "btn btn-primary" > Tiakina nga huringa </a>  
  </div>
</div>

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…
})

Mo nga takaiho

Tāpirihia nga tahua takaiho ki nga mea katoa kei Bootstrap me tenei mono ngawari. Kei a Bootstrap te tautoko tahua takaiho ki runga i te pae whakatere, ripa, me nga pire.

Tauira

Paatohia nga hononga whakaterenga iho i te pae whakatere me nga pire kei raro nei hei whakamatautau i nga takaiho.

• Hononga auau
• Whakataka iho
  • Action
  • Another action
  • Something else here
  • Separated link
• Whakataka 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Whakataka 3
  • Action
  • Another action
  • Something else here
  • Separated link

Ma te whakamahi i te bootstrap-dropdown.js

Karangatia nga takaiho ma te javascript:

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

Tohutohu

Kia tere te taapiri i nga mahi takaiho ki tetahi huānga me tapiri noa data-toggle="dropdown"ka whakahohe aunoa i nga takahanga bootstrap whaimana.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Hononga auau </a> </li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "whakataka-takahuri" data-toggle = "whakaheke" href = "#menu1" >   
      Whakataka iho
      <b class = "caret" ></b> 
    </a>
    <ul class = "tahua-whakaheke" > 
      <li><a href = "#" > Mahi </a> </li> 
      <li><a href = "#" > He mahi ano </a></li> 
      <li><a href = "#" > He mea ano kei konei </a></li> 
      <li class = "kaiwehewehe" ></li> 
      <li><a href = "#" > Hononga wehea </a> </li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "whakaheke" > 
    <a class = "whakataka-takahuri" data-toggle = "whakaheke" data-target = "#" href = "ara/ki/page.html" >    
      Whakataka iho
      <b class = "caret" ></b> 
    </a>
    <ul class = "tahua-whakaheke" > 
      ...
    </ul>
  </li>
</ul>

Nga tikanga

$().takaiho()

He api pataka mo te whakahohe i nga tahua mo te pae whakaterenga kua tohua, te whakatere ripa ranei.

Ko te mono ScrollSpy mo te whakahou aunoa i nga whaainga nav i runga i te tuunga panuku.

He tauira navbar me te scrollspy

Panuku te waahi i raro nei ka matakitaki i te whakahou whakaterenga. Ka miramirahia nga mea iti takaiho. Whakamātauria!

Ma te whakamahi i te bootstrap-scrollspy.js

Karangatia te scrollspy mā te javascript:

$ ( '#navbar' ). scrollspy ()

Tohutohu

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).

<body data-spy = "panuku" > ... </body>  

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

Nga huihuinga

Ka taapirihia e tenei mono he ripa tere, hihiri me te mahi pire mo te whakawhiti i roto i nga ihirangi o te rohe.

Tauira ripa

Patohia nga ripa i raro nei hei takahuri i waenga i nga pihanga huna, ahakoa ma nga tahua takaiho.

• Kainga
• Kōtaha
• Whakataka iho
  • @fat
  • @mdo

Ma te whakamahi i te bootstrap-tab.js

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 ripa, i te whakatere pire ranei me te kore e tuhi i tetahi tuhinga javascript ma te tohu noa , i 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 uru ki te whakaahua 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
})

Mō Aki Utauta

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.

He tauira whakamahi i nga Aki Utauta

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

Ma te whakamahi i te bootstrap-tooltip.js

Whakaohohia te aki taputapu ma te javascript:

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

Kōwhiringa

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.

<a href = "#" rel = "Aki taputapu" title = "Aki taputapu 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' )

Mo nga popovers

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.

* Me whakauru aki taputapu

Tauira whakaparo popover

Whakaparo ki runga i te paatene hei whakaoho i te pouver.

Ma te whakamahi i te bootstrap-popover.js

Whakahohehia nga popovers ma te javascript:

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

Kōwhiringa

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' )

Mo nga matohi

Ko te mono mataara he karaehe iti mo te taapiri i nga mahi tata ki nga matohi.

Tauira matohi

Ka mahi te mono matohi i runga i nga karere matohi auau, me te aukati i nga karere.

Ma te whakamahi i te bootstrap-alert.js

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…
})

Mō

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

Tauira whakamahi

Whakamahia nga paatene mono mo nga kawanatanga me nga takahuri.

Ma te whakamahi i te bootstrap-button.js

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.

<!-- Tāpirihia te raraunga-toggle="button" hei whakahohe i te takahuri i runga i te paatene kotahi -->
<button class = "btn" data-toggle = "button" > Takahuri Kotahi </button>  
 
<!-- Tāpirihia te raraunga-toggle="buttons-checkbox" mō te kāhua pouakataki takahuri i runga btn-group -->
<div class = "btn-group" data-toggle = "pātene-pouakataki" >  
  <button class = "btn" > Mauī </button> 
  <button class = "btn" > Waenga </button> 
  <button class = "btn" > Matau </button> 
</div>
 
<!-- Tāpirihia te raraunga-toggle="buttons-radio" mō te kāhua reo irirangi takahuri i runga btn-group -->
<div class = "btn-group" data-toggle = "pātene-reo irirangi" >  
  <button class = "btn" > Mauī </button> 
  <button class = "btn" > Waenga </button> 
  <button class = "btn" > Matau </button> 
</div>

Nga tikanga

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

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

<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 class = "btn" data-loading-text = "e uta ana i nga 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 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:

Ma te whakamahi i te bootstrap-collapse.js

Whakahohe ma te javascript:

$ ( ".collapse" ). tiango ()

Kōwhiringa

Tohutohu

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.

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

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…
})

Mō

He mono noa mo te eke paihikara ma nga huānga. He harikoa.

Tauira carousel

Tirohia te whakaatakiriata i raro nei.

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.

Tapanga Karakōnui Tuarua

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.

Tapanga Karakōnui Tuatoru

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.

‹ ›

Ma te whakamahi i te bootstrap-carousel.js

Waea ma javascript:

$ ( '.carousel' ). carousel ()

Kōwhiringa

Tohutohu

Ka whakamahia nga huanga raraunga mo nga mana o mua me muri. Tirohia te tauira tohu i raro nei.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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>

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.

Mō

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

Tauira

Tīmatahia te pato i te āpure i raro nei hei whakaatu i ngā hua o te upoko patopato.

Ma te whakamahi i te bootstrap-typeahead.js

Karangatia te upoko tuhi ma te javascript:

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

Kōwhiringa

Tohutohu

Taapirihia nga huanga raraunga hei rehita i tetahi huānga me te taumahinga momotuhi.

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

Nga tikanga

.typeahead(kōwhiringa)

Ka arataki i te whakaurunga me te upoko patopato.