Individuaalne või koostatud

Pluginaid saab lisada eraldi (kuigi mõnel on vaja sõltuvusi) või kõik korraga. Nii bootstrap.js kui ka bootstrap.min.js sisaldavad kõiki pistikprogramme ühes failis.

Andmete atribuudid

Saate kasutada kõiki Bootstrapi pistikprogramme puhtalt märgistus-API kaudu, kirjutamata ühtegi JavaScripti rida. See on Bootstrapi esmaklassiline API ja see peaks olema pistikprogrammi kasutamisel esimene kaalutlus.

Sellegipoolest võib mõnes olukorras olla soovitav see funktsioon välja lülitada. Seetõttu pakume ka võimalust keelata andmeatribuudi API, tühistades kõik sündmused keha nimeruumis, mille nimiruum on "data-api". See näeb välja selline:

$('body').off('.data-api')( 'keha' ). välja ( '.data-api' )

Teise võimalusena lisage konkreetse pistikprogrammi sihtimiseks lihtsalt pistikprogrammi nimi nimeruumina koos data-api nimeruumiga, näiteks järgmiselt:

$('body').off('.alert.data-api')( 'keha' ). välja ( '.alert.data-api' )

Programmaatiline API

Samuti usume, et peaksite saama kasutada kõiki Bootstrapi pistikprogramme ainult JavaScripti API kaudu. Kõik avalikud API-d on üksikud aheldatavad meetodid ja tagastavad kogu, mille alusel on tegu.

