Game da modals

Sauƙaƙe, amma mai sassauƙa, ɗauki kayan aikin javascript na al'ada tare da mafi ƙarancin aikin da ake buƙata kawai da rashin iyawa.

Misali a tsaye

A ƙasa akwai ƙirar ƙididdiga.

Live demo

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

Yin amfani da bootstrap-modal

Kira modal ta hanyar javascript:

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

Zabuka

Alamar alama

Kuna iya kunna modals akan shafinku cikin sauƙi ba tare da rubuta layi ɗaya na javascript ba. Kawai saita data-toggle="modal"kan abin sarrafawa tare da data-target="#foo"ko href="#foo"wanda yayi daidai da nau'in nau'in ID, kuma lokacin da aka danna, zai ƙaddamar da tsarin ku.

Hakanan, don ƙara zaɓuɓɓuka zuwa misalin ƙirar ku, kawai haɗa su azaman ƙarin sifofin bayanai akan ko dai ɓangaren sarrafawa ko alamar yanayin kanta.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Ƙaddamar da Modal </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "rufe" data-dismiss = "modal" > × </button>   
    <h3> Modal header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jiki mai kyau… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Rufe </a>   
    <a href = "#" class = "btn btn-primary" > Ajiye canje-canje </a>  
  </div>
</div>

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

.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…
})

Game da zazzagewa

Ƙara menu na zaɓuka zuwa kusan komai a cikin Bootstrap tare da wannan plugin ɗin mai sauƙi. Bootstrap yana fasalta cikakken goyan bayan menu na zazzagewa akan navbar, shafuka, da kwayoyi.

Misalai

Danna mahaɗin mahaɗan nav na zazzagewa a cikin navbar da kwayayen da ke ƙasa don gwada zazzagewar.

• Haɗin kai na yau da kullun
• Zazzagewa
  • Action
  • Another action
  • Something else here
  • Separated link
• Zazzagewa 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Saukewa 3
  • Action
  • Another action
  • Something else here
  • Separated link

Yin amfani da bootstrap-dropdown.js

Kira jerin zaɓuka ta hanyar javascript:

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

Alamar alama

Don ƙara aikin zazzagewa da sauri zuwa kowane kashi kawai ƙara data-toggle="dropdown"kuma kowane ingantaccen zazzage zazzagewar bootstrap za a kunna ta atomatik.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Haɗin kai na yau da kullun </a></li>  
  <li class = "zazzagewa" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "saukarwa" href = "#menu1" >   
      Zazzagewa
      <b class = "kulawa" </b> 
    </a>
    <ul class = "zazzage-menu" > 
      <li><a href = "#" > Aiki </a></li> 
      <li><a href = "#" > Wani aiki </a></li> 
      <li><a href = "#" > Wani abu kuma anan </a></li> 
      <li class = "mai rarrabawa" </li> 
      <li><a href = "#" > Rabuwar hanyar haɗin gwiwa </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "saukarwa" > 
    <a class = "dropdown-toggle" data-toggle = "saukarwa" data-target = "#" href = "hanya/zuwa/shafi.html" >    
      Zazzagewa
      <b class = "kulawa" </b> 
    </a>
    <ul class = "zazzage-menu" > 
      ...
    </ul>
  </li>
</ul>

Hanyoyin

$() zazzage()

API ɗin shirye-shirye don kunna menus don navbar da aka bayar ko kewayawa tabbed.

The ScrollSpy plugin shine don sabunta makasudin nav ta atomatik dangane da matsayin gungurawa.

Misali navbar tare da scrollspy

Gungura wurin da ke ƙasa kuma duba sabunta kewayawa. Za a kuma haskaka ƙananan abubuwan da aka zazzage su ma. Gwada shi!

Amfani da bootstrap-scrollspy.js

Kira scrollspy ta hanyar javascript:

$ ( '#navbar' ). scrollspy ()

Alamar alama

Don sauƙaƙe ƙara halayyar scrollspy zuwa kewayawa na sama, kawai ƙara data-spy="scroll"zuwa kashi da kuke son yin rahõto a kai (mafi yawanci wannan zai zama jiki).

