Kesane an berhevkirî

Pêvek dikarin bi rengek kesane bêne nav kirin (her çend hin pêwendiyan hewce ne), an jî bi yekcarî. Hem bootstrap.js û hem jî bootstrap.min.js hemî pêvekan di pelek yekane de dihewîne.

Taybetmendiyên daneyê

Hûn dikarin hemî pêvekên Bootstrap tenê bi navgîniya API-ya nîşankirinê bêyî nivîsandina yek rêzek JavaScript-ê bikar bînin. Ev API-ya yekem a Bootstrap-ê ye û dema ku pêvekek bikar tîne divê bala weya yekem be.

Wusa got, di hin rewşan de dibe ku were xwestin ku vê fonksiyonê were qut kirin. Ji ber vê yekê, em di heman demê de şiyana neçalakkirina API-a taybetmendiya daneyê peyda dikin bi veqetandina hemî bûyerên li ser navên laş ên bi `'data-api'` veqetandî. Ev bi vî rengî xuya dike:

$ ( 'laş' ). off ( '.data-api' )

Wekî din, ji bo armanckirina pêvekek taybetî, tenê navê pêvekê wekî navek bi navgîniya daneya-api re bi vî rengî têxin nav:

$('body').off('.alert.data-api')( 'laş' ). off ( '.alert.data-api' )

API bername

Em her weha bawer dikin ku hûn dikarin hemî pêvekên Bootstrap bi tenê bi navgîniya JavaScript API-ê bikar bînin. Hemî API-yên gelemperî rêbazên yekane, zincîrbar in, û berhevoka ku li ser hatî kirin vedigerînin.

$(".btn.danger").button("toggle").addClass("qelew")( ".btn.xetere" ). bişkojka ( "veguhertin" ). addClass ( "qelew" )

Pêdivî ye ku hemî rêbaz hêmanek vebijarkek vebijarkî, rêzek ku rêbazek taybetî armanc dike, an tiştek (ya ku pêvekek bi tevgerek xwerû dest pê dike) qebûl bikin:

$("#myModal").modal() // bi pêşnûmayan dest pê kir( "#myModal" ). modal () // bi standardan dest pê kirin                       
$ ( "#myModal" ). modal ({ Klavyeya : derewîn }) // bêyî klavyeyê dest pê kirin     
$ ( "#myModal" ). modal ( 'nîşan bide' ) // dest pê dike û yekser nîşan dide                

Her pêvek di heman demê de çêkerê xwe yê xav li ser taybetmendiyek `Constructor` eşkere dike: $.fn.popover.Constructor. Heke hûn dixwazin mînakek pêvekek taybetî bistînin, wê rasterast ji hêmanek bistînin: $('[rel=popover]').data('popover').

Nakokî tune

Carinan hewce ye ku pêvekên Bootstrap bi çarçoveyên UI yên din re bikar bînin. Di van şertan de, car caran dibe ku pevçûnên navan çêbibin. Ger ev diqewime, hûn dikarin gazî .noConflictpêveka ku hûn dixwazin nirxa wê vegerînin bikin.

var bootstrapButton = $.fn.button.noConflict() // $.fn.button vegerîne nirxa berêbootstrapButton = $ . fn . button . noConflict () // $.fn.button vegerîne nirxa ku berê hatî destnîşan kirin 
$ . fn . bootstrapBtn = bootstrapButton             // $().bootstrapBtn fonksiyona bootstrap bide

Events

Bootstrap ji bo piraniya çalakiyên yekta yên pêvekê bûyerên xwerû peyda dike. Bi gelemperî, ev bi rengek nebinavkirî û dema borî têne - li wir showdi destpêka bûyerekê de nefsbiçûk (mînak. ) tê derxistin, û forma paşgira wê (mînak. shown) li ser temamkirina kiryarekê tê teşhîr kirin.

Hemî bûyerên bêdawî fonksiyona preventDefault peyda dikin. Ev şiyana rawestandina pêkanîna çalakiyek berî ku ew dest pê bike peyda dike.

