Javascript maka Bootstrap

Weta ngwa Bootstrap na ndụ-ugbu a nwere ngwa mgbakwunye jQuery omenala iri na abụọ .

Ụdị ụdị

A streamlined, mana mgbanwe, were na omenala javascript modal ngwa mgbakwunye na-eji naanị kacha nta chọrọ ọrụ na smart ndabara.

Mbelata

Tinye ndetu mwepu na ihe ọ bụla dị na Bootstrap na ngwa mgbakwunye a dị mfe. Bootstrap nwere nkwado menu ndetu zuru oke na navbar, taabụ na ọgwụ.

Scrollspy

Jiri scrollspy ka imelite njikọ ndị dị na navbar gị ozugbo iji gosi njikọ na-arụ ọrụ ugbu a dabere na ọnọdụ mpịakọta.

Taabụ enwere ike ịtụgharị

Jiri ngwa mgbakwunye a mee ka taabụ na ọgwụ bara uru karịa site n'ikwe ka ha gbanwee site na pane nke ọdịnaya mpaghara.

Ntuziaka ngwaọrụ

Ihe ọhụrụ na-ewe na jQuery Tipsy ngwa mgbakwunye, Tooltips anaghị adabere na onyonyo-ha na-eji CSS3 maka animation na njirimara data maka nchekwa aha mpaghara.

Popovers *

Tinye obere ihe machie nke ọdịnaya, dị ka ndị dị na iPad, na ihe ọ bụla maka ozi nke abụọ nke ụlọ.

* Chọrọ ka gụnye ndụmọdụ ngwaọrụ

Ozi mkpu

Ngwa mgbakwunye njikere bụ obere klaasị maka ịgbakwunye ọrụ nso na ọkwa.

Bọtịnụ

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

daa

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

Carousel

Mepụta ọmarịcha ọdịnaya nke ọ bụla ịchọrọ ịnye ihe ngosi mmịfe nke ọdịnaya.

Ụdị isi

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

Mgbanwe *

Maka mmetụta mgbanwe dị mfe, gụnyere bootstrap-transition.js otu ugboro ka ịsime na modal ma ọ bụ kwụsịchaa ọkwa.

* Achọrọ maka animation na plugins

Welie isi elu! Ngwa mgbakwunye javascript niile chọrọ ụdị jQuery kachasị ọhụrụ.

Banyere ụdịdị

A streamlined, mana mgbanwe, were na omenala javascript modal ngwa mgbakwunye na-eji naanị kacha nta chọrọ ọrụ na smart ndabara.

Budata faịlụ

Ihe atụ kwụ ọtọ

N'okpuru ebe a bụ modal atụgharịrị.

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

Mwepụta ngosi modal

Iji bootstrap-modal

Kpọọ modal site na javascript:

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

Nhọrọ

Aha ụdị ndabara nkọwa
ndabere boolean eziokwu Na-agụnye ihe modal-backdrop element. Nhọrọ, ezipụta staticmaka backdrop nke na-adịghị emechi modal na pịa.
ahụigodo boolean eziokwu Na-emechi modal mgbe ịpịrị igodo mgbapụ
gosi boolean eziokwu Na-egosi modal mgbe ebido ya.

Akara akara

Ị nwere ike ịgbalite modals na ibe gị n'ụzọ dị mfe na-enweghị ide otu ahịrị javascript. Naanị tọọ data-toggle="modal"ihe njikwa nwere data-target="#foo"ma ọ bụ href="#foo"nke dabara na id element element, ma mgbe ịpịrị ya, ọ ga-ebido modal gị.

