Der barê modalan de

Pêvekek rêkûpêk, lê maqûl, pêveka modal a kevneşopî ya javascript-ê bi tenê fonksiyona hindiktirîn hewce û pêşnumayên hişmend digire.

Mînaka statîk

Li jêr modalek statîkî hatî çêkirin heye.

Demo zindî

Bi tikandina bişkoka li jêr modalek bi javascriptê vebikin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

Bikaranîna bootstrap-modal

Bi javascriptê ve modalê telefon bikin:

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

Vebijêrk

Markup

Hûn dikarin modalên li ser rûpela xwe bi hêsanî çalak bikin bêyî ku hûn yek rêzek javascriptê binivîsin. Tenê li data-toggle="modal"ser hêmanek kontrolkerek bi data-target="#foo"an href="#foo"ku bi nasnameya elementek modal re têkildar e saz bikin, û gava ku were klîk kirin, ew ê modala we bide destpêkirin.

Di heman demê de, ji bo ku vebijarkan li mînaka xweya modal zêde bikin, tenê wan wekî taybetmendiyên daneya zêde li ser hêmana kontrolê an jî nîşana modal bixwe têxin nav xwe.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Sernivîsa modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Bedenek xweş… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Girtin </a>   
    <a href = "#" class = "btn btn-primary" > Guhertin tomar bike </a>  
  </div>
</div>

Methods

.modal(vebijark)

Naveroka we wekî modal çalak dike. Vebijarkek vebijarkî qebûl objectdike.

$ ( '#myModal' ). modal ({
  klavye : derewîn 
})

.modal('veguhertin')

Modalek bi destan diguhezîne.

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

.modal('nîşan bide')

Bi destan modalek vedike.

$ ( '#myModal' ). modal ( 'nîşandan' )

.modal('veşêre')

Bi destan modalek vedişêre.

$ ( '#myModal' ). modal ( 'veşêre' )

Events

Dersa modal a Bootstrap çend bûyeran ji bo girêdana fonksiyonên modal eşkere dike.

$ ( '#myModal' ). on ( 'veşartî' , fonksiyona () {   
  // tiştekî bike…
})

Der barê dakêşan de

Bi vê pêveka sade menuyên dakêşanê li Bootstrap-ê hema hema li her tiştî zêde bikin. Bootstrap di navbar, tablo û heban de piştgirîya menuya dakêşanê ya tevahî vedigire.

Examples

Li ser zencîreyên navika daketî yên di navbar û hebên jêrîn de bikirtînin da ku dakêşan ceribandin.

• Girêdana bi rêkûpêk
• Dropdown
  • Action
  • Another action
  • Something else here
  • Separated link
• Daxistin 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Daxistina 3
  • Action
  • Another action
  • Something else here
  • Separated link

Bikaranîna bootstrap-dropdown.js

Bi navgîniya javascript-ê re bang bikin:

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

Markup

Ji bo ku zû fonksiyona dakêşanê li her hêmanekê zêde bike, tenê lê zêde bike data-toggle="dropdown"û her dakêşana bootstrap-a derbasdar bixweber were çalak kirin.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Girêdana asayî </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Çalakî </a></li> 
      <li><a href = "#" > Çalakiyeke din </a></li> 
      <li><a href = "#" > Tiştekî din li vir </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Girêdana veqetandî </a></li> 
    </ul>
  </li>
  ...
</ul>

Ji bo ku URLan saxlem bihêlin, li data-targetşûna href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "rê/to/page.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Methods

$().dropdown()

Api bernameyek ji bo çalakkirina pêşekên ji bo navbarek diyarkirî an navîgasyonek tabelê.

Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye.

Mînak navbar bi scrollspy

Li qada jêrîn bigerin û nûvekirina navîgasyonê temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin. Try it!

Bikaranîna bootstrap-scrollspy.js

Bi javascriptê bangî scrollspy bikin:

$ ( '#navbar' ). scrollspy ()

Markup

Ji bo ku bi hêsanî behreya scrollspy li navîgasyona xweya jorîn zêde data-spy="scroll"bikin, tenê hêmana ku hûn dixwazin li ser sîxuriyê bikin zêde bikin (bi gelemperî ev dê laş be).

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

Methods

.scrollspy('tezekirin')

Dema ku scrollspy digel lê zêdekirin an rakirina hêmanan ji DOM-ê re bikar bînin, hûn ê hewce bikin ku rêbaza nûvekirinê ya weha bang bikin:

