Individualus arba sudarytas

Jei atsisiuntėte naujausią „Bootstrap“ versiją, ir bootstrap.js, ir bootstrap.min.js yra visi šiame puslapyje išvardyti papildiniai.

Duomenų atributai

Visus „Bootstrap“ papildinius galite naudoti tik per žymėjimo API, neįrašydami nė vienos „JavaScript“ eilutės. Tai yra pirmos klasės „Bootstrap“ API ir pirmiausia turėtumėte į tai atsižvelgti, kai naudojate papildinį.

Tačiau kai kuriais atvejais gali būti pageidautina išjungti šią funkciją. Todėl taip pat suteikiame galimybę išjungti duomenų atributo API, atjungiant visus įvykius, esančius pagrindiniame vardų srityje su „data-api“. Tai atrodo taip:

$ ( „kūnas“ ). išjungta ( '.data-api' )

Arba, jei norite taikyti konkretų papildinį, tiesiog įtraukite įskiepių pavadinimą kaip vardų erdvę kartu su data-api vardų erdve, pavyzdžiui:

$ ( „kūnas“ ). išjungta ( '.alert.data-api' )

Programinė API

Taip pat manome, kad turėtumėte turėti galimybę naudoti visus „Bootstrap“ papildinius tik per „JavaScript“ API. Visos viešosios API yra pavieniai, grandininiai metodai ir grąžina rinkinį, pagal kurį buvo imtasi veiksmų.

$ ( ".btn.pavojus" ). mygtuką ( "perjungti" ). addClass ( "riebalai" )

Visi metodai turi priimti pasirenkamų parinkčių objektą, eilutę, kuri taikoma tam tikram metodui, arba nieko (kuris inicijuoja papildinį su numatytuoju elgesiu):

