Individuale ose të përpiluara

Shtojcat mund të përfshihen individualisht (megjithëse disa kanë nevojë për varësi), ose të gjitha menjëherë. Të dy bootstrap.js dhe bootstrap.min.js përmbajnë të gjitha shtojcat në një skedar të vetëm.

Atributet e të dhënave

Ju mund të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së së shënjimit pa shkruar një rresht të vetëm JavaScript. Ky është API i klasit të parë të Bootstrap dhe duhet të jetë konsiderata juaj e parë kur përdorni një shtojcë.

Thënë kështu, në disa situata mund të jetë e dëshirueshme të çaktivizohet ky funksionalitet. Prandaj, ne ofrojmë gjithashtu mundësinë për të çaktivizuar atributin e të dhënave API duke shkëputur të gjitha ngjarjet në hapësirën e emrave të trupit me "data-api"". Kjo duket si kjo:

$ ( 'trup' ). joaktiv ( '.data-api' )

Përndryshe, për të synuar një shtojcë specifike, thjesht përfshini emrin e shtojcës si një hapësirë ​​emri së bashku me hapësirën e emrave të të dhënave-api si kjo:

$ ( 'trup' ). joaktiv ( '.alert.data-api' )

API programatike

Ne gjithashtu besojmë se duhet të jeni në gjendje të përdorni të gjitha shtojcat e Bootstrap thjesht përmes API-së JavaScript. Të gjitha API-të publike janë metoda të vetme, të lidhura me zinxhirë dhe e kthejnë koleksionin sipas të cilit është vepruar.

$ ( ".btn.danger" ). butoni ( "ndryshoni" ). addClass ( "dhjamë" )

Të gjitha metodat duhet të pranojnë një objekt opsionesh opsionale, një varg që synon një metodë të caktuar ose asgjë (që fillon një shtojcë me sjellje të paracaktuar):

$ ( "#myModal" ). modal () // inicializohet me parazgjedhje                       
$ ( "#myModal" ). modale ({ tastierë : false }) // e inicializuar pa tastierë     
$ ( "#myModal" ). modal ( 'show' ) // inicializon dhe thërret shfaqjen menjëherë                

Çdo shtojcë ekspozon gjithashtu konstruktorin e saj të papërpunuar në një pronë të "Constructor": $.fn.popover.Constructor. Nëse dëshironi të merrni një shembull të veçantë të shtojcave, merrni atë drejtpërdrejt nga një element: $('[rel=popover]').data('popover').

Asnjë Konflikt

Ndonjëherë është e nevojshme të përdoren shtojcat Bootstrap me korniza të tjera UI. Në këto rrethana, herë pas here mund të ndodhin përplasje të hapësirës së emrave. Nëse kjo ndodh, mund të telefononi .noConflictshtojcën që dëshironi të ktheni vlerën.

var bootstrapButton = $ . fn . butoni . noConflict () // ktheje $.fn.button në vlerën e caktuar më parë 
$ . fn . bootstrapBtn = bootstrapButton             // jep $().bootstrapBtn funksionalitetin e bootstrap

Ngjarjet

Bootstrap ofron ngjarje të personalizuara për shumicën e veprimeve unike të shtojcave. Në përgjithësi, këto vijnë në një formë të paskajores dhe të paskajores - ku infinitivi (sh. show) shkaktohet në fillim të një ngjarjeje, dhe forma e tij e paskajores (p.sh. ) nxitet në shownpërfundimin e një veprimi.

Të gjitha ngjarjet infinitive ofrojnë funksionin preventDefault. Kjo siguron mundësinë për të ndaluar ekzekutimin e një veprimi përpara se të fillojë.

$ ( '#myModal' ). on ( 'shfaq' , funksioni ( e ) {   
    nëse (! të dhëna ) kthejnë e . preventDefault () // ndalon shfaqjen e modalit   
})

Rreth tranzicioneve

Për efekte të thjeshta tranzicioni, përfshini bootstrap-transition.js një herë së bashku me skedarët e tjerë JS. Nëse jeni duke përdorur bootstrap.js të përpiluar (ose të minimizuar) , nuk ka nevojë ta përfshini këtë - është tashmë aty.