<body data-spy = "gungurawa" > ... </ jiki>  

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

Abubuwan da suka faru

Wannan plugin ɗin yana ƙara sauri, shafi mai ƙarfi da aikin kwaya don canzawa ta abun cikin gida.

Misali shafuka

Danna shafukan da ke ƙasa don kunna tsakanin ɓoyayyun fa'idodin, ko da ta hanyar menu na zazzagewa.

• Gida
• Bayanan martaba
• Zazzagewa
  • @fat
  • @mdo

Amfani da bootstrap-tab.js

Kunna tabbbable shafuka 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 kewayawa tab ko 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"]' ). kan ( 'an nuna' , aiki ( e ) {   
  e . manufa // kunna tab
  e . relatedTarget // shafi na baya
})

Game da Tukwici

Ƙ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, yi amfani da css3 don rayarwa, da sifofin bayanai don ajiyar take na gida.

Misali amfani da Tukwici

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

Amfani da bootstrap-tooltip.js

Ƙaddamar da kayan aiki ta hanyar javascript:

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

Zabuka

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.

<a href = "#" rel = "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 matakin 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' )

Game da popovers

Ƙara ƙarami mai rufi na abun ciki, kamar waɗanda ke kan iPad, zuwa kowane nau'i na bayanan sakandare na gidaje.

* Yana buƙatar haɗa kayan aiki

Misali bugu da kari

Juya kan maɓallin don kunna popover.

Amfani da bootstrap-popover.js

Kunna popovers ta hanyar javascript:

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

Zabuka

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

Game da faɗakarwa

Plugin faɗakarwa ƙaramin aji ne don ƙara ayyuka na kusa zuwa faɗakarwa.

Misali faɗakarwa

Fitin ɗin faɗakarwa yana aiki akan saƙonnin faɗakarwa na yau da kullun, kuma yana toshe saƙonni.

Amfani da bootstrap-alert.js

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…
})

Game da

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.

Misali amfani

Yi amfani da plugin ɗin maɓalli don jahohi da masu juyawa.

Amfani da bootstrap-button.js

Kunna maɓallan ta hanyar 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.

<!-- Ƙara data-toggle="button" don kunna kunnawa akan maɓalli ɗaya -->
< class class = "btn" data-toggle = "button" > Juya Juya </button>  
 
<!-- Ƙara data-toggle="buttons-checkbox" don canza salon akwati akan btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Hagu </button> 
  <button class = "btn" > Tsakiya </button> 
  <button class = "btn" > Dama </button> 
</div>
 
<!-- Ƙara data-toggle="buttons-radio" don kunna salon rediyo akan btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Hagu </button> 
  <button class = "btn" > Tsakiya </button> 
  <button class = "btn" > Dama </button> 
</div>

Hanyoyin

$().button('toggle')

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

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

Amfani da bootstrap-collapse.js

Kunna ta hanyar javascript:

$ ( ".rushe" ). rugujewa ()

Zabuka

Alamar alama

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.

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

Hanyoyin

.rushe (zaɓuɓɓuka)

Yana kunna abun cikin ku azaman abin 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…
})

Game da

Filogi na gabaɗaya don yin keke ta hanyar abubuwa. Zagaye mai daɗi.

Misali carousel

Kalli nunin faifai a kasa.

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.

Alamar Thumbnail ta biyu

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.

Alamar Thumbnail ta uku

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.

‹ ›

Amfani da bootstrap-carousel.js

Kira ta javascript:

$ ( '.carousel' ). carousel ()

Zabuka

Alamar alama

Ana amfani da sifofin bayanai don na baya da na gaba. Duba alamar misali a ƙasa.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- 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>

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.

Game da

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

Misali

Fara bugawa a cikin filin da ke ƙasa don nuna sakamakon rubutu.

Yin amfani da bootstrap-typeahead.js

Kira typeahead ta hanyar javascript:

$ ( '.typehead' ). irin ()

Zabuka

Alamar alama

Ƙara sifofin bayanai don yin rajistar wani kashi mai aikin nau'in rubutu.

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

Hanyoyin

.typehead(zaɓi)

Yana fara shigarwa tare da nau'in rubutu.