$ ( „#myModal“ ). modal () // inicijuojama pagal numatytuosius nustatymus                       
$ ( „#myModal“ ). modalinis ({ klaviatūra : false }) // inicijuotas be klaviatūros     
$ ( „#myModal“ ). modal ( 'show' ) // iš karto inicijuoja ir iškviečia šou                

Kiekvienas papildinys taip pat atskleidžia neapdorotą konstruktorių ypatybėje „Constructor“: $.fn.popover.Constructor. Jei norite gauti konkretų papildinio egzempliorių, gaukite jį tiesiai iš elemento: $('[rel=popover]').data('popover').

Renginiai

„Bootstrap“ teikia pasirinktinius įvykius daugeliui unikalių papildinio veiksmų. Paprastai jie būna įnagininko ir būtojo laiko formos – kai įnagininkas (pvz. show, ) suaktyvinamas įvykio pradžioje, o būtojo laiko forma (pvz. shown, ) – baigus veiksmą.

Visi begaliniai įvykiai suteikia „preventionDefault“ funkciją. Tai suteikia galimybę sustabdyti veiksmo vykdymą prieš jam pradedant.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    jei (! duomenys ) grąžinti e . preventDefault () // sustabdo modalo rodymą   
})

Apie perėjimus

Norėdami gauti paprastų perėjimo efektų, kartu su kitais JS failais įtraukite bootstrap-transition.js. Jei naudojate sukompiliuotą (arba sumažintą) bootstrap.js, jo įtraukti nereikia – jis jau yra.

Naudojimo atvejai

Keli perėjimo papildinio pavyzdžiai:

• Slydimas arba blukimas modaluose
• Išnyksta skirtukai
• Išnykę įspėjimai
• Stumdomos karuselės stiklai

Pavyzdžiai

Modalai yra supaprastinti, bet lankstūs dialogo raginimai su minimaliomis būtinomis funkcijomis ir išmaniaisiais numatytais nustatymais.

Statinis pavyzdys

Pateiktas modalas su antrašte, turiniu ir veiksmų rinkiniu poraštėje.

<div class = "modalinis paslėptas išnykimas" > 
  <div class = "modalinė antraštė" > 
    <button type = "button" class = "uždaryti" data-dismiss = "modalinis" aria-hidden = "true" > × </button>    
    <h3> Modalinė antraštė </h3>
  </div>
  <div class = "modal-body" > 
    <p> Vienas puikus kūnas... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Uždaryti </a>  
    <a href = "#" class = "btn btn-primary" > Išsaugoti pakeitimus </a>  
  </div>
</div>

Tiesioginė demonstracija

Perjunkite modalą naudodami „JavaScript“ spustelėdami toliau esantį mygtuką. Jis slys žemyn ir išnyks nuo puslapio viršaus.

<-- Modalinio įjungimo mygtukas -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Paleisti demonstracinį modalą </a>    
 
<-- Modalinis -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modalinė antraštė" > 
    <button type = "button" class = "uždaryti" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modalinė antraštė </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Vienas puikus kūnas... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Uždaryti </button>   
    <button class = "btn btn-primary" > Išsaugoti pakeitimus </button> 
  </div>
</div>

Naudojimas

Per duomenų atributus

Suaktyvinkite modalą neįrašę JavaScript. Nustatykite data-toggle="modal"valdiklio elementą, pvz., mygtuką, kartu su data-target="#foo"arba href="#foo", kad nukreiptumėte į konkretų modalą, kad perjungtumėte.

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

Per JavaScript

Iškvieskite modalą su ID myModalsu viena JavaScript eilute:

$ ( '#myModal' ). modalinis ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-backdrop="".

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

Metodai

.modal(parinktys)

Suaktyvina jūsų turinį kaip modalą. Priima pasirenkamas parinktis object.

$ ( '#myModal' ). modalinis ({
  klaviatūra : klaidinga 
})

.modal('toggle')

Rankiniu būdu perjungia modalą.

$ ( '#myModal' ). modalinis ( „perjungti“ )

.modal('show')

Modalą atidaro rankiniu būdu.

$ ( '#myModal' ). modalinis ( „šou“ )

.modal('hide')

Rankiniu būdu paslepia modalą.

$ ( '#myModal' ). modalinis ( „paslėpti“ )

Renginiai

„Bootstrap“ modalinė klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie modalinės funkcijos.

$ ( '#myModal' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Pavyzdžiai

Naudodami šį paprastą papildinį pridėkite išskleidžiamųjų meniu beveik prie bet ko, įskaitant naršymo juostą, skirtukus ir tabletes.

Naršymo juostoje

Skirtukų viduje

Naudojimas

Per duomenų atributus

Pridėkite data-toggle="dropdown"prie nuorodos arba mygtuko, kad perjungtumėte išskleidžiamąjį meniu.

<div class = "išskleidžiamasis sąrašas" > 
  <a class = "dropdown-toggle" href = "#" > Išskleidžiamojo meniu aktyviklis </a>  
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Kad URL nepažeistumėte, naudokite data-targetatributą, o ne href="#".

<div class = "išskleidžiamasis sąrašas" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Išskleidžiamasis meniu
    <b klasė = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "meniu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Per JavaScript

Iškvieskite išskleidžiamuosius meniu naudodami „JavaScript“:

$ ( '.dropdown-toggle' ). išskleidžiamasis meniu ()

Galimybės

Nė vienas

Metodai

$().dropdown()

Programinė API, skirta suaktyvinti tam tikros naršymo juostos arba naršymo skirtukais meniu.

Pavyzdys naršymo juostoje

„ScrollSpy“ papildinys skirtas automatiškai atnaujinti navigacijos taikinius pagal slinkties padėtį. Slinkite po naršymo juosta esančia sritimi ir stebėkite aktyvios klasės pasikeitimą. Taip pat bus paryškinti išskleidžiamieji antriniai elementai.

Naudojimas

Per duomenų atributus

Jei norite lengvai pridėti slinkties elgseną prie viršutinės juostos naršymo, tiesiog pridėkite data-spy="scroll"prie elemento, kurį norite šnipinėti (dažniausiai tai būtų korpusas) ir data-target=".navbar"pasirinkite, kurią naršymą naudoti. Su komponentu norėsite naudoti scrollspy .nav.

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

Per JavaScript

Iškvieskite scrollspy naudodami „JavaScript“:

$ ( '#navbar' ). scrollspy ()

Metodai

.scrollspy('refresh')

Kai naudojate scrollspy kartu su elementų pridėjimu arba pašalinimu iš DOM, turėsite iškviesti atnaujinimo metodą, pavyzdžiui:

$ ( '[data-spy="scroll"]' ). kiekvienas ( funkcija () {  
  var $spy = $ ( tai ). scrollspy ( 'atnaujinti' )
});

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset="".

Renginiai

Skirtukų pavyzdžiai

Pridėkite greitą, dinamišką skirtukų funkciją, kad galėtumėte pereiti per vietinio turinio sritis, net naudodami išskleidžiamuosius meniu.

Naudojimas

Įgalinti skirtukų skirtukus naudodami „JavaScript“ (kiekvieną skirtuką reikia suaktyvinti atskirai):

$ ( '#myTab a' ). spustelėkite ( funkcija ( e ) {  
  e . užkirsti keliąNumatytasis ();
  $ ( tai ). skirtukas ( 'rodyti' );
})

Atskirus skirtukus galite suaktyvinti keliais būdais:

$ ( '#myTab a[href="#profile"]' ). skirtukas ( 'rodyti' ); // Pasirinkite skirtuką pagal pavadinimą 
$ ( '#myTab a:first' ). skirtukas ( 'rodyti' ); // Pasirinkite pirmąjį skirtuką 
$ ( '#myTab a:last' ). skirtukas ( 'rodyti' ); // Pasirinkite paskutinį skirtuką 
$ ( '#myTab li:eq(2) a' ). skirtukas ( 'rodyti' ); // Pasirinkti trečią skirtuką (indeksuotas 0) 

Žymėjimas

Galite suaktyvinti skirtuką arba piliulės naršymą neįrašydami jokio „JavaScript“, tiesiog nurodydami data-toggle="tab"arba data-toggle="pill"ant elemento. Pridėjus navir nav-tabsklases prie skirtuko ulbus taikomas Bootstrap skirtuko stilius.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Pagrindinis </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profilis </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Pranešimai </a></li>  
  <li><a href = "#settings" data-toggle = "skirtukas" > Nustatymai </a></li>  
</ul>

Metodai

$().tab

Suaktyvina skirtuko elementą ir turinio konteinerį. Skirtuko lape turi būti a data-targetarba hrefDOM sudėtinio rodinio mazgas.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktyvus" ><a href = "#home" > Pagrindinis puslapis </a></li>  
  <li><a href = "#profile" > Profilis </a></li> 
  <li><a href = "#messages" > Žinutės </a></li> 
  <li><a href = "#settings" > Nustatymai </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profilis" > ... </div>  
  <div class = "tab-pane" id = "pranešimai" > ... </div>  
  <div class = "tab-pane" id = "nustatymai" > ... </div>  
</div>
 
<script>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). skirtukas ( 'rodyti' );
  })