Ọzọkwa, ka ịgbakwunye nhọrọ na ihe atụ modal gị, tinye naanị ha dị ka njirimara data agbakwunyere na ma ọ bụ ihe njikwa ma ọ bụ akara modal n'onwe ya.

  1. <a class = "btn" data-toggle = "modal" href = "#myModal" > Usoro mmalite </a>
  1. <div klas = "modal hide" id = "myModal" >
  2. <div class = "modal-header" >
  3. < ụdị bọtịnụ = "bọtịnụ" klaasị = "emechi" data-dismiss = "modal" > × </bọtịnụ>
  4. <h3> Ihe nkụnye eji isi mee </h3>
  5. </div>
  6. <div klas = "modal-body" >
  7. <p> Otu ahụ mara mma… </p>
  8. </div>
  9. <div class = "modal-footer" >
  10. <a href = "#" klas = "btn" data-dismiss = "modal" > Mechie </a>
  11. <a href = "#" klas = "btn btn-primary" > Chekwa mgbanwe </a>
  12. </div>
  13. </div>
Welie isi elu! Ọ bụrụ na ịchọrọ ka modal gị na-emegharị ma pụta, tinye naanị otu .fadeklas na .modalmmewere ( rụtụ aka na ngosi iji hụ nke a na-arụ ọrụ) ma tinye bootstrap-transition.js.

Ụzọ

.modal(nhọrọ)

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

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

.modal('ntụgharị')

Iji aka na-atụgharị modal.

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

.modal('show')

Iji aka na-emepe modal.

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

.modal('zoo')

Iji aka na-ezo modal.

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

Ihe omume

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

Ihe omume Nkọwa
gosi Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri A na-achụpụ ihe omume a mgbe onye ọrụ mere ka modal ahụ anya (ga-echere ntụgharị css ka agwụchaa).
zoo A na-agbapụ ihe omume a ozugbo hidea kpọrọ usoro ihe atụ.
zoro ezo A na-achụpụ ihe omume a mgbe ezoro ezoro ya n'aka onye ọrụ modal (ga-echere mgbanwe css iji wuchaa).
  1. $ ( '#myModal' ). na ( 'zoro ezo' , ọrụ () {
  2. // mee ihe…
  3. })

Ihe mgbakwunye ScrollSpy bụ maka imelite ebumnuche nav na-akpaghị aka dabere na ọnọdụ mpịakọta.

Budata faịlụ

Ihe atụ navbar nwere scrollspy

Pịgharịa na mpaghara n'okpuru wee lelee mmelite nsoroụzọ. A ga-eme ka ọ pụta ìhè nke obere ihe ndọpụta. Gbalịa ya!

@abụba

Ad leggings keytar, brunch id art party dolor labour. Pitchfork yr enim lo-fi tupu ha ere qui. Ikike igwe kwụ otu ebe Tumblr ugbo gaa na tebụl ihe ọ bụla. Anim keffiyeh carles cardigan. Ụlọ foto Velit seitan mcsweeney 3 wolf moon irure. Cosby sweta lomo jean shorts, williamsburg hoodie minim qui eleghị anya, ị nụbeghị banyere ha et cardigan Trust fund culpa biodiesel wes anderson aesthetic. Nihil egbugbu accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa afụ ọnụ skateboard, adipisicing fugiat velit pitchfork afụ ọnụ. Freegan afụ ọnụ ma ọ bụ mcsweeney's vero. Cupidatat anọ ebe nisi, ma helvetica nulla carles. gwongworo nri cosby sweta egbugbu, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles na-adịghị mma mmega ahụ gentrify. Brooklyn adipisicing craft biya vice keytar deserunt.

otu

Occaecat commodo aliqua delectus. Fap craft biya deserunt skateboard ea. Lomo bicycle rights 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. Vero VHS kacha mma. Consectetur nisi DIY minim bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

abuo

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 ozi akpa marfa ọ bụla delectus nri gwongworo. Sapiente synth id echere. Locavore sed helvetica cliche irony, thundercats eleghị anya ị nụbeghị banyere ha na-akpata hoodie gluten-free lo-fi fap aliquip. Ụlọ ọrụ dị elu tupu ha ere, Terry Richardson proident brunch nesciunt quis cosby sweta pariatur keffiyeh ut helvetica artisan. Cardigan craft biya seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.


Iji bootstrap-scrollspy.js

Kpọọ scrollspy site na javascript:

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

Akara akara

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

  1. <body data-spy = "mpịakọta" > ... </ body>