Raste te perdorimit

Disa shembuj të shtojcës së tranzicionit:

• Rrëshqitje ose zbehje në modale
• Zbehet skedat
• Zbehja e sinjalizimeve
• Xhama rrëshqitës të karuselit

Shembuj

Modalet janë të thjeshta, por fleksibël, kërkesat e dialogut me funksionalitetin minimal të kërkuar dhe parazgjedhjet inteligjente.

Shembull statik

Një modal i dhënë me kokë, trup dhe grup veprimesh në fund.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "e vërtetë" > × </button>    
    <h3> Kreu modal </h3>
  </div>
  <div class = "trup modal" > 
    <p> Një trup i hollë… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Mbylle </a>  
    <a href = "#" class = "btn btn-primary" > Ruaj ndryshimet </a>  
  </div>
</div>

Demoja e drejtpërdrejtë

Ndryshoni një modal nëpërmjet JavaScript duke klikuar butonin më poshtë. Do të rrëshqasë poshtë dhe do të zbehet nga pjesa e sipërme e faqes.

<!-- Butoni për të aktivizuar modal -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Nis modalin demo </a>    
 
<!-- Modal -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "e vërtetë" >      
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Kreu modal </h3> 
  </div>
  <div class = "trup modal" > 
    <p> Një trup i hollë… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Mbylle </button>   
    <button class = "btn btn-primary" > Ruaj ndryshimet </button> 
  </div>
</div>

Përdorimi

Nëpërmjet atributeve të të dhënave

Aktivizoni një modal pa shkruar JavaScript. Vendoseni data-toggle="modal"në një element kontrollues, si një buton, së bashku me një data-target="#foo"ose href="#foo"për të synuar një modal specifik për ta ndërruar.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Nis modalin </button>   

Përmes JavaScript

Thirrni një modal me id myModalme një rresht të vetëm JavaScript:

$ ( '#myModal' ). modale ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-backdrop="".

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

Metodat

.modal(opsione)

Aktivizon përmbajtjen tuaj si modale. Pranon një opsion opsional object.

$ ( '#myModal' ). modale ({
  tastierë : false 
})

.modal ('ndërrim')

Ndryshon manualisht një modal.

$ ( '#myModal' ). modale ( 'ndërrim' )

.modal('shfaq')

Hap me dorë një modal.

$ ( '#myModal' ). modale ( 'shfaqje' )

.modal ('fsheh')

Fsheh manualisht një modal.

$ ( '#myModal' ). modale ( 'fsheh' )

Ngjarjet

Klasa modale e Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin modal.

$ ( '#myModal' ). on ( 'fshehur' , funksion () {   
  // bej dicka…
})

Shembuj

Shtoni menutë me zbritje në pothuajse çdo gjë me këtë shtojcë të thjeshtë, duke përfshirë shiritin e navigimit, skedat dhe pilulat.

Brenda një shirit navigimi

Brenda skedave

Përdorimi

Nëpërmjet atributeve të të dhënave

Shto data-toggle="dropdown"në një lidhje ose buton për të ndërruar një listë rënëse.

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

Për të mbajtur URL-të të paprekura, përdorni data-targetatributin në vend të 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>

Përmes JavaScript

Thirrni skedarët e lëshimit përmes JavaScript:

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

Opsione

Asnje

Metodat

$().dropdown('toggle')

Një api programatike për ndryshimin e menuve për një navigacion të caktuar navigimi ose me skeda.

Shembull në navbar

Shtojca ScrollSpy është për përditësimin automatik të objektivave të navigimit bazuar në pozicionin e lëvizjes. Lëvizni zonën poshtë shiritit të navigimit dhe shikoni ndryshimin e klasës aktive. Nën-artikujt në rënie do të theksohen gjithashtu.

Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar me lehtësi sjelljen e scrollspy në navigimin tuaj të shiritit të sipërm, thjesht shtoni data-spy="scroll"te elementi që dëshironi të spiunoni (më së shpeshti ky do të ishte trupi) dhe data-target=".navbar"për të zgjedhur se cilin nav do të përdorni. Ju do të dëshironi të përdorni scrollspy me një .navkomponent.

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

