Mutum ko harhada

Ana iya haɗa plugins daban-daban (ko da yake wasu suna buƙatar abin dogaro), ko gaba ɗaya. Duka bootstrap.js da bootstrap.min.js sun ƙunshi duk plugins a cikin fayil ɗaya.

Bayanan bayanai

Kuna iya amfani da duk Bootstrap plugins zalla ta hanyar API ɗin alama ba tare da rubuta layi ɗaya na JavaScript ba. Wannan shine API ɗin aji na farko na Bootstrap kuma yakamata ya zama abin lura na farko lokacin amfani da plugin.

Wannan ya ce, a wasu yanayi yana iya zama kyawawa a kashe wannan aikin. Sabili da haka, muna kuma ba da ikon musaki sifa ta API ta hanyar cire duk abubuwan da suka faru akan sunan jikin da aka ware tare da ''data-api''. Wannan yayi kama da haka:

$ ( 'jiki' ). kashe ( '.data-api' )

A madadin, don ƙaddamar da takamaiman plugin ɗin, kawai haɗa sunan plugin ɗin azaman sarari suna tare da bayanan-api sunaye kamar haka:

$ ( 'jiki' ). kashe ( '.alert.data-api' )

API ɗin shirye-shirye

Mun kuma yi imanin ya kamata ku iya amfani da duk abubuwan Bootstrap kawai ta JavaScript API. Duk APIs na jama'a guda ɗaya ne, hanyoyin da za a iya sarƙa, da dawo da tarin da aka yi aiki da su.

$ ( ".btn.danger" ). button ( "juyawa" ). addClass ( "mai" )

Duk hanyoyin ya kamata su karɓi zaɓin zaɓi na zaɓi, kirtani wanda ke nufin wata hanya, ko ba komai (wanda ke fara plugin ɗin tare da halayen tsoho):

$ ( "#myModal" ). modal () // an fara shi tare da ɓatanci                       
$ ( "#myModal" ). modal ({allon madannai : ƙarya }) // an fara shi ba tare da keyboard ba     
$ ( "#myModal" ). modal ( 'show' ) // farawa da kiran nuni nan da nan                

Kowane plugin kuma yana fallasa ɗanyen ginin sa akan kayan 'Constructor': $.fn.popover.Constructor. Idan kuna son samun misalan plugin ɗin, dawo da shi kai tsaye daga wani abu: $('[rel=popover]').data('popover').

Babu Rikici

Wani lokaci yana da mahimmanci a yi amfani da plugins Bootstrap tare da wasu tsarin UI. A cikin waɗannan yanayi, karon sararin samaniya na iya faruwa lokaci-lokaci. Idan wannan ya faru, kuna iya kiran .noConflictplugin ɗin da kuke son mayar da darajar.

var bootstrapButton = $ . fn . maballin . noConflict () // mayar da maɓallin $.fn. zuwa ƙimar da aka sanya a baya 
$ . fn . bootstrapBtn = bootstrapButton             // bada $() .bootstrapBtn aikin bootstrap

Abubuwan da suka faru

Bootstrap yana ba da al'amuran al'ada don yawancin ayyukan plugins na musamman. Gabaɗaya, waɗannan suna zuwa ne a cikin sigar ɓarna mai ƙarewa kuma ta wuce - inda ƙarshen (misali show) ke haifar da shi a farkon wani lamari, kuma sigar ɓangarorin sa na baya (misali shown) yana haifar da ƙarshen aikin.

Duk abubuwan da ba su da iyaka suna ba da aikin hana tsoho. Wannan yana ba da ikon dakatar da aiwatar da wani aiki kafin ya fara.

$ ( '#myModal' ). kan ( 'nuna' , aiki ( e ) {   
    idan (! data ) dawo e . hanaDefault () // yana dakatar da nunawa   
})

Game da sauyi

Don sauƙaƙan tasirin canji, haɗa da bootstrap-transition.js sau ɗaya tare da sauran fayilolin JS. Idan kana amfani da harhada (ko rage) bootstrap.js , babu buƙatar haɗa wannan - ya riga ya kasance.

Yi amfani da lokuta

Misalai kaɗan na plugin ɗin canji:

• Zamewa ko faduwa a cikin modal
• Fashewa daga shafuka
• Fashewar faɗakarwa
• Zamiya carousel pans

Misalai

Modals an daidaita su, amma masu sassauƙa, maganganun tattaunawa tare da mafi ƙarancin aikin da ake buƙata da kuma rashin daidaituwa.

Misali a tsaye

Modal da aka yi tare da kai, jiki, da saitin ayyuka a cikin ƙafar ƙafa.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    < nau'in maballin = "button" class = "kusa" data-dismiss = "modal" aria-hidden = "gaskiya" > × </button>    
    <h3> Modal header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jiki mai kyau… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn"> Rufe </a> _  
    <a href = "#" class = "btn btn-primary" > Ajiye canje-canje </a>  
  </div>
</div>

Live demo

Juya modal ta JavaScript ta danna maɓallin da ke ƙasa. Zai zame ƙasa ya dushe daga saman shafin.

<!-- Maballin don kunna modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Kaddamar da modal demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal boye fade" tabindex = "-1" rawar = "dialog" aria-labeledby = "myModalLabel" aria-hidden = "gaskiya" >      
  <div class = "modal-header" > 
    <button type = "button" class = "rufe" data-dismiss = "modal" aria-hidden = "gaskiya" > × </button>    
    <h3 id = "myModalLabel" > Modal header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Jiki mai kyau… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "gaskiya" > Rufe </button>   
    <button class = "btn btn-primary" > Ajiye canje-canje </button> 
  </div>
</div>

Amfani

Ta hanyar bayanan halayen

Kunna modal ba tare da rubuta JavaScript ba. Saita data-toggle="modal"a kan abin sarrafawa, kamar maɓalli, tare da data-target="#foo"ko href="#foo"don ƙaddamar da takamaiman tsari don juyawa.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Kaddamar da modal </button>   

Ta hanyar JavaScript

Kira modal tare da id myModaltare da layi ɗaya na JavaScript:

$ ( '#myModal' ). modal ( zaɓi )

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-backdrop="".

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

Hanyoyin

.modal(zaɓi)

Yana kunna abun cikin ku azaman tsari. Yana yarda da zaɓin zaɓi object.

$ ( '#myModal' ). modal ({
  keyboard : karya 
})

.modal('toggle')

Da hannu yana jujjuya modal.

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

.modal('show')

Da hannu yana buɗe modal.

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

.modal('boye')

Da hannu yana ɓoye modal.

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

Abubuwan da suka faru

Ajin modal na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan modal.

$ ( '#myModal' ). akan ( 'boye' , aiki () {   
  // yi wani abu…
})

Misalai

Ƙara menu na zaɓuka zuwa kusan komai tare da wannan plugin ɗin mai sauƙi, gami da navbar, shafuka, da kwayoyi.

A cikin navbar

A cikin tabs

Amfani

Ta hanyar bayanan halayen

Ƙara data-toggle="dropdown"zuwa hanyar haɗi ko maɓalli don kunna zazzagewa.

<div class = "saukarwa" > 
  <a class = "dropdown-toggle" data-toggle = "saukarwa" href = "#" > Fasakarwa </a>   
  <ul class = "zaɓi-menu" rawar = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

Don kiyaye URLs daidai, yi amfani da data-targetsifa maimakon href="#".

<div class = "saukarwa" > 
  <a class = "dropdown-toggle" id = "dLabel" rawar = "button" data-toggle = "saukarwa" data-target = "#" href = "/page.html" >      
    Zazzagewa
    <b class = "kulawa" </b> 
  </a>
  <ul class = "zaɓi-menu" rawar = "menu" aria-labeledby = "dLabel" >   
    ...
  </ul>
</div>

Ta hanyar JavaScript

Kira zazzagewar ta hanyar JavaScript:

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

Zabuka

Babu

Hanyoyin

$() saukar da ('toggle')

API ɗin shirye-shirye don juyawa menus don abin da aka bayar na navbar ko kewayawa ta shafi.

Misali a cikin navbar

The ScrollSpy plugin shine don sabunta makasudin nav ta atomatik dangane da matsayin gungurawa. Gungura wurin da ke ƙasa da maɓallin kewayawa kuma duba canjin aji mai aiki. Za a kuma haskaka ƙananan abubuwan da aka zazzage su ma.