Welie isi elu! Njikọ Navbar ga-enwerịrị ebumnuche id nwere ike idozi. Dịka ọmụmaatụ, a <a href="#home">home</a>ga-ederịrị ihe n'ime ụlọ dịka <div id="home"></div>.

Ụ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:

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

Nhọrọ

Aha ụdị ndabara nkọwa
nkwụsị nọmba 10 Pikselụ ka a ga-esi n'elu pụta mgbe ị na-agbakọ ọnọdụ mpịakọta.

Ihe omume

Ihe omume Nkọwa
rụọ ọrụ Ihe omume a na-agba ọkụ mgbe ọ bụla ihe ọhụrụ na-arụ ọrụ site na scrollspy.

Ngwa mgbakwunye a na-agbakwunye ngwa ngwa taabụ na arụ ọrụ pill maka ịtụgharị site na ọdịnaya mpaghara.

Budata faịlụ

Ihe atụ taabụ

Pịa taabụ dị n'okpuru ka ịgbanwee n'etiti pane zoro ezo, ọbụlagodi site na nchịkọta nhọrọ.

Raw denim eleghị anya ị nụbeghị maka ha jeans shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master sachapụ. Afụ ọnụ cliche tempor, williamsburg carles vegan helvetica. Reprehenderit onye na-egbu anụ retro keffiyeh dreamcatcher synth. Cosby sweta eu banh mi, qui irure terry richardson ex squid. Họrọ ebe salvia cillum iphone. Seitan aliquip quis cardigan uwe ndị America, anụ anụ voluptate bụ isi 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.