Përmes JavaScript

Telefononi scrollspy përmes JavaScript:

$ ( '#navbar' ). scrollspy ()

Metodat

.scrollspy ('refresh')

Kur përdorni scrollspy në lidhje me shtimin ose heqjen e elementeve nga DOM, do t'ju duhet të telefononi metodën e rifreskimit si kjo:

$ ( '[data-spy="scroll"]' ). secili ( funksioni () {  
  var $spy = $ ( kjo ). scrollspy ( 'refresh' )
});

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset="".

Ngjarjet

Shembuj skedash

Shtoni funksionalitetin e shpejtë dhe dinamik të skedës për të kaluar nëpër panelet e përmbajtjes lokale, madje edhe përmes menuve me zbritje.

Përdorimi

Aktivizo skedat me skeda përmes JavaScript (secila skedë duhet të aktivizohet individualisht):

$ ( '#myTab a' ). kliko ( funksioni ( e ) {  
  e . preventDefault ();
  $ ( kjo ). tab ( 'shfaq' );
})

Ju mund të aktivizoni skedat individuale në disa mënyra:

$ ( '#myTab a[href="#profile"]' ). tab ( 'shfaq' ); // Zgjidhni skedën sipas emrit 
$ ( '#myTab a:first' ). tab ( 'shfaq' ); // Zgjidhni skedën e parë 
$ ( '#myTab a:last' ). tab ( 'shfaq' ); // Zgjidhni skedën e fundit 
$ ( '#myTab li:eq(2) a' ). tab ( 'shfaq' ); // Zgjidhni skedën e tretë (të indeksuar me 0) 

Markup

Ju mund të aktivizoni navigimin e një skede ose pilule pa shkruar ndonjë JavaScript thjesht duke specifikuar data-toggle="tab"ose data-toggle="pill"mbi një element. Shtimi i klasave navdhe në skedë do të zbatojë stilin e skedës Bootstrap.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Faqja kryesore </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profili </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Mesazhet </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Cilësimet </a></li>  
</ul>

Metodat

$().tab

Aktivizon një element skede dhe një kontenier përmbajtjeje. Skeda duhet të ketë një data-targetose një hrefnyje kontejneri në DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Faqja kryesore </a></li>  
  <li><a href = "#profile" > Profili </a></li> 
  <li><a href = "#messages" > Mesazhet </a></li> 
  <li><a href = "#settings" > Cilësimet </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane aktiv" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<skript>
  $ ( funksioni () {  
    $ ( '#myTab a:last' ). tab ( 'shfaq' );
  })
</script>

Ngjarjet

$ ( 'a[data-toggle="tab"]' ). on ( 'treguar' , funksioni ( e ) {   
  e . objektivi // skeda e aktivizuar
  e . relatedTarget // skeda e mëparshme
})

Shembuj

Frymëzuar nga shtojca e shkëlqyer jQuery.tipsy e shkruar nga Jason Frame; Këshillat e veglave janë një version i përditësuar, i cili nuk mbështetet në imazhe, përdor CSS3 për animacione dhe atribute të të dhënave për ruajtjen lokale të titujve.

Për arsye të performancës, këshilla e veglave dhe të dhënat popover janë zgjedhur, që do të thotë se duhet t'i inicializoni vetë .

Zhvendosni mbi lidhjet e mëposhtme për të parë këshillat e veglave:

Katër drejtime

Këshilla për veglat në grupet hyrëse

Kur përdorni këshilla veglash dhe popover me grupet hyrëse të Bootstrap, do t'ju duhet të vendosni containeropsionin (të dokumentuar më poshtë) për të shmangur efektet anësore të padëshiruara.

Përdorimi

Aktivizoni këshillën e veglave përmes JavaScript:

$ ( '#shembull' ). këshillë veglash ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "fast tooltip" > rri pezull mbi mua </a>   

Metodat

$().tooltip(opsionet)

