Javascript mo Bootstrap

Whakaorangia nga waahanga o Bootstrap—inaianei me nga taputapu jQuery ritenga 12 .

Modal

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

Whakataka

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.

Scrollspy

Whakamahia te scrollspy ki te whakahou aunoa i nga hononga i to pae whakatere hei whakaatu i te hononga hohe o naianei i runga i te tuunga panuku.

Ripa ka taea te huri

Whakamahia tenei mono kia whai hua ake nga ripa me nga pire ma te tuku i a raatau ki te takahuri i roto i nga pihanga ripanga o nga ihirangi rohe.

Aki taputapu

He tirohanga hou mo te mono jQuery Tipsy, Karekau nga Aki Utauta e whakawhirinaki ki nga whakaahua—ka whakamahi ratou i te CSS3 mo nga pakiwaituhi me nga huanga-raraunga mo te rokiroki taitara o te rohe.

Poovers *

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 nga aki taputapu

Nga karere matohi

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

Patene

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

Tiango

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

Carousel

Waihangahia he kaupapa harikoa o nga mea katoa e hiahia ana koe ki te whakarato whakaatakiriata tauwhitiwhiti o te ihirangi.

Tohutohu

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

Tauwhiro *

Mo nga paanga whakawhiti ngawari, whakaurua bootstrap-transition.js kotahi ki te paheke i roto i nga tikanga, ka memeha atu ranei nga matohi.

* E hiahiatia ana mo te hākoritanga i roto i nga monomai

Mahunga ake! Ko nga taputapu javascript katoa e hiahia ana ki te putanga hou o te jQuery.

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.

Tikiake kōnae

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.

Whakarewahia te aratau demo

Te whakamahi bootstrap-modal

Karangatia te tikanga ma te javascript:

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

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
papamuri boolean pono Kei roto he huānga tauira-papamuri. Arā, whakawhāitihia statiche papamuri e kore e kati i te aratau i runga i te paatene.
papapātuhi boolean pono Ka kati i te aratau ina pehia te ki mawhiti
whakaatu boolean pono Ka whakaatu i te aratau ina arawhiti.

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.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Whakarewa Modal </a>
  1. <div class = "tauira huna" id = "myModal" >
  2. <div class = "modal-header" >
  3. <button type = "button" class = "close" data-dismiss = "modal" > × </button>
  4. <h3> pane pane </h3>
  5. </div>
  6. <div class = "modal-body" >
  7. <p> Kotahi te tinana pai… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" class = "btn" data-dismiss = "modal" > Katia </a>
  11. <a href = "#" class = "btn btn-primary" > Tiakina nga huringa </a>
  12. </div>
  13. </div>
Mahunga ake! Mena kei te pirangi koe ki te whakakorikori i to aratau ki roto, ki waho, taapirihia he .fadekaraehe ki te .modalhuānga (tirohia te demo ki te kite i tenei mahi) me te whakauru bootstrap-transition.js.

Nga tikanga

.modal(kōwhiringa)

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

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

.modal('takahuri')

Ka takahuri-a-ringa i te tikanga.

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

.modal('whakaatu')

Ka whakatuwhera a-ringa i te tikanga.

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

.modal('huna')

Ka huna a-ringa i tetahi tikanga.

  1. $ ( '#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.

Takahanga Whakaahuatanga
whakaatu Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
whakaaturia Ka puhia tenei takahanga i te wa i kitea ai te aratau ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga css).
huna Ka puhia tonutia tenei takahanga ina hidekua karangahia te aratuka tauira.
huna Ka puhia tenei takahanga ina mutu te hunanga o te tikanga mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga css).
  1. $ ( '#myModal' ). kei runga ( 'huna' , mahi () {
  2. // mahia tetahi mea…
  3. })

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

Tikiake kōnae

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!

@ngako

Ad leggings keytar, brunch id toi party dolor laboure. Pitchfork yr enim lo-fi i mua i to ratou hoko atu. Tumblr pāmu-ki-tepu mana pahikara ahakoa. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Ko nga tarau tarau jean koti, williamsburg hoodie minim qui kaore pea koe i rongo mo ena me te cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artistan ullamco consequat.

@mdo

Veniam marfa mustache papareti, adipisicing fugiat velit pitchfork pahau. Freegan pahau aliqua cupidatat mcsweeney's vero. Cupidatat wha loko nisi, ea helvetica nulla carles. Taraka kai taraka kai moko, ko te quis non freegan vinyl a mcsweeney. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

kotahi

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Te mana paihikara Lomo adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Ko te Vero VHS he tino pai. Consectetur etahi DIY iti putea karere. Ko te whakaaro o mua i roto i te, tauwhiro delectus consectetur fanny pack iphone.