Amfani

Ta hanyar bayanan halayen

Don sauƙin ƙara halayyar scrollspy zuwa kewayawar saman saman ku, kawai ƙara data-spy="scroll"zuwa ɓangaren da kuke son yin rahõto a kai (mafi yawanci wannan zai zama jiki) kuma data-target=".navbar"don zaɓar wanne nav don amfani. Kuna so ku yi amfani da scrollspy tare da .navsashi.

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

Ta hanyar JavaScript

Kira scrollspy ta JavaScript:

$ ( '#navbar' ). scrollspy ()

Hanyoyin

.scrollspy('refresh')

Lokacin amfani da scrollspy tare da ƙara ko cire abubuwa daga DOM, kuna buƙatar kiran hanyar wartsakewa kamar haka:

$ ( '[data-leken asiri = " gungura"]' ). kowane ( aiki () {  
  var $ Spy = $ ( wannan ). scrollspy ( 'refresh' )
});

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset="".

Abubuwan da suka faru

Misali shafuka

Ƙara aikin shafin mai sauri, mai ƙarfi don canzawa ta cikin fakitin abun ciki na gida, har ma ta menu na zazzagewa.

Amfani

Kunna shafukan da za a iya amfani da su ta hanyar JavaScript (kowane shafin yana buƙatar kunna shi daban):

$ ( '#myTab a' ). danna ( aikin ( e ) {  
  e . default ();
  $ ( wannan ). tab ( 'show' );
})

Kuna iya kunna shafuka guda ɗaya ta hanyoyi da yawa:

$ ( '#myTab a[href="#profile"]' ). tab ( 'show' ); // Zaɓi shafin da suna 
$ ( '#myTab a: farko' ). tab ( 'show' ); // Zaɓi shafin farko 
$ ( '#myTab a: karshe' ). tab ( 'show' ); // Zaɓi shafin ƙarshe 
$ ( '#myTab li:eq(2) a' ). tab ( 'show' ); // Zaɓi shafin na uku (0-indexed) 

Alamar alama

Kuna iya kunna shafi ko kewayawa kwaya ba tare da rubuta kowane JavaScript ba ta hanyar tantancewa kawai data-toggle="tab"ko data-toggle="pill"akan wani abu. Ƙara navda nav-tabsazuzuwan zuwa shafin ulzai yi amfani da salo na Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Gida </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Bayanan martaba </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Saƙonni </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Saituna </a></li>  
</ul>

Hanyoyin

$().taba

Yana kunna abun shafi da kwandon abun ciki. Tab ya kamata ya kasance yana da ko dai data-targetko wani hrefkumburin kwantena mai niyya a cikin DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#gida" > Gida </a></li>  
  <li><a href = "#profile" > Bayanan martaba </a></li> 
  <li><a href = "#messages" > Saƙonni </a></li> 
  <li><a href = "#Settings" > Saituna </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "gida" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "saƙonni" > ... </div>  
  <div class = "tab-pane" id = "saituna" > ... </div>  
</div>
 
<rubutu>
  $ ( aiki () {  
    $ ( '#myTab a: karshe' ). tab ( 'show' );
  })
</script>

Abubuwan da suka faru

$ ( 'a[data-toggle = "tab"]' ). akan ( 'an nuna' , aiki ( e ) {   
  e . manufa // kunna tab
  e . relatedTarget // shafi na baya
})

Misalai

Ƙaddamar da kyakkyawan jQuery.tipsy plugin wanda Jason Frame ya rubuta; Tukwici kayan aiki sigar da aka sabunta ne, waɗanda ba su dogara da hotuna ba, amfani da CSS3 don rayarwa, da sifofin bayanai don ajiyar take na gida.

Don dalilan aiki, kayan aiki da bayanan popover-apis sun shiga, ma'ana dole ne ka fara su da kanka .

Tsallake kan hanyoyin da ke ƙasa don ganin kayan aiki:

Hanyoyi hudu

Nasihun kayan aiki a cikin ƙungiyoyin shigarwa