</script>

Renginiai

$ ( 'a[data-toggle="tab"]' ). on ( 'rodoma' , funkcija ( e ) {   
  e . taikinys // suaktyvintas skirtukas
  e . relatedTarget // ankstesnis skirtukas
})

Pavyzdžiai

Įkvėptas puikaus jQuery.tipsy papildinio, kurį parašė Jason Frame; Patarimai yra atnaujinta versija, kuri nepriklauso nuo vaizdų, naudoja CSS3 animacijai ir duomenų atributus vietiniam pavadinimo saugojimui.

Užveskite pelės žymeklį ant toliau pateiktų nuorodų, kad pamatytumėte patarimus:

Keturios kryptys

Naudojimas

Suaktyvinkite patarimą naudodami „JavaScript“:

$ ( '#pavyzdys' ). patarimas ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

<a href = "#" rel = "tooltip" title = "pirmas patarimas" > užveskite pelės žymeklį virš manęs </a>   

Metodai

$().tooltip(parinktys)

Prie elementų rinkinio prideda patarimo tvarkyklę.

.tooltip('show')

Atskleidžia elemento patarimą.

$ ( „#elementas“ ). patarimas ( „rodyti“ )

.tooltip('hide')

Slepia elemento patarimą.

$ ( „#elementas“ ). patarimas ( "slėpti" )

.tooltip('toggle')

Perjungia elemento patarimą.

$ ( „#elementas“ ). patarimas ( 'perjungti' )

.tooltip('destroy')

Slepia ir sunaikina elemento patarimą.

$ ( „#elementas“ ). patarimas ( „sunaikinti“ )

Pavyzdžiai

Pridėkite mažas turinio perdangas, pvz., esančias „iPad“, prie bet kurio elemento, kad patalpintumėte antrinę informaciją. Užveskite pelės žymeklį virš mygtuko, kad suaktyvintumėte iššokantįjį ekraną. Reikia įtraukti patarimą .

Statinis iššokimas

Galimos keturios parinktys: viršuje, dešinėje, apačioje ir kairėje.

Joks žymėjimas, rodomas kaip iššokantis langas, negeneruojamas iš „JavaScript“ ir dataatributo turinio.

Tiesioginė demonstracija

Naudojimas

Įgalinti iššokančius langus naudojant „JavaScript“:

$ ( '#pavyzdys' ). popover ( parinktys )

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-animation="".

Žymėjimas

Dėl našumo priežasčių pasirenkamas įrankių patarimas ir Popover duomenų apis. Jei norite jas naudoti, tiesiog nurodykite parinkiklio parinktį.

Metodai

$().popover(parinktys)

Inicijuoja elementų rinkinio iššokančius langus.

.popover('show')

Atskleidžia elementų iššokimą.

$ ( „#elementas“ ). popover ( "show" )

.popover('hide')

Slepia elementų iššokimą.

$ ( „#elementas“ ). popover ( „paslėpti“ )

.popover('toggle')

Perjungia elementų iššokimą.

$ ( „#elementas“ ). popover ( 'perjungti' )

.popover('sunaikinti')

Slepia ir sunaikina elemento iššokimą.

$ ( „#elementas“ ). popover ( „sunaikinti“ )

Įspėjimų pavyzdžiai

Su šiuo papildiniu pridėkite atmetimo funkciją prie visų alerginių pranešimų.

Naudojimas

Įgalinti įspėjimo atmetimą naudojant „JavaScript“:

$ ( ".alert" ). įspėjimas ()

Žymėjimas

Tiesiog pridėkite data-dismiss="alert"prie uždarymo mygtuko, kad automatiškai suteiktų įspėjimo uždarymo funkciją.

<a class = "uždaryti" data-dismiss = "alert" href = "#" > × </a>   

Metodai

$().alert()

Apvynioja visus įspėjimus su artima funkcionalumu. Jei norite, kad įspėjimai būtų aktyvūs uždarius, įsitikinkite, kad jiems jau pritaikyta .fadeir .inklasė.

.alert('close')

Uždaro įspėjimą.

$ ( ".alert" ). įspėjimas ( 'uždaryti' )

Renginiai

„Bootstrap“ įspėjimų klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie įspėjimo funkcijų.

$ ( '#mano įspėjimas' ). bind ( 'closed' , function () {   
  // daryk ką nors...
})

Naudojimo pavyzdžiai

Padarykite daugiau naudodami mygtukus. Valdykite mygtukų būsenas arba sukurkite mygtukų grupes daugiau komponentų, pvz., įrankių juostoms.

Valstybinis

Pridėkite data-loading-text="Įkeliama...", jei norite naudoti mygtuko įkėlimo būseną.

<button type = "button" class = "btn btn-primary" data-loading-text = "Įkeliama..." > Įkeliama būsena </button>   

Vienas perjungimas

Pridėkite data-toggle="button", kad suaktyvintumėte perjungimą ant vieno mygtuko.

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

Žymimasis langelis

Pridėkite data-toggle="buttons-checkbox", kad perjungtumėte žymimąjį laukelį btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Kairėn </button>  
  <button type = "button" class = "btn" > Vidurinis </button>  
  <button type = "button" class = "btn" > Dešinėn </button>  
</div>

Radijas

Pridėkite data-toggle="buttons-radio", kad perjungtumėte radijo stilių btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Kairėn </button>  
  <button type = "button" class = "btn" > Vidurinis </button>  
  <button type = "button" class = "btn" > Dešinėn </button>  
</div>

Naudojimas

Įgalinti mygtukus per „JavaScript“:

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

Žymėjimas

Duomenų atributai yra neatsiejami mygtuko papildinio dalis. Peržiūrėkite toliau pateiktą įvairių žymėjimo tipų kodo pavyzdį.

Galimybės

Nė vienas

Metodai

$().button('toggle')

Perjungia stūmimo būseną. Mygtukui atrodo, kad jis buvo suaktyvintas.

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

$().button('kraunama')

Nustato mygtuko būseną į įkėlimą – išjungia mygtuką ir pakeičia tekstą į įkeliamą tekstą. Įkeliamas tekstas turi būti apibrėžtas mygtuko elemente naudojant duomenų atributą data-loading-text.

<button type = "button" class = "btn" data-loading-text = "įkeliama medžiaga..." > ... </button>    

$().button('atstatyti')

Iš naujo nustato mygtuko būseną – pakeičia tekstą į pradinį tekstą.

$().mygtukas(eilutė)

Iš naujo nustato mygtuko būseną – pakeičia tekstą į bet kurią duomenų apibrėžtą teksto būseną.

<button type = "button" class = "btn" data-complete-text = "baigta!" > ... </button>    
<script>
  $ ( '.btn' ). mygtukas ( 'užbaigti' )
</script>

Apie

Gaukite pagrindinius stilius ir lankstų sulankstomų komponentų, pvz., akordeonų ir navigacijos, palaikymą.

* Reikia įtraukti Transitions įskiepį.

Pavyzdys akordeonas

Naudodami sutraukimo papildinį sukūrėme paprastą akordeono stiliaus valdiklį:

<button type = "button" class = "btn btn-danger" data-toggle = "sutraukti" data-target = "#demo" >    
  paprastas sulankstomas
</button>
 
<div id = "demo" class = "sutraukti" > … </div>  

Naudojimas

Per duomenų atributus

Tiesiog pridėkite data-toggle="collapse"ir data-targetprie elemento, kad automatiškai priskirtumėte sulankstomo elemento valdymą. data-targetAtributas priima css parinkiklį, kuriam taikomas sutraukimas . Būtinai pridėkite klasę collapseprie sutraukiamo elemento. Jei norite, kad jis būtų atidarytas pagal numatytuosius nustatymus, pridėkite papildomą klasę in.

Norėdami įtraukti į akordeoną panašų grupės valdymą prie sutraukiamo valdiklio, pridėkite duomenų atributą data-parent="#selector". Norėdami pamatyti, kaip tai veikia, žr. demonstracinę versiją.

Per JavaScript

Įgalinti rankiniu būdu su:

$ ( ".sutraukti" ). griūti ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-parent="".

Metodai

.collapse(parinktys)

Suaktyvina turinį kaip sulankstomą elementą. Priima pasirenkamas parinktis object.

$ ( '#myCollapsible' ). sutraukti ({
  perjungti : klaidinga 
})

.collapse('toggle')

Perjungia sutraukiamą elementą į rodomą arba paslėptą.

.collapse('show')

Rodo sulankstomą elementą.

.collapse('slėpti')

Paslepia sulankstomą elementą.

Renginiai

„Bootstrap“ sutraukimo klasė atskleidžia keletą įvykių, kad būtų galima prisijungti prie sutraukimo funkcijos.

$ ( '#myCollapsible' ). on ( 'slėptas' , funkcija () {   
  // daryk ką nors...
})

Karuselės pavyzdys

Toliau pateiktoje skaidrių demonstracijoje rodomas bendras papildinys ir komponentas, skirtas važiuoti per elementus, pvz., karuselę.

Pirmoji miniatiūros etiketė

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.

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 = "karuselės skaidrė" >  
  <!-- Karuselės elementai -->
  <div class = "carousel-inner" > 
    <div class = "aktyvus elementas" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "ankstesnis" > ‹ </a>   
  <a class = "carousel-control right" href = "#manoKaruselė" data-slide = "kitas" > › </a>   
</div>

Naudojimas

Per duomenų atributus

...

Per JavaScript

Skambinkite į karuselę rankiniu būdu naudodami:

$ ( '.karuselė' ). karuselė ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-interval="".

Metodai

.carousel(parinktys)

Inicijuoja karuselę su pasirenkamomis parinktimis objectir pradeda važiuoti per elementus.

$ ( '.karuselė' ). karuselė ({
  intervalas : 2000 
})

.carousel('cycle')

Važiuoja per karuselės elementus iš kairės į dešinę.

.carousel('pause')

Sustabdo karuselės judėjimą per daiktus.

.carousel(number)

Perkelia karuselę į tam tikrą kadrą (pagrįsta 0, panašiai kaip masyvas).

.carousel('ankstesnis')

Perkeliama į ankstesnį elementą.

.carousel('kitas')

Perkeliama į kitą elementą.

Renginiai

„Bootstrap“ karuselės klasė atskleidžia du įvykius, kad būtų galima prisijungti prie karuselės funkcijų.

Pavyzdys

Pagrindinis, lengvai išplečiamas papildinys, skirtas greitai sukurti elegantiškas antraštes naudojant bet kokios formos teksto įvestį.

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

Naudojimas

Per duomenų atributus

Pridėkite duomenų atributus, kad užregistruotumėte elementą su įžanginio tipo funkcijomis, kaip parodyta anksčiau pateiktame pavyzdyje.

Per JavaScript

Rankiniu būdu iškvieskite antraštę naudodami:

$ ( '.typeahead' ). į priekį ()

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-source="".

Metodai

.typeahead(parinktys)

Inicijuoja įvestį su į priekį.

Pavyzdys

Kairėje esanti subnavigacija yra tiesioginė priedėlio įskiepio demonstracija.

Naudojimas

Per duomenų atributus

Norėdami lengvai pridėti prie bet kurio elemento priedą, tiesiog pridėkite data-spy="affix"prie elemento, kurį norite šnipinėti. Tada naudokite poslinkius, kad nustatytumėte, kada įjungti ir išjungti elemento prisegimą.

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

Per JavaScript

Iškvieskite affix papildinį naudodami „JavaScript“:

$ ( '#navbar' ). pritvirtinti ()

Metodai

.affix('refresh')

Kai naudojate afiksą kartu su elementų pridėjimu arba pašalinimu iš DOM, norėsite iškviesti atnaujinimo metodą:

$ ( '[data-spy="affix"]' ). kiekvienas ( funkcija () {  
  $ ( tai ). pridėti ( 'atnaujinti' )
});

Galimybės

Parinktys gali būti perduodamos naudojant duomenų atributus arba JavaScript. Duomenų atributams pridėkite parinkties pavadinimą prie data-, kaip ir data-offset-top="200".