$ ( '[data-spy="scroll"]' ). her ( fonksîyon () {  
  var $spy = $ ( ev ). scrollspy ( 'tezekirin' )
});

Vebijêrk

Events

Ev pêvek ji bo veguheztina naverokê ya herêmî fonksiyonên tablo û hebên bilez, dînamîkî zêde dike.

Tabloyên nimûne

Li ser tabloyên jêrîn bikirtînin da ku di navbera pencereyên veşartî de, tewra bi navgîniya pêşekên dakêşanê veguhezînin.

• Xane
• Tengal
• Dropdown
  • @fat
  • @mdo

Bikaranîna bootstrap-tab.js

Bi javascriptê tabloyên tabloyê çalak bikin (pêdivî ye ku her tablo bi rengek kesane were çalak kirin):

$ ( '#myTab a' ). bitikîne ( fonksiyona ( e ) {  
  e . preventDefault ();
  $ ( ev ). tab ( 'nîşan bide' );
})

Hûn dikarin tabloyên kesane bi çend awayan çalak bikin:

$ ( '#myTab a[href="#profile"]' ). tab ( 'nîşan bide' ); // Bi navê tabê hilbijêre 
$ ( '#myTab a:first' ). tab ( 'nîşan bide' ); // Tabloya yekem hilbijêrin 
$ ( '#myTab a:last' ). tab ( 'nîşan bide' ); // Tabloya paşîn hilbijêrin 
$ ( '#myTab li:eq(2) a' ). tab ( 'nîşan bide' ); // Tabloya sêyemîn hilbijêrin (0-indekskirî) 

Markup

Hûn dikarin navîgasyonek tabloyek an pileyek bêyî nivîsandina javascriptê bi tenê diyar kirin data-toggle="tab"an data-toggle="pill"li ser hêmanek çalak bikin. Zêdekirina navû nav-tabsçînan li tabê uldê şêwaza tabloya bootstrap bicîh bîne.

<ul class = "nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Mal </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profîl </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Peyam </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Mîhengan </a></li>  
</ul>

Methods

$().tab

Elementek tabê û konteynir naverokê çalak dike. Tabê pêdivî ye ku di DOM-ê de girêkek konteynerê data-targetan jî armancek hebe.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "çalak" ><a href = "#home" > Mal </a></li>  
  <li><a href = "#profile" > Profîl </a></li> 
  <li><a href = "#messages" > Peyam </a></li> 
  <li><a href = "#settings" > Mîhengan </a></li> 
</ul>
 
<div class = "tab-naveroka" > 
  <div class = "tab-pane çalak" id = "mal" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'nîşan bide' );
  })
</script>

Events

$ ( 'a[data-toggle="tab"]' ). li ser ( 'nîşandan' , fonksiyona ( e ) {   
  e . hedef // tabloya çalakkirî
  e . relatedTarget // tabloya berê
})

Der barê Tooltips

Ji pêveka hêja ya jQuery.tipsy ku ji hêla Jason Frame ve hatî nivîsandin ve hatî îlhama kirin; Tooltips guhertoyek nûvekirî ye, ku xwe dispêre wêneyan, css3 ji bo anîmasyon, û taybetmendiyên daneyan ji bo hilanîna sernavên herêmî bikar tîne.

Mînak bikaranîna Tooltips

Li ser zencîreyên jêrîn bihêlin ku hûn serişteyên amûran bibînin:

Bikaranîna bootstrap-tooltip.js

Bi javascriptê şîreta amûrê bişopînin:

$ ( '#mînak' ). tooltip ( vebijark )

Vebijêrk

Markup

Ji ber sedemên performansê, Tooltip û Popover data-apis têne hilbijartin. Heke hûn dixwazin wan bikar bînin tenê vebijarkek hilbijêr diyar bikin.

<a href = "#" rel = "tooltip" title = "first tooltip" > li ser min bihêle </a>   

Methods

$().tooltip(vebijark)

Pêşkêşkarek amûrek bi berhevokek elementê ve girêdide.

.tooltip('nîşan bide')

Tîpa amûrek hêmanek eşkere dike.

$ ( '#element' ). tooltip ( 'nîşan bide' )

.tooltip('veşêre')

Tîpa amûrekê vedişêre.

$ ( '#element' ). tooltip ( 'veşêre' )

.tooltip('veguhertin')

Destûra amûrek hêmanek vedike.