Lokacin amfani da tukwici na kayan aiki da popovers tare da ƙungiyoyin shigar da Bootstrap, dole ne ku saita containerzaɓin (rubutun ƙasa) don guje wa illolin da ba'a so.

Amfani

Ƙaddamar da kayan aiki ta hanyar JavaScript:

$ ( '#misali' ). kayan aiki ( zaɓi )

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Alamar alama

<a href = "#" data-toggle = "tooltip" take = "farkon kayan aiki" > shawagi a kaina </a>   

Hanyoyin

$().tooltip(zaɓi)

Haɗa mai sarrafa kayan aiki zuwa tarin abubuwa.

Tooltip('show')

Yana bayyana tushen kayan aiki.

$ ( '# element' ). kayan aiki ( 'show' )

.tooltip('boye')

Yana ɓoye bayanan kayan aiki.

$ ( '# element' ). kayan aiki ( 'boye' )

.tooltip('toggle')

Yana jujjuya matakin kayan aiki.

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

.tooltip('lalata')

Yana ɓoyewa da lalata kayan aikin wani abu.

$ ( '# element' ). kayan aiki ( 'lalata' )

Misalai

Ƙara ƙarami mai rufi na abun ciki, kamar waɗanda ke kan iPad, zuwa kowane nau'i na bayanan sakandare na gidaje. Juya kan maɓallin don kunna popover. Yana buƙatar haɗa Tushen kayan aiki .

A tsaye popover

Akwai zaɓuɓɓuka huɗu: saman, dama, ƙasa, da hagu masu layi.

Babu alamar da aka nuna kamar yadda aka samar da popovers daga JavaScript da abun ciki a cikin datasifa.

Live demo

Hanyoyi hudu

Amfani

Kunna popovers ta JavaScript:

$ ( '#misali' ). popover ( zaɓi )

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-animation="".

Alamar alama

Don dalilan aiki, Tooltip da Popover data-apis sun shiga ciki. Idan kuna son amfani da su kawai saka zaɓin zaɓi.

Hanyoyin

$().popover(zabuka)

Yana farawa popovers don tarin abubuwa.

.popover('show')

Yana bayyanar da abubuwa masu tasowa.

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

.popover('boye')

Yana ɓoye abubuwan haɓakawa.

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

.popover('toggle')

Yana jujjuya abubuwan haɓakawa.

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

.popover('lalata')

Yana ɓoyewa da lalata faɗuwar wani abu.

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

Misali faɗakarwa

Ƙara aikin korar zuwa duk saƙonnin faɗakarwa tare da wannan plugin ɗin.

Amfani

Kunna korar faɗakarwa ta hanyar JavaScript:

$ ( "jijjiga" ). faɗakarwa ()

Alamar alama

Kawai ƙara data-dismiss="alert"zuwa maɓallin ku don ba da aikin kusa da faɗakarwa ta atomatik.

<a class = "close" data-dismiss = "alert" href = "#" > × </a>   

Hanyoyin

$() faɗakarwa()

Yana tattara duk faɗakarwa tare da ayyuka na kusa. Don faɗakarwar ku ta raye lokacin rufewa, tabbatar cewa an riga an yi amfani .fadeda .inajin da ajin.

faɗakarwa('kusa')

Yana rufe faɗakarwa.

$ ( "jijjiga" ). faɗakarwa ( 'kusa' )

Abubuwan da suka faru

Ajin faɗakarwa na Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan faɗakarwa.

$ ( '#ajiya na' ). ɗaure ( 'rufe' , aiki () {   
  // yi wani abu…
})

Misali amfani

Yi ƙari tare da maɓalli. Maɓallin sarrafawa ko ƙirƙiri ƙungiyoyin maɓalli don ƙarin abubuwan haɗin gwiwa kamar sandunan kayan aiki.

Jiha

Ƙara data-loading-text="Loading..."don amfani da yanayin lodi akan maɓalli.

<button type = "button" class = "btn btn-primary" data-loading-text = "Loading..." > Yanayin lodawa </button>   

Juyawa guda ɗaya

Ƙara data-toggle="button"don kunna juyawa akan maɓalli ɗaya.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Juya Juya </button>   

Akwatin ajiya