Bashkangjit një mbajtës udhëzues në një koleksion elementesh.

.tooltip ('shfaq')

Zbulon udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'shfaq' )

.tooltip ('fsheh')

Fsheh udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'fsheh' )

.tooltip ('ndërroj')

Ndryshon udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'ndërrim' )

.tooltip ('shkatërroj')

Fsheh dhe shkatërron udhëzuesin e një elementi.

$ ( '#element' ). këshillë mjeti ( 'shkatërroj' )

Shembuj

Shtoni mbivendosje të vogla të përmbajtjes, si ato në iPad, në çdo element për strehimin e informacionit dytësor. Zhvendosni pezull mbi butonin për të aktivizuar popover-in. Kërkon që të përfshihet këshilla e veglave .

Popover statike

Katër opsione janë të disponueshme: lart, djathtas, poshtë dhe majtas rreshtuar.

Asnjë shënjim i shfaqur pasi popover-et krijohen nga JavaScript dhe përmbajtja brenda një dataatributi.

Demoja e drejtpërdrejtë

Katër drejtime

Përdorimi

Aktivizo popover-et përmes JavaScript:

$ ( '#shembull' ). popover ( opsione )

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-animation="".

Markup

Për arsye të performancës, Tooltip dhe Popover data-apis janë zgjedhur. Nëse dëshironi t'i përdorni ato, thjesht specifikoni një opsion përzgjedhës.

Metodat

$().popover(opsione)

Inicializon popover-et për një koleksion elementesh.

.popover ('shfaqje')

Zbulon një popover elementesh.

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

.popover ('fsheh')

Fsheh një popover elementesh.

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

.popover ('ndërrim')

Aktivizon një popover të elementeve.

$ ( '#element' ). popover ( 'ndërrim' )

.popover ('shkatërroj')

Fsheh dhe shkatërron popoverin e një elementi.

$ ( '#element' ). popover ( "shkatërroj" )

Shembuj sinjalizimesh

Shto funksionin e heqjes dorë në të gjitha mesazhet e alarmit me këtë shtesë.

Përdorimi

Aktivizo heqjen e një sinjalizimi nëpërmjet JavaScript:

$ ( ".alert" ). alarm ()

Markup

Thjesht shtoni data-dismiss="alert"në butonin tuaj të mbylljes për të dhënë automatikisht një funksion të mbylljes së alarmit.

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

Metodat

$().alert()

Mbështjell të gjitha sinjalizimet me funksionalitet të ngushtë. Për t'i animuar sinjalizimet tuaja kur mbyllen, sigurohuni që të kenë aplikuar tashmë klasën .fadedhe .inpër to.

.alert ('mbyll')

Mbyll një alarm.

$ ( ".alert" ). alarmi ( 'mbyll' )

Ngjarjet

Klasa e alarmit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e alarmit.

$ ( '#my-alert' ). bind ( 'mbyllur' , funksioni () {   
  // bej dicka…
})

Shembuj të përdorimeve

Bëni më shumë me butona. Kontrolloni gjendjet e butonit ose krijoni grupe butonash për më shumë komponentë si shiritat e veglave.

Shtetërore

Shto data-loading-text="Loading..."për të përdorur një gjendje ngarkimi në një buton.

<button type = "button" class = "btn btn-primary" data-loading-text = "Po ngarkohet..." > Gjendja e ngarkimit </button>   

Ndërrim i vetëm

Shto data-toggle="button"për të aktivizuar ndërrimin në një buton të vetëm.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Ndërrimi i vetëm </button>   

Kutia e zgjedhjes

Shto data-toggle="buttons-checkbox"për ndryshimin e stilit të kutisë së kontrollit në btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Majtas </button>  
  <button type = "button" class = "btn btn-primary" > Mesme </button>  
  <button type = "button" class = "btn btn-primary" > Djathtas </button>  
</div>

Radio

Shto data-toggle="buttons-radio"për ndryshimin e stilit të radios në btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Majtas </button>  
  <button type = "button" class = "btn btn-primary" > Mesme </button>  
  <button type = "button" class = "btn btn-primary" > Djathtas </button>  