$(.btn.danger").button("toggle").addClass("rasv")( ".btn.oht" ). nupp ( "lülitus" ). addClass ( "rasv" )

Kõik meetodid peaksid aktsepteerima valikuliste suvandite objekti, stringi, mis sihib konkreetset meetodit, või mitte midagi (mis käivitab vaikekäitumisega pistikprogrammi):

$("#myModal").modal() // lähtestatud vaikeväärtustega( "#myModal" ). modaal () // lähtestatud vaikeväärtustega                       
$ ( "#myModal" ). modaalne ({ klaviatuur : false }) // lähtestati ilma klaviatuurita     
$ ( "#myModal" ). modal ( 'show' ) // initsialiseerib ja kutsub esile show kohe                

Iga pistikprogramm avaldab ka oma töötlemata konstruktori atribuudil "Constructor": $.fn.popover.Constructor. Kui soovite hankida konkreetse pistikprogrammi eksemplari, hankige see otse elemendist: $('[rel=popover]').data('popover').

Konflikti pole

Mõnikord on vaja Bootstrapi pistikprogramme kasutada koos teiste kasutajaliidese raamistikega. Sellistel juhtudel võib aeg-ajalt tekkida nimeruumi kokkupõrkeid. Kui see juhtub, võite helistada .noConflictpistikprogrammile, mille väärtust soovite taastada.

var bootstrapButton = $.fn.button.noConflict() // tagastab nupu $.fn. varem määratud väärtuselebootstrapButton = $ . fn . nupp . noConflict () // tagastab nupu $.fn. varem määratud väärtusele 
$ . fn . bootstrapBtn = bootstrapButton             // annab $().bootstrapBtn alglaadimisfunktsiooni

Sündmused

Bootstrap pakub kohandatud sündmusi enamiku pistikprogrammi unikaalsete toimingute jaoks. Üldjuhul on need infinitiivi ja mineviku osastava vormis – kus infinitiiv (nt show) käivitatakse sündmuse alguses ja selle mineviku osastava vorm (nt shown) vallandub tegevuse lõppedes.

Kõik infinitiivsed sündmused pakuvad preventDefault funktsiooni. See annab võimaluse toimingu sooritamine enne selle algust peatada.

$('#myModal').on('show', function (e) {( '#myModal' ). on ( 'show' , function ( e ) {   
    kui (! andmed ) tagasta e . preventDefault () // peatab modaali näitamise   
})

Üleminekute kohta

Lihtsate üleminekuefektide jaoks lisage üks kord teiste JS-failide kõrvale bootstrap-transition.js . Kui kasutate kompileeritud (või minimeeritud) faili bootstrap.js , pole seda vaja lisada – see on juba olemas.

Kasutusjuhtumid

Mõned näited üleminekupluginast:

• Modaalides libisemine või tuhmumine
• Vahelehtede tuhmumine
• Hoiatuste kadumine
• Libistavad karussellipaneelid

Näited

Modaalid on voolujoonelised, kuid paindlikud, minimaalse nõutava funktsionaalsuse ja nutikate vaikeseadetega dialoogiviibad.

Staatiline näide

Renderdatud modaal koos päise, keha ja jaluses olevate toimingute komplektiga.

<div class="modal hide fade"> class = "modal hide fade" >
  <div class = "modal-header" > 
    <button type = "button" class = "sulge" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modaalne päis </h3>
  </div>
  <div class = "modal-body" > 
    <p> Üks hea keha… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Sule </a>  
    <a href = "#" class = "btn btn-primary" > Salvesta muudatused </a>  
  </div>
</div>

Live demo

Lülitage modaal JavaScripti kaudu sisse, klõpsates alloleval nupul. See libiseb alla ja tuhmub lehe ülaosast sisse.

<!-- Modaali käivitamise nupp -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Käivitage demo modaal </a>    
<!-- Modaalne -->
<div id = "myModal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "sulge" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modaalne päis </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Üks hea keha… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Sule </button>   
    <button class = "btn btn-primary" > Salvesta muudatused </button> 
  </div>
</div>

Kasutamine

Andmeatribuutide kaudu

Aktiveerige modaal JavaScripti kirjutamata. Seadistage data-toggle="modal"kontrolleri element, nagu nupp, koos data-target="#foo"või href="#foo", et sihtida ümberlülitamiseks konkreetset modaali.

<button type="button" data-toggle="modal" data-target="#myModal">Käivita modaal</button> type = "button" data-toggle = "modal" data-target = "#myModal" > Käivita modaal </button>  

JavaScripti kaudu

Kutsuge modaali ID myModal-ga ühe JavaScripti reaga:

$('#myModal').modal(valikud)( '#myModal' ). modaalne ( valikud )

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-backdrop="".

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

meetodid

.modal(valikud)

Aktiveerib teie sisu modaalina. Aktsepteerib valikulisi valikuid object.

$('#myModal').modal({( '#myModal' ). modaalne ({
  klaviatuur : vale 
})

.modal('toggle')

Lülitab modaali käsitsi ümber.

$('#myModal').modal('toggle')( '#myModal' ). modaalne ( 'lülitus' )

.modal('show')

Avab modaali käsitsi.

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

.modal('hide')

Peidab modaali käsitsi.

$('#myModal').modal('hide')( '#myModal' ). modaalne ( 'peida' )

Sündmused

Bootstrapi modaalklass paljastab mõned sündmused modaalse funktsionaalsusega ühendamiseks.

$('#myModal').on('hidden', function () {( '#myModal' ). on ( 'peidetud' , funktsioon () {   
  // tee midagi…
})

Näited

Lisage selle lihtsa pistikprogrammi abil rippmenüüd peaaegu kõigele, sealhulgas navigeerimisribale, vahelehtedele ja tablettidele.

Naviriba sees

Vahekaartide sees

Kasutamine

Andmeatribuutide kaudu

Lisage data-toggle="dropdown"lingile või nupule rippmenüü sisselülitamiseks.

<div class="dropdown"> klass = "rippmenüü" >
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Rippmenüü päästik </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

URL-ide muutmiseks kasutage data-targetatribuuti href="#".

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

JavaScripti kaudu

Kutsuge rippmenüüd JavaScripti kaudu:

$('.dropdown-toggle').dropdown()( '.dropdown-toggle' ). rippmenüü ()

Valikud

Mitte ühtegi

meetodid

$().dropdown('toggle')

Programmiline API antud navigeerimisriba või vahekaartidega navigeerimise menüüde vahetamiseks.

Näide navigeerimisribal

ScrollSpy pistikprogramm on mõeldud navigeerimissihtmärkide automaatseks värskendamiseks kerimisasendi alusel. Kerige navigeerimisriba all olevat ala ja vaadake aktiivse klassi muutumist. Samuti tõstetakse esile rippmenüü alamüksused.

Kasutamine

Andmeatribuutide kaudu

Scrollspy käitumise hõlpsaks lisamiseks oma ülariba navigeerimisele lisage lihtsalt data-spy="scroll"element, mida soovite luurata (tavaliselt on see keha) ja data-target=".navbar"valige, millist navigeerimisseadet kasutada. Sooviksite komponendiga kasutada scrollspy-d .nav.

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

JavaScripti kaudu

Helista scrollspyle JavaScripti kaudu:

$('#navbar').scrollspy()( '#navbar' ). scrollspy ()

meetodid

.scrollspy('refresh')

Kui kasutate scrollspy-d koos DOM-i elementide lisamise või eemaldamisega, peate välja kutsuma värskendusmeetodi järgmiselt:

$('[data-spy="scroll"]').each(function () {( '[data-spy="scroll"]' ). iga ( funktsioon () {  
  var $spy = $ ( see ). scrollspy ( 'värskenda' )
});

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset="".

Sündmused

Näidisvahekaardid

Lisage kiire ja dünaamilise vahekaardi funktsionaalsus, et liikuda läbi kohaliku sisu paanide, isegi rippmenüüde kaudu.

Kasutamine

Lubage vahekaartide vahekaardid JavaScripti kaudu (iga vahekaart tuleb eraldi aktiveerida):

$('#myTab a').click(function (e) {( '#myTab a' ). kliki ( funktsioon ( e ) {  
  e . preventDefault ();
  $ ( see ). sakk ( 'näita' );
})

Üksikuid vahekaarte saate aktiveerida mitmel viisil.

$('#myTab a[href="#profile"]').tab('show'); // Valige vahekaart nime järgi( '#myTab a[href="#profile"]' ). sakk ( 'näita' ); // Valige vahekaart nime järgi 
$ ( '#myTab a:first' ). sakk ( 'näita' ); // Valige esimene vahekaart 
$ ( '#myTab a:last' ). sakk ( 'näita' ); // Viimase vahekaardi valimine 
$ ( '#myTab li:eq(2) a' ). sakk ( 'näita' ); // Valige kolmas vahekaart (0-indekseeritud) 

Märgistus

Saate aktiveerida vahelehe või pilli navigeerimise ilma JavaScripti kirjutamata, lihtsalt elemendi täpsustades data-toggle="tab"või peal. Klasside ja vahekaardile data-toggle="pill"lisamine rakendab Bootstrapi vahekaardi stiili.navnav-tabsul

<ul class="nav nav-tabs"> class = "nav nav-tabs" >
  <li><a href = "#home" data-toggle = "tab" > Avaleht </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profiil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Sõnumid </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Seaded </a></li>  
</ul>

meetodid

$().tab

Aktiveerib vahekaardi elemendi ja sisu konteineri. Vahekaardil peaks olema DOM-is kas konteineri sõlm data-targetvõi sihtimispunkt.href

<ul class="nav nav-tabs" id="myTab"> class = "nav nav-tabs" id = "myTab" > 
  <li class = "aktiivne" ><a href = "#home" > Avaleht </a></li>  
  <li><a href = "#profile" > Profiil </a></li> 
  <li><a href = "#messages" > Sõnumid </a></li> 
  <li><a href = "#settings" > Seaded </a></li> 
</ul>
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "kodu" > ... </div>  
  <div class = "tab-pane" id = "profiil" > ... </div>  
  <div class = "tab-pane" id = "sõnumid" > ... </div>  
  <div class = "tab-pane" id = "seaded" > ... </div>  
</div>
<script>
  $ ( funktsioon () {  
    $ ( '#myTab a:last' ). sakk ( 'näita' );
  })
</script>

Sündmused

$('a[data-toggle="tab"]').on('shown', function (e) {( 'a[data-toggle="tab"]' ). on ( 'näidatud' , funktsioon ( e ) {   
  e . sihtmärk // aktiveeritud vahekaart
  e . relatedTarget // eelmine vahekaart
})

Näited

Inspireeritud suurepärasest jQuery.tipsy pistikprogrammist, mille on kirjutanud Jason Frame; Tööriistavihjed on värskendatud versioon, mis ei tugine piltidele, kasutavad animatsioonide jaoks CSS3 ja kohaliku pealkirja salvestamiseks andmeatribuute.

Toimivuse huvides on tööriistavihje ja hüpikandmete apis lubatud, mis tähendab, et peate need ise lähtestama .

Tööriistanäpunäidete nägemiseks hõljutage kursorit allolevate linkide kohal.

Neli suunda

Tööriistanäpunäited sisestusrühmades

Kui kasutate tööriistavihjeid ja hüpikaknaid koos Bootstrapi sisendrühmadega, peate containersoovimatute kõrvalmõjude vältimiseks määrama suvandi (dokumenteeritud allpool).

Kasutamine

Käivitage kohtspikker JavaScripti kaudu:

$('#example').tööriistavihje(valikud)( '#näide' ). tööriistavihje ( valikud )

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Märgistus

<a href="#" data-toggle="tooltip" title="first tooltip">hõljutage kursorit minu kohal</a> href = "#" data-toggle = "tooltip" title = "esimene tööriistavihje" > hõljutage kursorit minu kohal </a>  

meetodid

$().tööriista vihje(valikud)

Kinnitab elemendikogule tööriistaspikri töötleja.

.tooltip('show')

Näitab elemendi kohtspikri.

$('#element').tooltip('show')( '#element' ). tööriistavihje ( 'näita' )

.tooltip('hide')

Peidab elemendi kohtspikri.

$('#element').tooltip('hide')( '#element' ). tööriistavihje ( 'peida' )

.tooltip('toggle')

Lülitab elemendi kohtspikri.

$('#element').tooltip('toggle')( '#element' ). tööriistavihje ( 'lülitamine' )

.tooltip('hävita')

Peidab ja hävitab elemendi kohtspikri.

$('#element').tooltip('hävita')( '#element' ). tööriistavihje ( 'hävitada' )

Näited

Lisage sekundaarse teabe paigutamiseks mis tahes elemendile väikesed sisu ülekatted, nagu iPadis. Hüpikakna käivitamiseks hõljutage kursorit nupu kohal. Nõuab tööriistavihje kaasamist.

Staatiline hüpikakna

Saadaval on neli valikut: ülemine, parem, alumine ja vasakule joondatud.

JavaScriptist ja atribuudi sisust ei genereerita hüpikakena kuvatavaid märgistusi data.

Live demo

Neli suunda

Kasutamine

Luba hüpikaknad JavaScripti kaudu:

$('#example').popover(valikud)( '#näide' ). popover ( valikud )

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-animation="".

Märgistus

Toimivuse huvides on tööriistavihje ja Popoveri andmeapis lubatud. Kui soovite neid kasutada, määrake lihtsalt valija.

meetodid

$().popover(valikud)

Initsialiseerib hüpikaknad elemendikogu jaoks.

.popover('show')

Ilmutab elementide hüpikakna.

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

.popover('hide')

Peidab elementide hüpikakna.

$('#element').popover('hide')( '#element' ). popover ( 'peida' )

.popover('toggle')

Lülitab elementide hüpikakna sisse.

$('#element').popover('toggle')( '#element' ). hüpikakna ( 'lülita' )

.popover('hävitada')

Peidab ja hävitab elemendi hüpikakna.

$('#element').popover('hävita')( '#element' ). popover ( 'hävitada' )

Näidishoiatused

Lisage selle pistikprogrammiga kõikidele hoiatusteadetele loobumisfunktsioon.

Kasutamine

Lubage märguande tühistamine JavaScripti kaudu:

$ ( ".alert" ). hoiatus ()

Märgistus

Lihtsalt lisage data-dismiss="alert"oma sulgemisnupule, et anda automaatselt hoiatuse sulgemise funktsioon.

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

meetodid

$().alert()

Pakub kõik hoiatused tiheda funktsionaalsusega. Kui soovite, et teie hoiatused suletuks muutuksid, veenduge, et neile oleks juba rakendatud klass .fadeja ..in

.alert('close')

Sulgeb hoiatuse.

$ ( ".alert" ). hoiatus ( 'sulge' )

Sündmused

Bootstrapi hoiatusklass paljastab mõned sündmused hoiatusfunktsiooniga ühendamiseks.

$ ( '#minu märguanne' ). bind ( 'suletud' , funktsioon () {   
  // tee midagi…
})

Kasutusnäited

Tehke nuppudega rohkem. Juhtnupu olekud või nupurühmade loomine rohkemate komponentide, näiteks tööriistaribade jaoks.

Riigitu

Lisa data-loading-text="Loading...", et kasutada nupul laadimisolekut.

<button type = "button" class = "btn btn-primary" data-loading-text = "Laadimine..." > Laadimisolek </button>   

Üks lüliti

Lisa data-toggle="button", et aktiveerida ühe nupu sisselülitamine.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Üks lüliti </button>   

Märkeruut

Lisa data-toggle="buttons-checkbox"btn-groupi stiilide sisselülitamiseks.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Vasak </button>  
  <button type = "button" class = "btn btn-primary" > Keskmine </button>  
  <button type = "button" class = "btn btn-primary" > Parem </button>  
</div>

Raadio

Lisa data-toggle="buttons-radio"raadiostiili ümberlülitamiseks btn-grupis.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Vasak </button>  
  <button type = "button" class = "btn btn-primary" > Keskmine </button>  
  <button type = "button" class = "btn btn-primary" > Parem </button>  
</div>

Kasutamine

Luba nupud JavaScripti kaudu:

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

Märgistus

Andmete atribuudid on nupuplugina lahutamatud. Erinevate märgistustüüpide kohta vaadake allolevat näidiskoodi.

Valikud

Mitte ühtegi

meetodid

$().button('toggle')

Lülitab tõukeoleku sisse. Annab nupule välimuse, nagu see oleks aktiveeritud.

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

$().button('laadimine')

Määrab nupu oleku laadimiseks – keelab nupu ja vahetab teksti teksti laadimiseks. Laaditav tekst tuleks nupu elemendil määratleda andmete atribuudi abil data-loading-text.

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

$().button('reset')

Lähtestab nupu oleku – vahetab teksti algteksti vastu.

$().button(string)

Lähtestab nupu oleku – vahetab teksti mis tahes andmetega määratletud teksti olekusse.

<button type = "button" class = "btn" data-complete-text = "valmis!" > ... </button>    
<script>
  $ ( '.btn' ). nupp ( 'lõpeta' )
</script>

Umbes

Hankige põhistiile ja paindlikku tuge kokkupandavatele komponentidele, nagu akordionid ja navigeerimine.

* Nõuab üleminekute pistikprogrammi kaasamist.

Akordioni näide

Ahendamise pistikprogrammi abil koostasime lihtsa akordioni stiilis vidina:

<div class = "akordion" id = "akordion2" >  
  <div class = "akordionirühm" > 
    <div class = "akordioni pealkiri" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Kokkupandav rühmaüksus nr 1
      </a>
    </div>
    <div id = "collapseOne" class = "akordioni keha kokkuvarisemine" >  
      <div class = "akordioni sisemine" > 
        Anim pariatur klišee...
      </div>
    </div>
  </div>
  <div class = "akordionirühm" > 
    <div class = "akordioni pealkiri" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Kokkupandav rühmaüksus nr 2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordioni keha kokkuvarisemine" >  
      <div class = "akordioni sisemine" > 
        Anim pariatur klišee...
      </div>
    </div>
  </div>
</div>
...

Pluginat saate kasutada ka ilma akordioni märgistuseta. Lülitage nupp teise elemendi laiendamise ja ahendamise vahel.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  lihtne kokkupandav
</button>
 
<div id = "demo" class = "ahendama" > … </div>  

Kasutamine

Andmeatribuutide kaudu

Lihtsalt lisage element data-toggle="collapse"ja a data-target, et määrata kokkupandava elemendi juhtimine automaatselt. Atribuut data-targetaktsepteerib ahendamise rakendamiseks css-valijat. Kindlasti lisage klass collapsekokkupandavale elemendile. Kui soovite, et see oleks vaikimisi avatud, lisage täiendav klass in.

Akordionilaadse rühmahalduse lisamiseks kokkupandavale juhtelemendile lisage andmete atribuut data-parent="#selector". Selle tegevuse nägemiseks vaadake demo.

JavaScripti kaudu

Luba käsitsi:

$ ( ".collapse" ). kokku kukkuma ()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-parent="".

meetodid

.collapse(valikud)

Aktiveerib teie sisu kokkupandava elemendina. Aktsepteerib valikulisi valikuid object.

$ ( '#myCollapsible' ). kollaps ({
  lülita : vale 
})

.collapse('toggle')

Lülitab kokkupandava elemendi kuvatud või peidetud olekuks.

.collapse('show')

Näitab kokkupandavat elementi.

.collapse('hide')

Peidab kokkupandava elemendi.

Sündmused

Bootstrapi ahendamisklass paljastab mõned sündmused, mis on seotud ahendamise funktsiooniga.

$ ( '#myCollapsible' ). on ( 'peidetud' , funktsioon () {   
  // tee midagi…
})

Näidiskarussell

Allolev slaidiseanss näitab üldist pistikprogrammi ja komponenti elementide, näiteks karusselli vahel liikumiseks.

Esimene pisipildi silt

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

Teine pisipildi silt

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

Kolmas pisipildi silt

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

‹ ›

<div id = "myCarousel" class = "karusselli slaid" >  
  <ol class = "karussell-indikaatorid" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiivne" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karusselli esemed -->
  <div class = "carousell-inner" > 
    <div class = "aktiivne üksus" > … </div> 
    <div class = "üksus" > … </div> 
    <div class = "üksus" > … </div> 
  </div>
  <!-- Karussell nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "eelmine" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "järgmine" > › </a>   
</div>

Kasutamine

Andmeatribuutide kaudu

Kasutage karusselli asukoha hõlpsaks juhtimiseks andmeatribuute. data-slideaktsepteerib märksõnu prevvõi next, mis muudab slaidi asukohta selle praeguse asukoha suhtes. Teise võimalusena kasutage data-slide-totöötlemata slaidiindeksi edastamiseks karussellile data-slide-to="2", mis hüppab slaidi positsioonilt konkreetsele indeksile, mis algab tähega 0.

JavaScripti kaudu

Helistage karusselli käsitsi, kasutades:

$ ( '.karussell' ). karussell ()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-interval="".

meetodid

.carousell(valikud)

Lähtestab karusselli valikuliste valikutega objectja hakkab üksuste vahel ringi liikuma.

$ ( '.karussell' ). karussell ({
  intervall : 2000 
})

.carousel('cycle')

Liigub läbi karusselli üksuste vasakult paremale.

.carousel('pause')

Peatab karusselli esemete vahel liikumise.

.carousel(number)

Liigutab karusselli konkreetse kaadri juurde (0-põhine, sarnane massiiviga).

.carousel('eelmine')

Liigub eelmise üksuse juurde.

.carousel('next')

Liigub järgmise üksuse juurde.

Sündmused

Bootstrapi karusselliklass paljastab kaks sündmust karusselli funktsioonidega liitumiseks.

Näide

Lihtne ja hõlpsasti laiendatav pistikprogramm elegantsete trükipeade kiireks loomiseks mis tahes vormis tekstisisestusega.

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

Soovite määrata autocomplete="off", et brauseri vaikemenüüd ei kuvataks Bootstrap typeahead rippmenüüs.

Kasutamine

Andmeatribuutide kaudu

Lisage andmeatribuudid, et registreerida element, millel on kirjasõna, nagu on näidatud ülaltoodud näites.

JavaScripti kaudu

Helistage trükisõna käsitsi, kasutades:

$ ( '.typeahead' ). kirjuta ette ()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-source="".

meetodid

.typeahead(options)

Initsialiseerib sisendi esikirjaga.

Näide

Vasakpoolne alamnavigeerimine on lisandmooduli reaalajas demo.

Kasutamine

Andmeatribuutide kaudu

Mis tahes elemendile afiksi käitumise hõlpsaks lisamiseks lisage lihtsalt data-spy="affix"element, mida soovite luurata. Seejärel kasutage nihkeid, et määrata, millal elemendi kinnitamine sisse ja välja lülitada.

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

JavaScripti kaudu

Kutsuge afiksi pistikprogrammi JavaScripti kaudu:

$ ( '#navbar' ). lisa ()

Valikud

Valikud saab edastada andmeatribuutide või JavaScripti kaudu. Andmeatribuutide jaoks lisage valiku nimi data-, nagu data-offset-top="200".