$('#myModal').on('nîşan bide', fonksiyona (e) {( '#myModal' ). on ( 'show' , function ( e ) {   
    heke (! data ) vegere e . preventDefault () // nîşandana modalê disekine   
})

Der barê veguherînan de

Ji bo bandorên veguheztinê yên hêsan, bootstrap-transition.js carekê li gel pelên din ên JS-ê têxin nav xwe. Heke hûn bootstrap.js -a berhevkirî (an jî kêmkirî) bikar tînin , ne hewce ye ku vê yekê têxin nav xwe - ew jixwe li wir e.

Rewşan bikar bînin

Çend mînakên pêveka veguherînê:

• Di modalan de diherikin an vedimirin
• Hilweşîna tabloyan
• Hişyariyên wendakirin
• Paceyên karûselê yên diherikin

Examples

Modal rêkûpêk in, lê maqûl in, diyalogê bi fonksiyonên herî hindik ên hewce û pêşnumayên biaqil dişoxilîne.

Mînaka statîk

Modalek çêkirî ya bi sernav, laş û komek çalakiyan di pêlavê de.

<div class="modal hide fade"> class = "modal hide fade" >
  <div class = "modal-header" > 
    <button type = "button" class = "nêzîkî" data-dismiss = "modal" aria-hidden = "rast" > × </button>    
    <h3> Sernivîsa modal </h3>
  </div>
  <div class = "modal-body" > 
    <p> Bedenek xweş… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Girtin </a>  
    <a href = "#" class = "btn btn-primary" > Guhertin tomar bike </a>  
  </div>
</div>

Demo zindî

Modalek bi JavaScript-ê ve bi tikandina bişkoja jêrîn veguhezînin. Ew ê ji jorê rûpelê ve biçe xwarê û têkeve hundur.

<!-- Bişkojka ku modal bike -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Modala demoyê bide destpêkirin </a>    
<!-- Modal -->
<div id = "myModal" class = "modal veşêre fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "rast" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Sernivîsa modal </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Bedenek xweş… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Girtin </button>   
    <button class = "btn btn-primary" > Guhertin tomar bike </button> 
  </div>
</div>

Bikaranîna

Bi taybetmendiyên daneyê

Bêyî nivîsandina JavaScriptê modalek çalak bikin. Li data-toggle="modal"ser hêmanek kontrolker, mîna bişkokek, li gel data-target="#foo"an an href="#foo"ku modalek taybetî ji bo guheztinê armanc bikin.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Destpêkirina modalê </button>   

Bi rêya JavaScript

myModalBi yek rêzek JavaScript re modalek bi id re bang bikin :

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

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-backdrop="".

<a data-toggle="modal" href="remote.html" data-target="#modal">click me</a>

Methods

.modal(vebijark)

Naveroka we wekî modal çalak dike. Vebijêrkek 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…
})

Examples

Bi vê pêveka sade, di nav de navbar, tab, û heban, pêşekên dakêşanê li hema hema her tiştî zêde bikin.

Di navbarekê de

Di nav tabloyan de

Bikaranîna

Bi taybetmendiyên daneyê

Ji data-toggle="dropdown"bo guheztina peldankekê li lînkek an bişkokek zêde bikin.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown -toggle </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

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

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Dropdown
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Bi rêya JavaScript

Bi navgîniya JavaScript-ê bangî dakêşan bikin:

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

Vebijêrk

Netû

Methods

$().dropdown('toggle')

Api bernameyek ji bo guheztina menuyan ji bo navbarek diyarkirî an navîgasyonek tabelê.

Mînak di navbarê de

Pêveka ScrollSpy ji bo nûvekirina bixweber armancên nav li ser bingeha pozîsyona gerokê ye. Li qada li jêr navbarê bigerin û li guhertina çîna çalak temaşe bikin. Dê jêr-tiştên daketî jî werin ronî kirin.

Bikaranîna

Bi taybetmendiyên daneyê

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 lê zêde bikin (bi gelemperî ev dê laş be) û data-target=".navbar"hilbijêrin ka kîjan navî bikar bîne. Hûn ê bixwazin ku scrollspy bi hêmanek bikar bînin .nav.

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

