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.

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

Iji bootstrap-modal

Kpọọ modal site na javascript:

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

Nhọrọ

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.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Usoro mmalite </a>    

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

Ụzọ

.modal(nhọrọ)

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

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

.modal('ntụgharị')

Iji aka na-atụgharị modal.

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

.modal('show')

Iji aka na-emepe modal.

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

.modal('zoo')

Iji aka na-ezo modal.

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

Ihe omume

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

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

Banyere dropdowns

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

Ihe atụ

Pịa na njikọ nke dropdown navbar na ọgwụ ndị dị n'okpuru iji nwalee ọdịda.

• Njikọ oge niile
• Wedaa
  • Action
  • Another action
  • Something else here
  • Separated link
• Mbudata 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Mbudata 3
  • Action
  • Another action
  • Something else here
  • Separated link

Iji bootstrap-dropdown.js

Kpọọ dropdowns site na javascript:

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

Akara akara

Ka ịgbakwunye ọrụ ndọda ngwa ngwa na mmewere ọ bụla tinye naanị data-toggle="dropdown"na ntinye bootstrap ọ bụla dị mma ga-arụ ọrụ ozugbo.

<ul klas = "nav nav-pills" > 
  <li class = "ọrụ" ><a href = "#" > Njikọ oge niile </a></li>  
  <li klas = "mkpọda" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dobe" href = "#menu1" >   
      Wedaa
      <b klas = "nlekọta" </b> 
    </a>
    <ul klas = "ndropdown-menu" > 
      <li><a href = "#" > Omume </a></li> 
      <li><a href = "#" > Omume ọzọ </a></li> 
      <li><a href = "#" > Ihe ọzọ ebe a </a></li> 
      <li klas = "onye nkesa" </li> 
      <li><a href = "#" > Njikọ ndị kewapụrụ </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul klas = "nav nav-pills" > 
  <li klas = "mkpọda" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "ụzọ/to/peeji.html" >    
      Wedaa
      <b klas = "nlekọta" </b> 
    </a>
    <ul klas = "ndropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Ụzọ

$().dropdown()

Api mmemme maka ime ka menus rụọ ọrụ maka ihe navbar enyere ma ọ bụ igodo taabụ.

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

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!

Iji bootstrap-scrollspy.js

Kpọọ scrollspy site na javascript:

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

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

Ụzọ

.scrollspy('refresh')

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

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

Nhọrọ

Ihe omume

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

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

• Ụlọ
• Profaịlụ
• Wedaa
  • @fat
  • @mdo

Iji bootstrap-tab.js

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

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

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

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

Akara akara

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

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

Ụzọ

$()tab

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

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

Ihe omume

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

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.

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

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

Iji bootstrap-tooltip.js

Mepụta ngwa ngwa site na javascript:

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

Nhọrọ

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

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

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

.tooltip('zoo')

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

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

.tooltip('toggle')

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

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

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ụ

Ọmụmaatụ hover popover

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

Iji bootstrap-popover.js

Kwado popovers site na javascript:

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

Nhọrọ

Akara akara

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

Ụzọ

$().popover(nhọrọ)

Na-ebute popovers maka mkpokọta mmewere.

.popover('show')

Na-ekpughe ihe ngosi popover.

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

.popover('zoo')

Na-ezobe ihe nchacha mmapụta.

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

.popover('toggle')

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

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

Banyere ọkwa

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

Ngosipụta ihe atụ

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

Iji bootstrap-alert.js

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

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

Akara akara

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

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

Ụzọ

$().ọmụma()

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

.ọmụma (' nso')

Na-emechi mkpu.

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

Ihe omume

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

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

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

Ihe atụ eji

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

Iji bootstrap-button.js

Kwado bọtịnụ site na Javascript:

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

Akara akara

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

<!-- Tinye data-toggle="button" iji mee ka ịgbanye n'otu bọtịnụ rụọ ọrụ -->
<bọtịnụ klas = "btn" data-toggle = "bọtịnụ" > Otu ngbanwe </button>  
 
<!-- Tinye data-toggle="buttons-checkbox" maka ụdị igbe nbanye na btn-group -->
<div class = "btn-group" data-toggle = "bọtịnụ-checkbox" >  
  <bọtịnụ klas = "btn" > Aka ekpe </button> 
  <bọtịnụ klas = "btn" > Nke etiti </button> 
  <bọtịnụ klas = "btn" > Right </button> 
</div>
 
<!-- Tinye data-toggle="buttons-radio" maka ịke redio na btn-group -->
<div class = "btn-group" data-toggle = "bọtịnụ-redio" >  
  <bọtịnụ klas = "btn" > Aka ekpe </button> 
  <bọtịnụ klas = "btn" > Nke etiti </button> 
  <bọtịnụ klas = "btn" > Right </button> 
</div>

Ụzọ

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

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

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

<button class = "btn" data-loading-text = "na-ebunye ihe..." > ... </button>   

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

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

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

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

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

Ihe gbasara

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

* Achọrọ ka etinyere ngwa mgbakwunye Transitions.

Ihe atụ accordion

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

Iji bootstrap-collapse.js

Kwado site na javascript:

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

Nhọrọ

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.

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

Ụzọ

.dakpọ (nhọrọ)

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

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

.dakpọ ('toggle')

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

.dakpọ ('show')

Na-egosi mmewere nwere ike ịdaba.

daa('zoo')

Na-ezobe mmewere nwere ike ịdaba.

Ihe omume

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

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

Ihe gbasara

Ngwa mgbakwunye jeneriki maka ịgba ígwè site na ihe. Añuri-aga-gburugburu.

Ihe atụ carousel

Lelee ihe ngosi mmịfe n'okpuru.

Labelụ Thumbnail mbụ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Labelụ Thumbnail nke abụọ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Labelụ Thumbnail nke atọ

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Achọpụtaghị m porta gravida na eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

‹ ›

Iji bootstrap-carousel.js

Kpọọ site na javascript:

$ ( '.carousel' ). carousel ()

Nhọrọ

Akara akara

A na-eji njirimara data maka njikwa gara aga na nke na-esote. Lelee akara ngosi ihe atụ n'okpuru.

<div id = "myCarousel" klas = "carousel slide" >  
  <!-- Ihe carousel -->
  <div klas = "carousel-inner" > 
    <div class = "ihe na-arụ ọrụ" > … </div> 
    <div class = "ihe" > … </div> 
    <div class = "ihe" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "na-esote" > & rsaquo; </a>   
</div>

Ụzọ

.carousel(nhọrọ)

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

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

.carousel('cycle')

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

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

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

.carousel(nọmba)

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

.carousel('bu')

Ọkpụkpụ gaa na ihe gara aga.

.carousel('na-esote')

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

Ihe omume

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

Ihe gbasara

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

Ọmụmaatụ

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

Iji bootstrap-typeahead.js

Kpọọ typeahead site na javascript:

$ ( '.typehead' ). typeahead ()

Nhọrọ

Akara akara

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

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

Ụzọ

.typehead(nhọrọ)

Na-ebute ntinye n'isi n'isi.