Iji bootstrap-tab.js

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

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

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

  1. $ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Họrọ taabụ n'aha
  2. $ ( '#myTab a: nke mbụ' ). tab ( 'show' ); // Họrọ taabụ mbụ
  3. $ ( '#myTab a: ikpeazụ' ). tab ( 'show' ); // Họrọ taabụ ikpeazụ
  4. $ ( '#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.

  1. <ul klas = "nav nav-tabs" >
  2. <li><a href = "#home" data-toggle = "taabụ" > Ụlọ </a></li>
  3. <li><a href = "#profile" data-toggle = "taabụ" > Profaịlụ </a></li>
  4. <li><a href = "#messages" data-toggle = "taabụ" > Ozi </a></li>
  5. <li><a href = "#settings" data-toggle = "taabụ" > Ntọala </a></li>
  6. </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.

  1. <ul klas = "nav nav-tabs" id = "myTab" >
  2. <li class = "ọrụ" ><a href = "#ụlọ" > Ụlọ </a></li>
  3. <li><a href = "#profile" > Profaịlụ </a></li>
  4. <li><a href = "#messages" > Ozi </a></li>
  5. <li><a href = "#settings" > Ntọala </a></li>
  6. </ul>
  7.  
  8. <div class = "taabụ-ọdịnaya" >
  9. <div class = "tab-pane active" id = "ụlọ" > ... </div>
  10. <div class = "tab-pane" id = "profaịlụ" > ... </div>
  11. <div class = "tab-pane" id = "ozi" > ... </div>
  12. <div class = "tab-pane" id = "ntọala" > ... </div>
  13. </div>
  14.  
  15. <edemede>
  16. $ ( ọrụ () {
  17. $ ( '#myTab a: ikpeazụ' ). tab ( 'show' );
  18. })
  19. </script>

Ihe omume

Ihe omume Nkọwa
gosi Ihe omume a na-agba ọkụ na ihe ngosi taabụ, mana tupu egosiri taabụ ọhụrụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
egosiri Ihe omume a na-agba ọkụ na ihe ngosi taabụ ka egosiri taabụ. Jiri event.targetma event.relatedTargettụọ taabụ nọ n'ọrụ yana taabụ arụ ọrụ gara aga (ọ bụrụ na ọ dị) n'otu n'otu.
  1. $ ( 'a[data-toggle = "taabụ"]' ). na ( 'gosiri' , ọrụ ( e ) {
  2. e . target // taabụ arụ ọrụ
  3. e . metụtaraTarget // taabụ gara aga
  4. })

Banyere Atụmatụ Ngwá Ọrụ

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

Budata faịlụ

Ihe atụ iji Atụmatụ Ngwá Ọrụ

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

Ọkpa ogologo ọkpa next level keffiyeh eleghị anya ị nụbeghị maka ha. Foto ụlọ afụ ọnụ raw denim akwụkwọ ozi vegan messenger akpa stumptown. Ugbo-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit American uwe nwere Terry Richardson vinyl chambray. Ogige ajị agba, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, anọ loko mcsweeney si sachaa vegan chambray. A really ironic artisan whatever keytar , scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.


Iji bootstrap-tooltip.js

Mepụta ngwa ngwa site na javascript:

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

Nhọrọ

Aha ụdị ndabara nkọwa
animation boolean eziokwu tinye mgbanwe css fade na ngwungwu ngwaọrụ
ntinye eriri | ọrụ 'n'elu' otu esi edobe ngwa ọrụ - top | ala | aka ekpe | nri
onye nhọpụta eriri ụgha Ọ bụrụ na enyere onye nhọpụta, a ga-ekenye ihe nrịbama ngwaọrụ na ebumnuche ndị akọwapụtara.
aha eriri | ọrụ '' Uru aha ndabara ma ọ bụrụ na mkpado 'aha' adịghị
ịkpalite eriri 'hover' otú Tooltip si akpalite - hover | lekwasịrị anya | akwụkwọ ntuziaka
igbu oge nọmba | ihe 0

igbu oge igosi na izobe ngwa ọrụ (ms) - anaghị emetụta ụdị mkpali aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { show: 500, hide: 100 }

Welie isi elu! Enwere ike ịkọwa nhọrọ maka ndụmọdụ ngwaọrụ n'otu n'otu site na iji njirimara data.

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

  1. <a href = "#" rel = "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.

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

.tooltip('zoo')

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

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

.tooltip('toggle')

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

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

Banyere popovers

Tinye obere ihe machie nke ọdịnaya, dị ka ndị dị na iPad, na ihe ọ bụla maka ozi nke abụọ nke ụlọ.

* Achọrọ ka etinyere ndụmọdụ ngwaọrụ

Budata faịlụ

Ọmụmaatụ hover popover

Chekwaa n'elu bọtịnụ iji kpalite popover.


Iji bootstrap-popover.js

Kwado popovers site na javascript:

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

Nhọrọ

Aha ụdị ndabara nkọwa
animation boolean eziokwu tinye mgbanwe css fade na ngwungwu ngwaọrụ
ntinye eriri | ọrụ 'ziri ezi' otu esi etinye popover - top | ala | aka ekpe | nri
onye nhọpụta eriri ụgha ọ bụrụ na enyere onye nhọpụta, a ga-ekenye ihe ndị ahọpụtara ngwaọrụ na ebumnuche ndị akọwapụtara
ịkpalite eriri 'hover' otú Tooltip si akpalite - hover | lekwasịrị anya | akwụkwọ ntuziaka
aha eriri | ọrụ '' Uru aha ndabara ma ọ bụrụ na àgwà 'aha' adịghị
ọdịnaya eriri | ọrụ '' uru ọdịnaya ndabara ma ọ bụrụ na njirimara 'data-content' adịghị
igbu oge nọmba | ihe 0

igbu oge igosi na izobe popover (ms) - anaghị etinye aka na ụdị mkpalite aka

Ọ bụrụ na ewepụtara nọmba, a na-etinye igbu oge na ma zoo/egosi

Nhazi ihe bụ:delay: { show: 500, hide: 100 }

Welie isi elu! Enwere ike ịkọwa nhọrọ maka popovers n'otu n'otu site na iji njirimara data.

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.

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

.popover('zoo')

Na-ezobe ihe nchacha mmapụta.

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

.popover('toggle')

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

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

Banyere ọkwa

Ngwa mgbakwunye njikere bụ obere klaasị maka ịgbakwunye ọrụ nso na ọkwa.

Budata

Ngosipụta ihe atụ

Ngwa mgbakwunye nke alerts na-arụ ọrụ na ozi ọbịbịa mgbe niile, ma gbochie ozi.

Guacamole dị nsọ! Kachasị mma ịlele onwe gị, ị naghị adị oke mma.

Oh snoo! Ị nwetara mperi!

Gbanwee nke a na nke ahụ wee nwaa ọzọ. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Mee ihe a Ma ọ bụ mee nke a


Iji bootstrap-alert.js

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

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

Akara akara

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

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

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

Ihe omume

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

Ihe omume Nkọwa
nso Ihe omume a na-agba ọkụ ozugbo closea na-akpọ usoro ihe atụ.
mechiri emechi A na-achụpụ ihe omume a mgbe emechiela njikere (ga-echere mgbanwe css ka ọ mezue).
  1. $ ( '#my-alert' ). kechie ( 'emechi' , ọrụ () {
  2. // mee ihe…
  3. })

Ihe gbasara

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

Budata faịlụ

Ihe atụ eji

Jiri ngwa mgbakwunye bọtịnụ maka steeti na ntụgharị.

Ọchịchị
Otu ngbanwe
Igbe nbanye
Redio

Iji bootstrap-button.js

Kwado bọtịnụ site na Javascript:

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

  1. <!-- Tinye data-toggle="button" iji mee ka ịgbanye n'otu bọtịnụ rụọ ọrụ -->
  2. <bọtịnụ klas = "btn" data-toggle = "bọtịnụ" > Otu ngbanwe </button>
  3.  
  4. <!-- Tinye data-toggle="buttons-checkbox" maka ụdị igbe nbanye na btn-group -->
  5. <div class = "btn-group" data-toggle = "bọtịnụ-checkbox" >
  6. <bọtịnụ klas = "btn" > Aka ekpe </button>
  7. <bọtịnụ klas = "btn" > Nke etiti </button>
  8. <bọtịnụ klas = "btn" > Right </button>
  9. </div>
  10.  
  11. <!-- Tinye data-toggle="buttons-radio" maka ịke redio na btn-group -->
  12. <div class = "btn-group" data-toggle = "bọtịnụ-redio" >
  13. <bọtịnụ klas = "btn" > Aka ekpe </button>
  14. <bọtịnụ klas = "btn" > Nke etiti </button>
  15. <bọtịnụ klas = "btn" > Right </button>
  16. </div>

Ụzọ

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

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

Welie isi elu! Ị nwere ike mee ka bọtịnụ gbanwee akpaaka site na iji data-togglenjirimara.
  1. <bọtịnụ klas = "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.

  1. <button class = "btn" data-loading-text = "na-ebunye ihe..." > ... </button>
Welie isi elu! Firefox na-aga n'ihu na ọnọdụ nkwarụ n'ofe ibu ibe . Ihe ngwọta maka nke a bụ iji autocomplete="off".

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

  1. <button klas = "btn" data-complete-text = "emechaala!" > ... </bọtịnụ>
  2. <edemede>
  3. $ ( '.btn' ). bọtịnụ ( 'zuru ezu' )
  4. </script>

Ihe gbasara

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

Budata faịlụ

* Achọrọ ka etinyere ngwa mgbakwunye Transitions.

Ihe atụ accordion

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

Anim pariatur cliche reprehenderit, onye m eiusmod high life accusamus Terry Richardson na squid. 3 wolf moon officia aute, na-abụghị cupidatat skateboard dolor brunch. Ụgbọala nri quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua tinye nnụnụ na ya squid otu-si kọfị nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft biya farm-to-table, raw denim aesthetic synth nesciunt eleghị anya ị nụbeghị banyere ha ebubo na-adigide VHS.
Anim pariatur cliche reprehenderit, onye m eiusmod high life accusamus Terry Richardson na squid. 3 wolf moon officia aute, na-abụghị cupidatat skateboard dolor brunch. Ụgbọala nri quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua tinye nnụnụ na ya squid otu-si kọfị nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft biya farm-to-table, raw denim aesthetic synth nesciunt eleghị anya ị nụbeghị banyere ha ebubo na-adigide VHS.
Anim pariatur cliche reprehenderit, onye m eiusmod high life accusamus Terry Richardson na squid. 3 wolf moon officia aute, na-abụghị cupidatat skateboard dolor brunch. Ụgbọala nri quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua tinye nnụnụ na ya squid otu-si kọfị nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft biya farm-to-table, raw denim aesthetic synth nesciunt eleghị anya ị nụbeghị banyere ha ebubo na-adigide VHS.

Iji bootstrap-collapse.js

Kwado site na javascript:

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

Nhọrọ

Aha ụdị ndabara nkọwa
nne na nna onye nhọpụta ụgha Ọ bụrụ na ahọpụtara, a ga-emechi ihe niile ga-adakpọ n'okpuru nne na nna akọwapụtara mgbe egosiri ihe a nwere ike ịdaba. (yiri omume accordion omenala)
tụgharịa boolean eziokwu Na-atụgharị ihe nwere ike ịdaba na oku

Akara akara

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.

  1. <button class = "btn btn-danger" data-toggle = "dalata" data-target = "#demo" >
  2. mfe ndakpọ
  3. </bọtịnụ>
  4.  
  5. <div id = "demo" klaasị = "daba n'ime" > </div>
Welie isi elu! 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ụ.

Ụzọ

.dakpọ (nhọrọ)

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

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

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

Ihe omume Nkọwa
gosi Ihe omume a na-agba ọkụ ozugbo showa na-akpọ usoro ihe atụ.
egosiri A na-agbanyụ mmemme a mgbe onye ọrụ mere ka ihe ndakpọ pụtara (ga-echere ntụgharị css ka agwụchaa).
zoo A na-agbapụ ihe omume a ozugbo mgbe hidea na-akpọ usoro ahụ.
zoro ezo A na-agbanyụ mmemme a mgbe ezonarila ihe ndakpọ n'aka onye ọrụ (ga-echere ntụgharị css ka emechaa).
  1. $ ( '#myCollapsible' ). na ( 'zoro ezo' , ọrụ () {
  2. // mee ihe…
  3. })

Ihe gbasara

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

Budata faịlụ

Ọmụmaatụ

Malite pịnye n'ọhịa dị n'okpuru iji gosi nsonaazụ typehead.


Iji bootstrap-typeahead.js

Kpọọ typeahead site na javascript:

  1. $ ( '.typehead' ). typeahead ()

Nhọrọ

Aha ụdị ndabara nkọwa
isi iyi n'usoro [] Isi mmalite data iji jụọ ajụjụ megide.
ihe nọmba 8 Ọnụ ọgụgụ kacha elu nke ihe ga-egosipụta na ndọpụta.
onye nkwutọ ọrụ ikpe enweghị mmetụta Usoro eji achọpụta ma ajụjụ ọ dabara otu ihe. Nabata otu arụmụka, itemnke a ga-anwale ajụjụ a. Nweta ajụjụ ugbu a na this.query. Weghachite boolean truema ọ bụrụ na ajụjụ bụ egwuregwu.
nhazi ọrụ kpomkwem egwuregwu,
ikpe nwere mmetụta,
enweghị mmetụta
Usoro eji hazie nsonaazụ akpaaka. Nabata otu arụmụka itemsma nwee oke nke ihe atụ typeahead. Tụtụ aka n'ajụjụ dị ugbu a na this.query.
highlighter ọrụ na-akọwapụta egwuregwu ndabara niile Usoro eji eme ka ọ pụta ìhè nsonaazụ akpaaka. Nabata otu arụmụka itemma nwee oke nke ihe atụ typeahead. Kwesịrị ịlaghachi html.

Akara akara

Tinye njirimara data ka ịdebanye aha ihe nwere ọrụ typeahead.

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

Ụzọ

.typehead(nhọrọ)

Na-ebute ntinye n'isi n'isi.