</div>

Përdorimi

Aktivizo butonat përmes JavaScript:

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

Markup

Atributet e të dhënave janë integrale në shtojcën e butonit. Shikoni shembullin e kodit më poshtë për llojet e ndryshme të shënjimit.

Opsione

Asnje

Metodat

$().button('toggle')

Aktivizon gjendjen e shtytjes. I jep butonit pamjen se është aktivizuar.

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

$().button('po ngarkohet')

Vendos gjendjen e butonit në ngarkim - çaktivizon butonin dhe ndërron tekstin me tekstin e ngarkimit. Teksti i ngarkimit duhet të përcaktohet në elementin e butonit duke përdorur atributin e të dhënave data-loading-text.

<button type = "button" class = "btn" data-loading-text = "duke ngarkuar gjëra..." > ... </button>    

$().button('rivendosje')

Rivendos gjendjen e butonit - ndërron tekstin në tekstin origjinal.

$().button(string)

Rivendos gjendjen e butonit - ndërron tekstin në çdo gjendje teksti të përcaktuar nga të dhënat.

<button type = "button" class = "btn" data-complete-text = "mbaruar!" > ... </button>    
<skript>
  $ ( '.btn' ). butoni ( "i plotë" )
</script>

Rreth

Merrni stile bazë dhe mbështetje fleksibël për komponentët e palosshëm si fizarmonikët dhe navigimi.

* Kërkon që të përfshihet shtojca Transitions.

Shembull fizarmonikë

Duke përdorur shtojcën e kolapsit, ne ndërtuam një miniaplikacion të thjeshtë të stilit fizarmonikë:

<div class = "fizarmonikë" id = "fizarmonikë2" >  
  <div class = "fizarmonikë-grup" > 
    <div class = "kreu fizarmonikë" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Artikulli i palosshëm i grupit #1
      </a>
    </div>
    <div id = "collapseOne" class = "kolapsi i trupit të fizarmonikës në" >  
      <div class = "fizarmonikë e brendshme" > 
        Anim pariatur klishe...
      </div>
    </div>
  </div>
  <div class = "fizarmonikë-grup" > 
    <div class = "kreu fizarmonikë" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Artikulli i palosshëm i grupit #2
      </a>
    </div>
    <div id = "collapseTwo" class = "kolapsi i trupit të fizarmonikës" >  
      <div class = "fizarmonikë e brendshme" > 
        Anim pariatur klishe...
      </div>
    </div>
  </div>
</div>
...

Mund ta përdorni gjithashtu shtojcën pa shënjimin e fizarmonikës. Bëni një buton që ndryshon zgjerimin dhe kolapsin e një elementi tjetër.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  e thjeshtë e palosshme
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Përdorimi

Nëpërmjet atributeve të të dhënave

Thjesht shtoni data-toggle="collapse"dhe një data-targetelement për të caktuar automatikisht kontrollin e një elementi të palosshëm. Atributi data-targetpranon një përzgjedhës css për të aplikuar kolapsin. Sigurohuni që të shtoni klasën collapsenë elementin e palosshëm. Nëse dëshironi që të hapet si parazgjedhje, shtoni klasën shtesë in.

Për të shtuar menaxhimin e grupit të ngjashëm me fizarmonikën në një kontroll të palosshëm, shtoni atributin e të dhënave data-parent="#selector". Referojuni demonstrimit për ta parë këtë në veprim.

Përmes JavaScript

Aktivizo manualisht me:

$ ( ".collapse" ). kolaps ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-parent="".

Metodat

.collapse(opsione)

Aktivizon përmbajtjen tuaj si një element i palosshëm. Pranon një opsion opsional object.

$ ( '#myCollapsible' ). kolaps ({
  ndërroj : i rremë 
})

.collapse ('ndërroj')

Ndryshon një element të palosshëm në të shfaqur ose të fshehur.

.collapse ('shfaq')

Tregon një element të palosshëm.

.collapse ('fsheh')

Fsheh një element të palosshëm.

Ngjarjet