Bi rêya JavaScript

Bi navgîniya JavaScriptê bangî scrollspy bikin:

$ ( '#navbar' ). scrollspy ()

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 ( 'nûkirina' )
});

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset="".

Events

Tabloyên nimûne

Karbidestiya tabê ya bilez û dînamîkî lê zêde bikin da ku di nav paceyên naveroka herêmî de, tewra bi navgîniya pêşekên dakêşanê veguhezînin.

Bikaranîna

Bi JavaScript-ê tabloyên tabloyê çalak bikin (pêdivî ye ku her tabloyek 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 divê 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ê
})

Examples

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.

Ji ber sedemên performansê, şîreta amûr û popover data-apis têne hilbijartin, tê vê wateyê ku divê hûn bi xwe wan dest pê bikin .

Li ser zencîreyên jêrîn bigerin da ku serişteyên amûran bibînin:

Çar rê

Di komên têketinê de şîretên amûran

Dema ku bi komên têketina Bootstrap re serişteyên amûran û popoveran bikar tînin, hûn ê neçar bin ku containervebijarka (li jêr hatî belge kirin) saz bikin da ku ji bandorên aliyî yên nedilxwaz dûr bikevin.

Bikaranîna

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

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

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "pêşniyaza amûrê yekem" > 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' )

.tooltip('hilweşandin')

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

$ ( '#element' ). tooltip ( 'hilweşandin' )

Examples

Ji bo agahdariya duyemîn xanî li her hêmanek naverokê, mîna yên li ser iPad-ê, hûrguliyên piçûk zêde bikin. Li ser bişkokê bizivirin da ku popoverê vekin. Pêdivî ye ku Tooltip were nav kirin.

Popover statîk

Çar vebijark hene: jor, rast, jêr û çepê rêzkirî.

Ti nîşanek nayê xuyang kirin ku popover ji JavaScript û naverok di nav datataybetmendiyekê de têne çêkirin.

Demo zindî

Çar rê

Bikaranîna

Bi JavaScriptê popovers çalak bikin:

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

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-animation="".

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

Elementek popover vedike.

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

.popover('hilweşîn')

Hêmanek popover vedişêre û hilweşîne.

$ ( '#element' ). popover ( "hilweşandin" )

Mînak alerts

Bi vê pêvekê re fonksiyona betalkirinê li hemî peyamên hişyariyê zêde bikin.

Bikaranîna

Bi JavaScriptê ve rakirina hişyariyek ç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ê bide.

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

Methods

$().alert()

Hemî hişyariyan bi fonksiyonek nêzîk dipêçe. Ji bo ku hişyariyên we dema girtî werin zindî kirin, 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…
})

Nimûne bikar tîne

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.

Dewletî

Zêde data-loading-text="Loading..."bikin ku li ser bişkokek rewşek barkirinê bikar bînin.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Rewşa barkirinê </button>   

Veguheztina yekane

Zêde data-toggle="button"bikin ku guheztina li ser bişkokek yekane çalak bikin.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Bişkojka Yekane </button>   

Checkbox

Ji data-toggle="buttons-checkbox"bo veguheztina şêwaza qutiya kontrolê li ser btn-komê zêde bikin.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Çep </button>  
  <button type = "button" class = "btn btn-primary" > Navîn </button>  
  <button type = "button" class = "btn btn-primary" > Rast </button>  
</div>

Radyo

Ji data-toggle="buttons-radio"bo guheztina şêwaza radyoyê li ser btn-komê zêde bikin.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Çep </button>  
  <button type = "button" class = "btn btn-primary" > Navîn </button>  
  <button type = "button" class = "btn btn-primary" > Rast </button>  
</div>

Bikaranîna

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.

Vebijêrk

Netû

Methods

$().button('veguhertin')

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

<button type = "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 type = "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.