$ ( '#element' ). tooltip ( 'veguhertin' )

Der barê popovers

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, naverokên piçûk zêde bikin.

* Pêdivî ye ku Tooltip were nav kirin

Mînak hover popover

Li ser bişkokê bizivirin da ku popoverê vekin.

Bikaranîna bootstrap-popover.js

Bi javascript popovers çalak bikin:

$ ( '#mînak' ). popover ( vebijark )

Vebijêrk

Markup

Ji ber sedemên performansê, Tooltip û Popover data-apis têne hilbijartin. Heke hûn dixwazin wan bikar bînin tenê vebijarkek hilbijêr diyar bikin.

Methods

$().popover(vebijark)

Ji bo berhevokek hêmanan popoveran dide destpêkirin.

.popover('show')

Elementek popover eşkere dike.

$ ( '#element' ). popover ( 'nîşandan' )

.popover('veşêre')

Hêmanek popover vedişêre.

$ ( '#element' ). popover ( 'veşêre' )

.popover('toggle')

Hêmanek popover vedike.

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

Der barê alerts

Pêveka hişyariyê çînek piçûk e ku ji bo zêdekirina fonksiyonên nêzîk li hişyariyan.

Mînak alerts

Pêveka hişyariyê li ser peyamên hişyariya birêkûpêk dixebite, û peyaman asteng dike.

Bikaranîna bootstrap-alert.js

Betalkirina hişyariyek bi javascript çalak bike:

$ ( ".alert" ). hişyar ()

Markup

Tenê data-dismiss="alert"li bişkoka xweya nêzîk zêde bikin da ku bixweber fonksiyonek girtina hişyariyê bidin.

<a class = "close" data-dismiss = "hişyar" href = "#" > × </a>   

Methods

$().alert()

Hemî hişyariyan bi fonksiyonek nêzîk dipêçe. Ji bo ku gava girtî hişyariyên we zindî bibin, pê ewle bin ku ew jixwe .fadeû .inpola li wan hatine sepandin.

.alert('nêzîkî')

Hişyariyek digire.

$ ( ".alert" ). hişyar ( 'nêzîkî' )

Events

Dersa hişyariyê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hişyariyê eşkere dike.

$ ( '#my-alert' ). bind ( 'girtî' , fonksiyona () {   
  // tiştekî bike…
})

Ji dor

Zêdetir bi bişkokan bikin. Rewşên bişkojka kontrol bikin an jî ji bo hêmanên zêdetir ên mîna darikên amûran komên bişkokan biafirînin.

Nimûne bikar tîne

Pêveka bişkokan ji bo dewlet û guheztinê bikar bînin.

Bikaranîna bootstrap-button.js

Bişkokên bi Javascript çalak bikin:

$ ( '.nav-tabs' ). bişkojka ()

Markup

Taybetmendiyên daneyê ji pêveka bişkojê re yekpare ne. Ji bo cûrbecûr celebên nîşankirinê koda nimûneya jêrîn binihêrin.

<!-- Data-toggle="button" lê zêde bike da ku guheztina li ser bişkokek yekane çalak bike -->
<button class = "btn" data-toggle = "button" > Veguheztina Yekane </button>  
 
<!-- Data-toggle="buttons-checkbox" lê zêde bike ji bo guheztina şêwaza qutiyê li ser btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Navîn </button> 
  <button class = "btn" > Rast </button> 
</div>
 
<!-- Data-toggle="buttons-radio" lê zêde bike ji bo guheztina şêwaza radyoyê li ser btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Çep </button> 
  <button class = "btn" > Navîn </button> 
  <button class = "btn" > Rast </button> 
</div>

Methods

$().button('veguhertin')

Rewşa pushê vedike. Bişkojk xuya dike ku ew çalak bûye.

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

$().button('barkirin')

Rewşa bişkojkê ji bo barkirinê destnîşan dike - bişkojka neçalak dike û nivîsê bi nivîsa barkirinê re diguherîne. Divê nivîsa barkirinê li ser hêmana bişkojê bi karanîna taybetmendiya daneyê were destnîşankirin data-loading-text.

<button class = "btn" data-loading-text = "barkirina tiştan..." > ... </button>   

$().button('reset')

Rewşa bişkojkê ji nû ve vedike - nivîsê bi nivîsa orîjînal diguhezîne.

$().button(string)

Rewşa bişkojkê ji nû ve vedike - nivîsê li her rewşa nivîsê ya diyarkirî diguhezîne.