rua

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

Keytar twee blog, culpa messenger bag marfa ahakoa he taraka kai. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats kaore pea koe i rongo mo ratou e consequat hoodie gluten-free lo-fi fap aliquip. Whakamahia he waahi i mua i te hokonga atu, ko terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artistan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Ma te whakamahi i te bootstrap-scrollspy.js

Karangatia te scrollspy mā te javascript:

  1. $ ( '#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).

  1. <body data-spy = "panuku" > ... </body>
Mahunga ake! Ko nga hononga Navbar me whai tohu id ka taea te whakatau. Hei tauira, <a href="#home">home</a>me rite ki tetahi mea i roto i te dom rite <div id="home"></div>.

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:

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

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
whakatiki tau 10 Pika hei whakatiki mai i runga i te tatau i te waahi o te panuku.

Nga huihuinga

Takahanga Whakaahuatanga
whakahohe Ka pupuhi tenei takahanga i nga wa katoa ka whakahohehia he mea hou e te scrollspy.

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

Tikiake kōnae

Tauira ripa

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

Kare pea koe i rongo ki a ratou he tarau jean Austin. Nesciunt tofu stumptown aliqua, retro synth master horoi. Moutere cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex wheke. A tuu i te salvia cillum iphone. Seitan aliquip quis cardigan kakahu a Amerika, te kai patu patu i etahi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.


Ma te whakamahi i te bootstrap-tab.js

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa mā te ingoa
  2. $ ( '#myTab a:tuatahi' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa tuatahi
  3. $ ( '#myTab a: last' ). ripa ( 'whakaatu' ); // Tīpakohia te ripa whakamutunga
  4. $ ( '#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.

  1. <ul class = "nav nav-ripa" >
  2. <li><a href = "#home" data-toggle = "tab" > Home </a> </li>
  3. <li><a href = "#profile" data-toggle = "ripa" > Kōtaha </a> </li>
  4. <li><a href = "#messages" data-toggle = "ripa" > Karere </a> </li>
  5. <li><a href = "#settings" data-toggle = "ripa" > Tautuhinga </a> </li>
  6. </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.

  1. <ul class = "nav nav-tabs" id = "myTab" >
  2. <li class = "active" ><a href = "#home" > Home </a> </li>
  3. <li><a href = "#profile" > Kōtaha </a> </li>
  4. <li><a href = "#karere" > Nga Karere </a> </li>
  5. <li><a href = "#settings" > Tautuhinga </a> </li>
  6. </ul>
  7.  
  8. <div class = "ripa-ihirangi" >
  9. <div class = "tab-pane active" id = "home" > ... </div>
  10. <div class = "tab-pane" id = "profile" > ... </div>
  11. <div class = "tab-pane" id = "nga karere" > ... </div>
  12. <div class = "tab-pane" id = "tautuhinga" > ... </div>
  13. </div>
  14.  
  15. <hōtuhi>
  16. $ ( mahi () {
  17. $ ( '#myTab a: last' ). ripa ( 'whakaatu' );
  18. })
  19. </script>

Nga huihuinga

Takahanga Whakaahuatanga
whakaatu Ka pupuhi tenei takahanga ki te whakaaturanga ripa, engari i mua i te whakaaturanga o te ripa hou. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
whakaaturia Ka ahi tenei takahanga ki te whakaaturanga ripa i muri i te whakaaturanga ripa. Whakamahia event.targetme event.relatedTargette aro ki te ripa hohe me te ripa hohe o mua (mehemea e waatea ana).
  1. $ ( 'a[data-toggle="ripa"]' ). kei runga ( 'whakaatuhia' , mahi ( e ) {
  2. e . ūnga // ripa whakahohe
  3. e . relatedTarget // ripa o mua
  4. })

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.

Tikiake kōnae

He tauira whakamahi i nga Aki Utauta

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

Ko nga tarau tarau karekau pea koe i rongo. Pua whakaahua pahau denim mata reta vegan putea karere stumptown. Ko te quinoa 8-bit te kakahu o Amerika he terry richardson's fixie a mcsweeney's fixie te kakahu o Amerika he terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, e wha te purenga vegan chambray a loko mcsweeney. He tohunga toi tino whakahiato ahakoa te keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Ma te whakamahi i te bootstrap-tooltip.js

Whakaohohia te aki taputapu ma te javascript:

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

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
hākoritanga boolean pono hoatu he whakawhiti memeha css ki te aki taputapu
whakanohonga aho|mahi 'runga' me pehea te whakanoho i te aki taputapu - runga | raro | maui | tika
kaiwhiriwhiri aho teka Mena ka tukuna he kaiwhiriwhiri, ka tukuna nga taonga aki taputapu ki nga whaainga kua tohua.
taitara aho | mahi '' uara taitara taunoa mena karekau he tohu `taitara`
keu aho 'whakapapa' me pehea te whakakorikori i te aki taputapu - whakaparo | arotahi | ā-ringa
whakaroa tau | ahanoa 0

whakaroa te whakaatu me te huna i te aki taputapu (ms) - kaore e pa ki te momo keu a-ringa

Mena ka tukuna he nama, ka tukuna he whakaroa ki te huna/whakakitenga e rua

Ko te hanganga ahanoa:delay: { show: 500, hide: 100 }

Mahunga ake! Ko nga whiringa mo nga aki taputapu takitahi ka taea te whakarite ma te whakamahi i nga huanga raraunga.

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.

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

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

.utautauta('huna')

Hunaia te aki taputapu o tetahi huānga.

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

.utautauta('takahuri')

Ka takahurihia te akiutauta o tetahi huānga.

  1. $ ( '#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

Tikiake kōnae

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:

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

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
hākoritanga boolean pono hoatu he whakawhiti memeha css ki te aki taputapu
whakanohonga aho|mahi 'tika' me pehea te whakanoho i te pouver - runga | raro | maui | tika
kaiwhiriwhiri aho teka ki te tukuna he kaiwhiriwhiri, ka tukuna nga taonga taputapu ki nga whaainga kua tohua
keu aho 'whakapapa' me pehea te whakakorikori i te aki taputapu - whakaparo | arotahi | ā-ringa
taitara aho | mahi '' uara taitara taunoa mena karekau te huanga `taitara`
ihirangi aho | mahi '' uara ihirangi taunoa ki te kore te huanga `raraunga-ihirangi`
whakaroa tau | ahanoa 0

whakaroa te whakaatu me te huna i te popover (ms) - kaore e pa ki te momo keu a-ringa

Mena ka tukuna he nama, ka tukuna he whakaroa ki te huna/whakakitenga e rua

Ko te hanganga ahanoa:delay: { show: 500, hide: 100 }

Mahunga ake! Ko nga whiringa mo nga popovers takitahi ka taea te tautuhi ma te whakamahi i nga huanga raraunga.

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.

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

.popover('huna')

Hunaia he huānga popover.

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

.popover('takahuri')

Ka takahuri i tetahi huānga popover.

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

Mo nga matohi

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

Tikiake

Tauira matohi

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

Guacamole tapu! He pai ake te tirotiro i a koe ano, kaore koe i te tino pai.

Aue kapo! I hapa koe!

Hurihia tenei me tera ka ngana ano. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Tangohia tenei mahi Me mahi ranei tenei


Ma te whakamahi i te bootstrap-alert.js

Whakahohehia te whakakore i te matohi ma te javascript:

  1. $ ( ".matohi" ). mataara ()

Tohutohu

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

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

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

Nga huihuinga

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

Takahanga Whakaahuatanga
kati Ka pupuhi tenei takahanga ina ka closekarangahia te aratuka tauira.
katia Ka puhia tenei takahanga ina katia te matohi (ka tatari kia oti nga whakawhitinga css).
  1. $ ( '#taku-matohi' ). herea ( 'katia' , mahi () {
  2. // mahia tetahi mea…
  3. })

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

Tikiake kōnae

Tauira whakamahi

Whakamahia nga paatene mono mo nga kawanatanga me nga takahuri.

Stateful
Takahuri kotahi
Pouakataki
reo irirangi

Ma te whakamahi i te bootstrap-button.js

Whakahohehia nga paatene ma te javascript:

  1. $ ( '.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.

  1. <!-- Tāpirihia te raraunga-toggle="button" hei whakahohe i te takahuri i runga i te paatene kotahi -->
  2. <button class = "btn" data-toggle = "button" > Takahuri Kotahi </button>
  3.  
  4. <!-- Tāpirihia te raraunga-toggle="buttons-checkbox" mō te kāhua pouakataki takahuri i runga btn-group -->
  5. <div class = "btn-group" data-toggle = "pātene-pouakataki" >
  6. <button class = "btn" > Mauī </button>
  7. <button class = "btn" > Waenga </button>
  8. <button class = "btn" > Matau </button>
  9. </div>
  10.  
  11. <!-- Tāpirihia te raraunga-toggle="buttons-radio" mō te kāhua reo irirangi takahuri i runga btn-group -->
  12. <div class = "btn-group" data-toggle = "pātene-reo irirangi" >
  13. <button class = "btn" > Mauī </button>
  14. <button class = "btn" > Waenga </button>
  15. <button class = "btn" > Matau </button>
  16. </div>

Nga tikanga

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

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

Mahunga ake! Ka taea e koe te huri aunoa i te paatene ma te whakamahi i te data-togglehuanga.
  1. <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.

  1. <button class = "btn" data-loading-text = "e uta ana i nga mea..." > ... </button>
Mahunga ake! Ka mau tonu a Firefox i te ahua haua puta noa i nga utaina wharangi . Ko tetahi otinga mo tenei ko te whakamahi autocomplete="off".

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

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

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

Tikiake kōnae

* Me whakauru te mono Whakawhiti.

Tauira accordion

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

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad wheke. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Taraka kai quinoa nesciunt laborum eiusmod. Parakuihi 3 wolf moon tempor, sunt aliqua hoatu he manu ki runga wheke kotahi-taketake kawhe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Te reweti occaecat mahi pia paamu-ki-tepu, raw denim aesthetic synth nesciunt kaore pea koe i rongo mo ratou accusamus labore ukauka VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad wheke. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Taraka kai quinoa nesciunt laborum eiusmod. Parakuihi 3 wolf moon tempor, sunt aliqua hoatu he manu ki runga wheke kotahi-taketake kawhe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Te reweti occaecat mahi pia paamu-ki-tepu, raw denim aesthetic synth nesciunt kaore pea koe i rongo mo ratou accusamus labore ukauka VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad wheke. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Taraka kai quinoa nesciunt laborum eiusmod. Parakuihi 3 wolf moon tempor, sunt aliqua hoatu he manu ki runga wheke kotahi-taketake kawhe nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Te reweti occaecat mahi pia paamu-ki-tepu, raw denim aesthetic synth nesciunt kaore pea koe i rongo mo ratou accusamus labore ukauka VHS.

Ma te whakamahi i te bootstrap-collapse.js

Whakahohe ma te javascript:

  1. $ ( ".collapse" ). tiango ()

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
matua kaiwhiriwhiri teka Ki te kaikowhiri ka kati nga huānga tiango katoa i raro i te matua kua tohua ina whakaatuhia tenei mea tiango. (he rite ki te whanonga akoriona tuku iho)
takahuri boolean pono Ka takahuri i te huānga tiango i runga i te inoi

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.

  1. <button class = "btn btn-danger" data-toggle = "tiango" raraunga-target = "#demo" >
  2. ngawari te tiango
  3. </pātene>
  4.  
  5. <div id = "demo" class = "collapse in" > </div>
Mahunga ake! 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.

Nga tikanga

.collapse(kōwhiringa)

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

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

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

Takahanga Whakaahuatanga
whakaatu Ka pupuhi tenei takahanga ina ka showkarangahia te aratuka tauira.
whakaaturia Ka puhia tenei takahanga ina kitea he huānga tiango ki te kaiwhakamahi (ka tatari kia oti nga whakawhitinga css).
huna Ka pupuhihia tenei kaupapa i te wa hidei kiia ai te tikanga.
huna Ka puhia tenei takahanga ina hunahia he huānga tiango mai i te kaiwhakamahi (ka tatari kia oti nga whakawhitinga css).
  1. $ ( '#myCollapsible' ). kei runga ( 'huna' , mahi () {
  2. // mahia tetahi mea…
  3. })

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

Tikiake kōnae

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:

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

Kōwhiringa

Ingoa momo taunoa whakaahuatanga
puna huinga [ ] Ko te puna raraunga hei patai.
tūemi tau 8 Ko te maha o nga taonga hei whakaatu i te takaiho.
kaiwhakariterite mahi take koretake Ko te tikanga e whakamahia ana hei whakatau mena ka taurite tetahi patai ki tetahi mea. Ka whakaae ki te tohenga kotahi, ko te itemmea hei whakamatautau i te patai. Uru ki te uiui onāianei me te this.query. Whakahokia he boolean truemena he taurite te patai.
kaihoroi mahi ōrite tika,
take tairongo, take
tairongo
Tikanga i whakamahia hei kōmaka i nga hua whakaoti aunoa. Ka whakaae ki te tohenga kotahi items, a, kei a ia te whānuitanga o te tauira o te upoko patopato. Tohutoro te patai onāianei me te this.query.
miramira mahi e whakaatu ana i nga whakataetae taunoa katoa Tikanga hei whakanui i nga hua whakaoti-aunoa. Ka whakaae ki te tohenga kotahi item, a, kei a ia te whānuitanga o te tauira o te upoko patopato. Me whakahoki html.

Tohutohu

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

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

Nga tikanga

.typeahead(kōwhiringa)

Ka arataki i te whakaurunga me te upoko patopato.