< type button = "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:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Babetê Koma Tevhevkirî #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body hilweşiya" >  
      <div class = "accordion-inner" > 
        Anim klîşeya pîvan...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Tişta Koma Bihevhatî #2
      </a>
    </div>
    <div id = "collapseTwo" class = "hilweşîna laşê akordeyonê" >  
      <div class = "accordion-inner" > 
        Anim klîşeya pîvan...
      </div>
    </div>
  </div>
</div>
...

Her weha hûn dikarin pêvekê bêyî nîşana accordion bikar bînin. Bişkojkek çêbikin ku berfirehbûn û hilweşîna hêmanek din veguherîne.

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

Bikaranîna

Bi taybetmendiyên daneyê

Tenê hêmanek û hêmanek lê zêde data-toggle="collapse"bikin data-targetda 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.

Ji bo ku rêveberiya koma mîna akordeyonê li kontrolek dagirtî zêde bikin, taybetmendiya daneyê zêde bikin data-parent="#selector". Ji bo ku hûn vê di çalakiyê de bibînin, serî li demo bidin.

Bi rêya JavaScript

Bi destan çalak bike bi:

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

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-parent="".

Methods

.collapse(vebijark)

Naveroka we wekî hêmanek hilweşandî çalak dike. Vebijêrkek 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…
})

Mînak carousel

Slideshowa jêrîn pêvek û pêkhateyek gelemperî ji bo bisiklêtan di nav hêmanên mîna carousel de nîşan dide.

Labelê Pêşî 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.

‹ ›

<div id = "myCarousel" class = "slide carousel" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "çalak" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- 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>

Bikaranîna

Bi taybetmendiyên daneyê

Taybetmendiyên daneyê bikar bînin da ku bi hêsanî pozîsyona carouselê kontrol bikin. data-slidekeywords prevan jî qebûl dike next, ku pozîsyona slide li gorî pozîsyona xwe ya heyî diguhezîne. Alternatîf, bikar bînin data-slide-toda ku navnîşek slide ya xav bi karûselê re derbas bikin data-slide-to="2", ku pozîsyona slideyê berbi navnîşek taybetî ve bi dest pê dike 0.

Bi rêya JavaScript

Carousel bi destan bang bikin:

$ ( '.carousel' ). carousel ()

Vebijêrk

Vebijark dikarin bi taybetmendiyên daneyan an JavaScriptz ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-interval="".

Methods

.carousel(vebijark)

Karûselê bi vebijarkek vebijarkî objectdest pê dike û dest bi bisiklêtê di nav tiştan de 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 duçerxeya tiştan disekine.

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

Mînak

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

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

Hûn dixwazin saz autocomplete="off"bikin ku pêşî li pêşekên gerokê yên xwerû li ser dakêşana tîpa serê Bootstrap-ê xuya nebin.

Bikaranîna

Bi taybetmendiyên daneyê

Taybetmendiyên daneyê lê zêde bikin da ku hêmanek bi fonksiyona tîpa pêşîn tomar bikin wekî ku di mînaka li jor de tê xuyang kirin.

Bi rêya JavaScript

Bi desta tîpa tîpê bang bikin:

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

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-source="".

Methods

.typeahead(vebijark)

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

Mînak

Binnavîgasyon li milê çepê demoyek zindî ya pêveka affix-ê ye.

Bikaranîna

Bi taybetmendiyên daneyê

Ji bo ku bi hêsanî behreya pêvekirinê li her hêmanekê zêde data-spy="affix"bikin, tenê li hêmana ku hûn dixwazin bişopînin lê zêde bikin. Dûv re guheztinan bikar bînin da ku diyar bikin kengê meriv pêvekirina hêmanekê li ser û jê qut bike.

<div data-spy = "afix" data-offset-top = "200" > ... </div>  

Bi rêya JavaScript

Bi JavaScriptê re pêveka affix bang bikin:

$ ( '#navbar' ). pêvekirin ()

Vebijêrk

Vebijark dikarin bi navgîniya taybetmendiyên daneyê an JavaScriptê ve werin derbas kirin. Ji bo taybetmendiyên daneyê, navê vebijarkê lê zêde bikin data-, wekî di data-offset-top="200".