<button class = "btn" data-complete-text = "qediya!" > ... </button>   
<script>
  $ ( '.btn' ). bişkojka ( 'temam' )
</script>

Ji dor

Ji bo pêkhateyên hilweşandî yên mîna akordeyon û navîgasyon şêwazên bingehîn û piştgirîya maqûl bistînin.

* Pêdivî ye ku pêveka Transitions were nav kirin.

Mînak accordion

Bi karanîna pêveka hilweşandinê, me widgetek şêwaza akordonê ya hêsan çêkir:

Bikaranîna bootstrap-collapse.js

Bi javascript çalak bike:

$ ( ".collapse" ). hilweşîn ()

Vebijêrk

Markup

Tenê data-toggle="collapse"û data-targethêmanek lê zêde bikin da ku bixweber kontrola hêmanek hilweşandî destnîşan bikin. Taybetmendî data-targethilbijêrek css-ê qebûl dike ku hilweşînê li ser bicîh bike. Bawer bikin ku polê collapseli hêmana hilweşandî zêde bikin. Heke hûn dixwazin ku ew bi xweber vebe, çîna pêvek zêde bikin in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  sade hilweşîner
</button>
 
<div id = "demo" class = "hilweşîn" > … </div>  

Methods

.collapse(vebijark)

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijarkek vebijarkî qebûl objectdike.

$ ( '#myCollapsible' ). hilweşîn ({
  guheztin : derewîn 
})

.collapse('veguhertin')

Hêmanek dagirtî ji bo xuyangkirin an veşartinê vedigire.

.collapse('nîşan bide')

Elementeke davekirî nîşan dide.

.collapse('veşêre')

Hêmanek hilweşandî vedişêre.

Events

Dersa hilweşînê ya Bootstrap çend bûyeran ji bo girêdana fonksiyona hilweşînê eşkere dike.

$ ( '#myCollapsible' ). on ( 'veşartî' , fonksiyona () {   
  // tiştekî bike…
})

Ji dor

Pêvekek gelemperî ji bo bisiklêtan di nav hêmanan de. Xemgîniyek.

Mînak carousel

Slideshowa jêrîn temaşe bikin.

Labelê Pêşîn Thumbnail

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.

Labelê Thumbnail Duyemîn

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.

Labelê Thumbnail Sêyemîn

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.

‹ ›

Bikaranîna bootstrap-carousel.js

Bi javascript bang bikin:

$ ( '.carousel' ). carousel ()

Vebijêrk

Markup

Taybetmendiyên daneyê ji bo kontrolên berê û yên din têne bikar anîn. Nîşana nimûneya jêrîn binêrin.

<div id = "myCarousel" class = "slide carousel" >  
  <!-- Tiştên carousel -->
  <div class = "carousel-inner" > 
    <div class = "maddeya çalak" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Methods

.carousel(vebijark)

Karûselê bi vebijarkek vebijarkî objectdest pê dike û di nav tiştan de bisiklêtê dest pê dike.

$ ( '.carousel' ). carousel ({
  navber : 2000 
})

.carousel('cycle')

Ji çepê ber bi rastê ve di nav tiştên karûselê re digere.

.carousel('pause')

Karûselê ji bisiklêtan di nav tiştan re rawestîne.

.carousel(hejmar)

Karûselê di çarçoveyek taybetî de (0 bingeh, dişibihe rêzeyekê) digerîne.

.carousel('berî')

Dûv re berbi babeta berê ve diçe.

.carousel('next')

Dûv re ber bi babeta din ve diçe.

Events

Dersa karûselê ya Bootstrap du bûyeran ji bo girêdana fonksiyona karûselê eşkere dike.

Ji dor

Pêvekek bingehîn, bi hêsanî dirêjkirî ji bo afirandina zû tîpên spehî yên bi her têketina nivîsê.

Mînak

Di qada jêrîn de dest bi nivîsandinê bikin da ku encamên tîpa pêşîn nîşan bidin.

Bikaranîna bootstrap-typeahead.js

Bi rêya javascriptê bangî tîpan bikin:

$ ( '.typeahead' ). tîpa pêş ()

Vebijêrk

Markup

Taybetmendiyên daneyê lê zêde bikin da ku hêmanek bi fonksiyona tîpa pêşîn tomar bikin.

<input type = "text" data- provide = "typeahead" >  

Methods

.typeahead(vebijark)

Inputek bi tîpek pêşîn dest pê dike.