Ƙara data-toggle="buttons-checkbox"don salon jujjuyawar akwati akan rukunin btn.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Hagu </button>  
  <button type = "button" class = "btn btn-primary" > Tsakiyar </button>  
  <button type = "button" class = "btn btn-primary" > Dama </button>  
</div>

Rediyo

Ƙara data-toggle="buttons-radio"don jujjuya salon rediyo akan rukunin btn.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Hagu </button>  
  <button type = "button" class = "btn btn-primary" > Tsakiyar </button>  
  <button type = "button" class = "btn btn-primary" > Dama </button>  
</div>

Amfani

Kunna maɓalli ta JavaScript:

$ ( '.nav-tabs' ). button ()

Alamar alama

Halayen bayanai suna da alaƙa da maɓalli plugin. Duba lambar misalin da ke ƙasa don nau'ikan alama iri-iri.

Zabuka

Babu

Hanyoyin

$().button('toggle')

Canza yanayin turawa. Yana ba da maɓallin kamannin cewa an kunna shi.

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

$().button('loading')

Yana saita yanayin maɓalli zuwa lodawa - yana kashe maɓallin kuma yana musanya rubutu zuwa loda rubutu. Ya kamata a ayyana rubutun lodawa akan maɓalli ta amfani da sifa ta bayanai data-loading-text.

<button type = "button" class = "btn" data-loading-text = "loading kaya..." > ... </button>    

$().button('sake saita')

Yana sake saita yanayin maɓallin - musanya rubutu zuwa rubutu na asali.

$().button(string)

Sake saita yanayin maɓallin - musanya rubutu zuwa kowane yanayin rubutu da aka ayyana.

<button type = "button" class = "btn" data-complete-text = "gama!" > ... </button>    
<rubutu>
  $ ( '.btn' ). button ( 'cikakke' )
</script>

Game da

Sami salon tushe da sassauƙan tallafi don abubuwan haɗin gwiwa masu rugujewa kamar accordions da kewayawa.

* Yana buƙatar plugin ɗin Transition don haɗawa.

Misali accordion

Yin amfani da plugin ɗin rushewa, mun gina widget ɗin salon accordion mai sauƙi:

<div class = "accordion" id = "accordion2" >  
  <div class = "kungiyar accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "rushe" data-parent = "#accordion2" href = "#collapseOne" >    
        Rukunin Rukuni na #1
      </a>
    </div>
    <div id = "collapseOne" class = "accordion-body rushe in" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "kungiyar accordion" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Abun Rukuni na #2
      </a>
    </div>
    <div id = "collapseTwo" class = "accordion-body rushe" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Hakanan zaka iya amfani da plugin ɗin ba tare da alamar accordion ba. Yi maɓalli don jujjuya faɗaɗawa da rushewar wani abu.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  sauki rugujewa
</button>
 
<div id = "demo" class = "rushewa" > … </div>  

Amfani

Ta hanyar bayanan halayen

Kawai ƙara data-toggle="collapse"da kuma data-targetzuwa kashi don ba da ikon sarrafa abin da zai iya rugujewa ta atomatik. Siffar data-targettana karɓar mai zaɓin css don amfani da rushewar zuwa. Tabbatar ƙara ajin collapsezuwa kashi mai rugujewa. Idan kuna son buɗewa ta tsohuwa, ƙara ƙarin ajin in.

Don ƙara gudanarwar rukuni-kamar accordion zuwa sarrafawa mai yuwuwa, ƙara sifa na bayanai data-parent="#selector". Koma zuwa demo don ganin wannan a aikace.

Ta hanyar JavaScript

Kunna da hannu tare da:

$ ( ".rushe" ). rugujewa ()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-parent="".

Hanyoyin

.rushe (zaɓuɓɓuka)

Yana kunna abun cikin ku azaman abun da zai iya rugujewa. Yana yarda da zaɓin zaɓi object.

$ ( '#myCollapsible' ). rugujewa ({
  juya : karya 
})

.rushe ('juya')

Yana juya wani abu mai rugujewa zuwa nunawa ko ɓoye.

.rushe ('show')

Yana nuna kashi mai rugujewa.

.rushe('boye')

Yana ɓoye wani abu mai rugujewa.