Klasa e kolapsit të Bootstrap ekspozon disa ngjarje për t'u lidhur me funksionalitetin e kolapsit.

$ ( '#myCollapsible' ). on ( 'fshehur' , funksion () {   
  // bej dicka…
})

Shembull karuseli

Slideshow më poshtë tregon një shtojcë dhe përbërës të përgjithshëm për kalimin me biçikletë nëpër elementë si një karusel.

Etiketa e parë e miniaturës

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.

Etiketa e dytë e miniaturës

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.

Etiketa e tretë e miniaturës

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 = "rrëshqitje karuseli" >  
  <ol class = "carousel-indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiv" </li>   
    <li data-target = "#myCarousel" data-slide-to = "1" </li>  
    <li data-target = "#myCarousel" data-slide-to = "2" </li>  
  </ol>
  <!-- Artikuj carousel -->
  <div class = "carousel-inner" > 
    <div class = "artikull aktiv" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Navigacion karuseli -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Përdorimi

Nëpërmjet atributeve të të dhënave

Përdorni atributet e të dhënave për të kontrolluar me lehtësi pozicionin e karuselit. data-slidepranon fjalët kyçe prevose next, e cila ndryshon pozicionin e rrëshqitjes në lidhje me pozicionin aktual. Përndryshe, përdorni data-slide-topër të kaluar një indeks të papërpunuar të rrëshqitjes tek karuseli data-slide-to="2", i cili është pozicioni i rrëshqitjes në një indeks të veçantë duke filluar me 0.

Përmes JavaScript

Thirrni karuselin manualisht me:

$ ( '.carousel' ). karusel ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScriptz. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-interval="".

Metodat

.carousel (opsione)

Inicializon karuselin me një opsion opsional objectdhe fillon të lëvizë me biçikletë nëpër artikuj.

$ ( '.carousel' ). karusel ({
  intervali : 2000 
})

.carousel ('cikli')

Ciklet nëpër artikujt e karuselit nga e majta në të djathtë.

.carousel ('pauzë')

Ndalon karuselin të lëvizë me biçikletë nëpër artikuj.

.carousel(numri)

Ciklizon karuselin në një kornizë të caktuar (bazuar në 0, e ngjashme me një grup).

.carousel ('para')

Ciklet në artikullin e mëparshëm.

.carousel ('tjetër')

Ciklet te artikulli tjetër.

Ngjarjet

Klasa e karuselit të Bootstrap ekspozon dy ngjarje për t'u lidhur me funksionalitetin e karuselit.

Shembull

Një shtojcë bazë, e zgjeruar lehtësisht për krijimin e shpejtë të kokave elegante të shkrimit me çdo futje teksti në formë.

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

Ju do të dëshironi të vendosni autocomplete="off"që të parandaloni shfaqjen e menuve të parazgjedhur të shfletuesit në listën rënëse të tipit Bootstrap.

Përdorimi

Nëpërmjet atributeve të të dhënave

Shtoni atributet e të dhënave për të regjistruar një element me funksionalitetin e tipit, siç tregohet në shembullin e mësipërm.

Përmes JavaScript

Thirrni kokën e shkrimit me dorë me:

$ ( '.typeahead' ). shtypshkronjë ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-source="".

Metodat

.typeahead(opsionet)

Inicializon një hyrje me një shtypje.

Shembull

Nënnavigimi në të majtë është një demonstrim i drejtpërdrejtë i shtojcës affix.

Përdorimi

Nëpërmjet atributeve të të dhënave

Për të shtuar lehtësisht sjelljen e ngjitjes në çdo element, thjesht shtoni data-spy="affix"elementin që dëshironi të spiunoni. Më pas përdorni zhvendosjet për të përcaktuar se kur të aktivizoni dhe çaktivizoni fiksimin e një elementi.

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

Përmes JavaScript

Thirrni shtojcën e shtojcës përmes JavaScript:

$ ( '#navbar' ). ngjit ()

Opsione

Opsionet mund të kalohen nëpërmjet atributeve të të dhënave ose JavaScript. Për atributet e të dhënave, shtoni emrin e opsionit në data-, si në data-offset-top="200".