Abubuwan da suka faru

Ajin rushewar Bootstrap yana fallasa ƴan abubuwan da suka faru don haɗawa cikin ayyukan rugujewa.

$ ( '#myCollapsible' ). akan ( 'boye' , aiki () {   
  // yi wani abu…
})

Misali carousel

Nunin nunin faifan bidiyo da ke ƙasa yana nuna filogi na gabaɗaya da kuma bangaren yin keke ta hanyar abubuwa kamar carousel.

Alamar Thumbnail na farko

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id un mi porta gravida a eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Second Thumbnail label

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.

Third Thumbnail label

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 = "carousel slide" >  
  <ol class = "manufofin carousel" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "active" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" > </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" > </li>  
  </ol>
  <!-- Abubuwan Carousel -->
  <div class = "carousel-inner" > 
    <div class = "abu mai aiki" > … </div> 
    <div class = "abu" > … </div> 
    <div class = "abu" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control hagu" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "na gaba" > & rsaquo; </a>   
</div>

Amfani

Ta hanyar bayanan halayen

Yi amfani da sifofin bayanai don sarrafa matsayin carousel cikin sauƙi. data-slideyana karɓar kalmomin maɓalli prevko next, wanda ke canza matsayi na faifai dangane da matsayinsa na yanzu. A madadin, yi amfani data-slide-toda don ƙaddamar da ɗanyen fihirisar zamewa zuwa carousel data-slide-to="2", wanda ke tsalle matsayi na nunin zuwa wani fihirisar farawa da 0.

Ta hanyar JavaScript

Kira carousel da hannu tare da:

$ ( '.carousel' ). carousel ()

Zabuka

Za a iya wuce zaɓuɓɓuka ta hanyar halayen bayanai ko JavaScriptz. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-interval="".

Hanyoyin

.carousel(zaɓi)

Ya fara carousel tare da zaɓin zaɓi objectkuma ya fara hawan keke ta abubuwa.

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

.carousel('cycle')

Yana zagayawa cikin abubuwan carousel daga hagu zuwa dama.

.carousel('dakata')

Yana dakatar da carousel daga yin keke ta cikin abubuwa.

.carousel(lamba)

Yana zagayawa carousel zuwa wani firam na musamman (0 tushen, kama da tsararru).

.carousel('wanda ya gabata')

Kewaya zuwa abu na baya.

.carousel('na gaba')

Kewaya zuwa abu na gaba.

Abubuwan da suka faru

Ajin carousel na Bootstrap yana fallasa abubuwa biyu don haɗawa cikin ayyukan carousel.

Misali

Ainihin plugin ɗin mai sauƙi mai sauƙi don ƙirƙirar ƙayatattun rubutun rubutu tare da kowane nau'i na shigar da rubutu.

< nau'in shigarwa = "rubutu" data- provide = "typehead" >  

Za ku so a saita autocomplete="off"don hana tsoffin menu na burauza daga bayyana a kan zazzagewar nau'in Bootstrap.

Amfani

Ta hanyar bayanan halayen

Ƙara sifofin bayanai don yin rajistar wani kashi mai aikin nau'in rubutu kamar yadda aka nuna a misalin da ke sama.

Ta hanyar JavaScript

Kira typeahead da hannu tare da:

$ ( '.typehead' ). irin ()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-source="".

Hanyoyin

.typehead(zaɓi)

Yana fara shigarwa tare da nau'in rubutu.

Misali

Ƙarƙashin kewayawa na hagu shine nunin nunin rayayye na affix plugin.

Amfani

Ta hanyar bayanan halayen

Don ƙara ɗabi'ar affix cikin sauƙi zuwa kowane nau'in, kawai ƙara data-spy="affix"zuwa ɓangaren da kuke son yin leken asiri. Sannan yi amfani da kashe-kashe don ayyana lokacin kunna kunnawa da kashewa.

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

Ta hanyar JavaScript

Kira plugin ɗin affix ta JavaScript:

$ ( '#navbar' ). lika ()

Zabuka

Za a iya wucewa ta hanyar sifofin bayanai ko JavaScript. Don halayen bayanai, saka sunan zaɓin zuwa data-, kamar a cikin data-offset-top="200".