Individuāli vai apkopoti

Ja esat lejupielādējis jaunāko Bootstrap versiju, gan bootstrap.js , gan bootstrap.min.js ir visi šajā lapā uzskaitītie spraudņi.

Datu atribūti

Varat izmantot visus Bootstrap spraudņus, izmantojot tikai iezīmēšanas API, neierakstot nevienu JavaScript rindiņu. Šī ir Bootstrap pirmās klases API, un, izmantojot spraudni, tam vajadzētu būt pirmajam apsvērumam.

Tomēr dažās situācijās var būt vēlams šo funkcionalitāti izslēgt. Tāpēc mēs arī nodrošinām iespēju atspējot datu atribūta API, atsaistot visus notikumus pamattekstā, kas atrodas nosaukumvietā ar “data-api”. Tas izskatās šādi:

$ ( 'ķermenis' ). izslēgts ( '.data-api' )

Alternatīvi, lai atlasītu konkrētu spraudni, vienkārši iekļaujiet spraudņu nosaukumu kā nosaukumvietu kopā ar datu api nosaukumvietu, piemēram:

$ ( 'ķermenis' ). izslēgts ( '.alert.data-api' )

Programmatiskā API

Mēs arī uzskatām, ka jums vajadzētu būt iespējai izmantot visus Bootstrap spraudņus, tikai izmantojot JavaScript API. Visas publiskās API ir atsevišķas, ķēdējamas metodes, un tās atgriež kolekciju, uz kuru ir veikta darbība.

$ ( ".btn.danger" ). poga ( "pārslēgt" ). addClass ( "tauki" )

Visām metodēm ir jāpieņem neobligāto opciju objekts, virkne, kuras mērķis ir noteikta metode, vai nekas (kas iniciē spraudni ar noklusējuma darbību):

$ ( "#myModal" ). modāls () // inicializēts ar noklusējuma iestatījumiem                       
$ ( "#myModal" ). modāls ({ keyboard : false }) // inicializēts bez tastatūras     
$ ( "#myModal" ). modal ( 'show' ) // nekavējoties inicializē un izsauc šovu                

Katrs spraudnis arī parāda tā neapstrādāto konstruktoru īpašumā Constructor: $.fn.popover.Constructor. Ja vēlaties iegūt konkrētu spraudņa instanci, izgūstiet to tieši no elementa: $('[rel=popover]').data('popover').

Pasākumi

Bootstrap nodrošina pielāgotus notikumus lielākajai daļai spraudņa unikālo darbību. Parasti tie ir infinitīva un pagātnes divdabja formā — kur infinitīvs (piem. show) tiek aktivizēts notikuma sākumā, bet pagātnes divdabja forma (piem. shown) ir aktivizētājs darbības beigās.

Visi infinitīvie notikumi nodrošina preventīvo noklusējuma funkcionalitāti. Tas nodrošina iespēju apturēt darbības izpildi pirms tās sākšanas.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    ja (! dati ) atgriež e . preventDefault () // pārtrauc modāla rādīšanu   
})

Par pārejām

Lai iegūtu vienkāršus pārejas efektus, vienreiz iekļaujiet bootstrap-transition.js kopā ar citiem JS failiem. Ja izmantojat kompilēto (vai samazināto) bootstrap.js, tas nav jāiekļauj — tas jau ir tur.

Lietošanas gadījumi

Daži pārejas spraudņa piemēri:

• Slīdēšana vai izbalēšana modālos
• Cilņu izzušana
• Brīdinājumu izzušana
• Bīdāmās karuseļa rūtis

Piemēri

Modāļi ir racionalizēti, bet elastīgi dialoga uzvednes ar minimālo nepieciešamo funkcionalitāti un viedajiem noklusējuma iestatījumiem.

Statisks piemērs

Renderēts modāls ar galveni, pamattekstu un darbību kopu kājenē.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "aizvērt" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3> Modālā galvene </h3>
  </div>
  <div class = "modal-body" > 
    <p> Viens smalks ķermenis... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Aizvērt </a>  
    <a href = "#" class = "btn btn-primary" > Saglabāt izmaiņas </a>  
  </div>
</div>

Demo tiešraidē

Pārslēdziet modālu, izmantojot JavaScript, noklikšķinot uz tālāk esošās pogas. Tas noslīdēs uz leju un pazudīs no lapas augšdaļas.

<-- Poga modāla aktivizēšanai -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Palaist demonstrācijas modālu </a>    
 
<-- Modāls -->
<div class = "modal" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >      
  <div class = "modal-header" > 
    <button type = "button" class = "aizvērt" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modālā galvene </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Viens smalks ķermenis... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Aizvērt </button>   
    <button class = "btn btn-primary" > Saglabāt izmaiņas </button> 
  </div>
</div>

Lietošana

Izmantojot datu atribūtus

Aktivizējiet modālu, neierakstot JavaScript. Iestatiet data-toggle="modal"kontroliera elementu, piemēram, pogu, kopā ar data-target="#foo"vai href="#foo", lai atlasītu konkrētu modālu, lai pārslēgtu.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Palaist modālu </button>   

Izmantojot JavaScript

Izsauciet modālu ar ID myModalar vienu JavaScript rindiņu:

$ ( '#myModal' ). modāls ( opcijas )

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-backdrop="".

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

Metodes

.modal(options)

Aktivizē jūsu saturu kā modālu. Pieņem izvēles opcijas object.

$ ( '#myModal' ). modāls ({
  tastatūra : viltus 
})

.modal('toggle')

Manuāli pārslēdz modālu.

$ ( '#myModal' ). modāls ( 'pārslēgt' )

.modal('show')

Manuāli atver modālu.

$ ( '#myModal' ). modāls ( 'show' )

.modal('hide')

Manuāli slēpj modālu.

$ ( '#myModal' ). modāls ( 'slēpt' )

Pasākumi

Bootstrap modālā klase atklāj dažus notikumus, lai piesaistītu modālo funkcionalitāti.

$ ( '#myModal' ). on ( 'slēpts' , funkcija () {   
  // dari kaut ko…
})

Piemēri

Pievienojiet nolaižamās izvēlnes gandrīz jebkam, izmantojot šo vienkāršo spraudni, tostarp navigācijas joslu, cilnes un tabletes.

Navigācijas joslā

Cilnēs

Lietošana

Izmantojot datu atribūtus

Pievienojiet data-toggle="dropdown"saitei vai pogai, lai pārslēgtu nolaižamo izvēlni.

<div class = "nolaižamā izvēlne" > 
  <a class = "dropdown-toggle" href = "#" > Nolaižamās izvēlnes aktivizētājs </a>  
  <ul class = "dropdown-menu" role = "izvēlne" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Lai vietrāžus URL saglabātu neskartus, izmantojiet data-targetatribūtu, nevis href="#".

<div class = "nolaižamā izvēlne" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Nomest lejā
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "izvēlne" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Izmantojot JavaScript

Izsauciet nolaižamās izvēlnes, izmantojot JavaScript:

$ ( '.dropdown-toggle' ). nolaižamā izvēlne ()

Iespējas

Nav

Metodes

$().dropdown()

Programmatūras API izvēlņu aktivizēšanai noteiktai navigācijas joslai vai navigācijai ar cilnēm.

Piemērs navigācijas joslā

ScrollSpy spraudnis ir paredzēts automātiskai navigācijas mērķu atjaunināšanai, pamatojoties uz ritināšanas pozīciju. Ritiniet apgabalu zem navigācijas joslas un skatieties, kā mainās aktīvā klase. Tiks izcelti arī nolaižamās izvēlnes apakšvienumi.

Lietošana

Izmantojot datu atribūtus

Lai augšējās joslas navigācijai viegli pievienotu scrollspy darbību, vienkārši pievienojiet data-spy="scroll"elementu, kuru vēlaties izspiegot (parasti tas ir pamatteksts) data-target=".navbar", un atlasiet, kuru navigāciju izmantot. Jūs vēlaties izmantot scrollspy ar .navkomponentu.

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

Izmantojot JavaScript

Izsauciet scrollspy, izmantojot JavaScript:

$ ( '#navbar' ). scrollspy ()

Metodes

.scrollspy('refresh')

Izmantojot scrollspy kopā ar elementu pievienošanu vai noņemšanu no DOM, jums būs jāizsauc atsvaidzināšanas metode, piemēram:

$ ( '[data-spy="scroll"]' ). katrs ( funkcija () {  
  var $spy = $ ( šis ). scrollspy ( 'atsvaidzināt' )
});

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-offset="".

Pasākumi

Cilņu piemēri

Pievienojiet ātru, dinamisku ciļņu funkcionalitāti pārejai caur vietējā satura rūtīm, pat izmantojot nolaižamās izvēlnes.

Lietošana

Iespējot cilnes, kurās var izmantot JavaScript (katra cilne ir jāaktivizē atsevišķi):

$ ( '#myTab a' ). noklikšķiniet ( funkcija ( e ) {  
  e . novērstNoklusējums ();
  $ ( šis ). cilne ( 'rādīt' );
})

Atsevišķas cilnes var aktivizēt vairākos veidos:

$ ( '#myTab a[href="#profile"]' ). cilne ( 'rādīt' ); // Atlasiet cilni pēc nosaukuma 
$ ( '#myTab a:first' ). cilne ( 'rādīt' ); // Atlasiet pirmo cilni 
$ ( '#myTab a:last' ). cilne ( 'rādīt' ); // Atlasīt pēdējo cilni 
$ ( '#myTab li:eq(2) a' ). cilne ( 'rādīt' ); // Atlasīt trešo cilni (indeksēts ar 0) 

Atzīmes

Varat aktivizēt cilni vai tabletes navigāciju, nerakstot JavaScript, vienkārši norādot elementu data-toggle="tab"vai data-toggle="pill"uz tā. Pievienojot cilnei navun nav-tabsklases, ultiks lietots Bootstrap cilnes stils.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Sākums </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profils </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Ziņojumi </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Iestatījumi </a></li>  
</ul>

Metodes

$().tab

Aktivizē cilnes elementu un satura konteineru. Cilnē DOM ir jābūt vai nu konteinera mezglam, data-targetvai tā mērķauditorijas atlasei.href

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Sākums </a></li>  
  <li><a href = "#profile" > Profils </a></li> 
  <li><a href = "#messages" > Ziņojumi </a></li> 
  <li><a href = "#settings" > Iestatījumi </a></li> 
</ul>
 
<div class = "cilnes saturs" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profils" > ... </div>  
  <div class = "tab-pane" id = "ziņojumi" > ... </div>  
  <div class = "tab-pane" id = "iestatījumi" > ... </div>  
</div>
 
<skripts>
  $ ( funkcija () {  
    $ ( '#myTab a:last' ). cilne ( 'rādīt' );
  })
</script>

Pasākumi

$ ( 'a[data-toggle="tab"]' ). on ( ' redzams ' , funkcija ( e ) {   
  e . mērķis // aktivizēta cilne
  e . relatedTarget // iepriekšējā cilne
})

Piemēri

Iedvesmojoties no izcilā spraudņa jQuery.tipsy, ko sarakstījis Džeisons Frame; Rīka padomi ir atjaunināta versija, kas nav atkarīga no attēliem, izmanto CSS3 animācijām un datu atribūtus vietējai nosaukumu glabāšanai.

Virziet kursoru virs tālāk esošajām saitēm, lai skatītu rīka padomus:

Četri virzieni

Lietošana

Aktivizējiet rīka padomu, izmantojot JavaScript:

$ ( '#piemērs' ). rīka padoms ( opcijas )

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Atzīmes

Veiktspējas nolūkos ir izvēlēti Rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

<a href = "#" rel = "tooltip" title = "pirmais rīka padoms" > virziet kursoru virs manis </a>   

Metodes

$().rīka padoms(opcijas)

Elementu kolekcijai pievieno rīku padomu apdarinātāju.

.tooltip('show')

Parāda elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'rādīt' )

.tooltip('slēpt')

Paslēpj elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'slēpt' )

.tooltip('toggle')

Pārslēdz elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'pārslēgt' )

.tooltip('iznīcināt')

Paslēpj un iznīcina elementa rīka padomu.

$ ( '#element' ). rīka padoms ( 'iznīcināt' )

Piemēri

Pievienojiet mazus satura pārklājumus, piemēram, iPad, jebkuram elementam, lai ievietotu sekundāro informāciju. Virziet kursoru virs pogas, lai aktivizētu uznirstošo logu. Nepieciešams iekļaut rīka padomu .

Statisks popover

Ir pieejamas četras opcijas: līdzinājums augšā, pa labi, apakšā un pa kreisi.

Neviens marķējums, kas tiek rādīts kā uznirstošais logs, netiek ģenerēts no JavaScript un satura dataatribūtā.

Demo tiešraidē

Lietošana

Iespējot uznirstošos logus, izmantojot JavaScript:

$ ( '#piemērs' ). popover ( opcijas )

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-animation="".

Atzīmes

Veiktspējas nolūkos ir izvēlēti Rīka padoms un Popover datu apis. Ja vēlaties tos izmantot, vienkārši norādiet atlasītāja opciju.

Metodes

$().popover(options)

Inicializē elementu kolekcijas uznirstošos logus.

.popover('show')

Atklāj elementu popover.

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

.popover('hide')

Slēp elementu uznirstošo logu.

$ ( '#element' ). popover ( 'slēpt' )

.popover('toggle')

Pārslēdz elementu uznirstošo logu.

$ ( '#element' ). popover ( 'pārslēgt' )

.popover('iznīcināt')

Paslēpj un iznīcina elementa uznirstošo logu.

$ ( '#element' ). popover ( 'iznīcināt' )

Brīdinājumu piemēri

Pievienojiet noraidīšanas funkcionalitāti visiem alerge ziņojumiem, izmantojot šo spraudni.

Lietošana

Iespējot brīdinājuma noraidīšanu, izmantojot JavaScript:

$ ( ".alert" ). brīdinājums ()

Atzīmes

Vienkārši pievienojiet data-dismiss="alert"savai aizvēršanas pogai, lai automātiski piešķirtu brīdinājuma aizvēršanas funkcionalitāti.

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

Metodes

$().alert()

Apkopo visus brīdinājumus ar ciešu funkcionalitāti. Lai brīdinājumi tiktu aktivizēti, kad tie ir aizvērti, pārliecinieties, vai tiem jau ir piemērotas kategorijas un .fade..in

.alert('close')

Aizver brīdinājumu.

$ ( ".alert" ). brīdinājums ( 'aizvērt' )

Pasākumi

Bootstrap brīdinājumu klase atklāj dažus notikumus, lai piesaistītu brīdinājuma funkcionalitāti.

$ ( '#mans brīdinājums' ). bind ( 'slēgts' , funkcija () {   
  // dari kaut ko…
})

Izmantošanas piemēri

Padariet vairāk ar pogām. Vadības pogu stāvokļi vai izveidot pogu grupas citiem komponentiem, piemēram, rīkjoslām.

Stateful

Pievienojiet data-loading-text="Notiek ielāde...", lai pogai izmantotu ielādes stāvokli.

<button type = "button" class = "btn btn-primary" data-loading-text = "Notiek ielāde..." > Ielādes stāvoklis </button>   

Viens pārslēgs

Pievienojiet data-toggle="button", lai aktivizētu pārslēgšanu uz vienas pogas.

<button type = "button" class = "btn" data-toggle = "button" > Viena pārslēgšana </button>   

Izvēles rūtiņa

Pievienot data-toggle="buttons-checkbox" izvēles rūtiņas stila pārslēgšanai btn-group.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn" > Pa kreisi </button>  
  <button type = "button" class = "btn" > Vidējā </button>  
  <button type = "button" class = "btn" > Pa labi </button>  
</div>

Radio

Pievienojiet data-toggle="buttons-radio", lai pārslēgtu radio stilu uz btn-group.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn" > Pa kreisi </button>  
  <button type = "button" class = "btn" > Vidējā </button>  
  <button type = "button" class = "btn" > Pa labi </button>  
</div>

Lietošana

Iespējot pogas, izmantojot JavaScript:

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

Atzīmes

Datu atribūti ir pogas spraudņa sastāvdaļa. Apskatiet tālāk sniegto koda piemēru dažādiem iezīmēšanas veidiem.

Iespējas

Nav

Metodes

$().button('toggle')

Pārslēdz push stāvokli. Piešķir pogai tādu izskatu, ka tā ir aktivizēta.

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

$().button('ielādē')

Iestata pogas stāvokli uz ielādi — atspējo pogu un apmaina tekstu ar teksta ielādi. Ielādes teksts ir jādefinē pogas elementā, izmantojot datu atribūtu data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ielādē lietas..." > ... </button>    

$().button('atiestatīt')

Atiestata pogas stāvokli — apmaina tekstu ar sākotnējo tekstu.

$().poga(virkne)

Atiestata pogas stāvokli — maina tekstu uz jebkuru datu definēto teksta stāvokli.

<button type = "button" class = "btn" data-complete-text = "pabeigts!" > ... </button>    
<skripts>
  $ ( '.btn' ). poga ( 'pabeigt' )
</script>

Par

Iegūstiet pamata stilus un elastīgu atbalstu saliekamām sastāvdaļām, piemēram, akordeoniem un navigācijai.

* Nepieciešams iekļaut pāreju spraudni.

Akordeona piemērs

Izmantojot sakļautības spraudni, mēs izveidojām vienkāršu akordeona stila logrīku:

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  vienkārši saliekams
</button>
 
<div id = "demo" class = "sabrukt" > … </div>  

Lietošana

Izmantojot datu atribūtus

Vienkārši pievienojiet data-toggle="collapse"un data-targetelementam, lai automātiski piešķirtu saliekamā elementa vadību. Atribūts data-targetakceptē css atlasītāju, kam lietot sakļauto. Noteikti pievienojiet klasi collapsesaliekamajam elementam. Ja vēlaties, lai tas tiktu atvērts pēc noklusējuma, pievienojiet papildu klasi in.

Lai saliekamai vadīklai pievienotu akordeonam līdzīgu grupu pārvaldību, pievienojiet datu atribūtu data-parent="#selector". Skatiet demonstrāciju, lai redzētu to darbībā.

Izmantojot JavaScript

Iespējot manuāli, izmantojot:

$ ( ".sabrukums" ). sabrukt ()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-parent="".

Metodes

.collapse(options)

Aktivizē jūsu saturu kā saliekamu elementu. Pieņem izvēles opcijas object.

$ ( '#mySaliekams' ). sakļaut ({
  pārslēgt : viltus 
})

.collapse('toggle')

Pārslēdz saliekamo elementu uz parādīto vai paslēpto.

.collapse('show')

Parāda saliekamu elementu.

.collapse('slēpt')

Slēpj saliekamu elementu.

Pasākumi

Bootstrap sabrukšanas klase atklāj dažus notikumus, lai piesaistītu sabrukšanas funkcionalitāti.

$ ( '#mySaliekams' ). on ( 'slēpts' , funkcija () {   
  // dari kaut ko…
})

Piemēra karuselis

Tālāk esošajā slaidrādē ir parādīts vispārējs spraudnis un komponents, kas paredzēts, lai pārvietotos pa tādiem elementiem kā karuselis.

Pirmā sīktēla etiķete

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida un 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 = "karuseļa slaids" >  
  <!-- Karuseļa preces -->
  <div class = "carousel-inner" > 
    <div class = "aktīvs vienums" > … </div> 
    <div class = "prece" > … </div> 
    <div class = "prece" > … </div> 
  </div>
  <!-- Karuseļa nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "iepriekšējā" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "nākamais" > › </a>   
</div>

Lietošana

Izmantojot datu atribūtus

...

Izmantojot JavaScript

Manuāli izsaukt karuseļu, izmantojot:

$ ( '.karuselis' ). karuselis ()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-interval="".

Metodes

.carousel(options)

Inicializē karuseli ar papildu opcijām objectun sāk pārvietoties pa vienumiem.

$ ( '.karuselis' ). karuselis ({
  intervāls : 2000 
})

.carousel('cycle')

Pārvietojas pa karuseļa vienumiem no kreisās puses uz labo.

.carousel('pause')

Neļauj karuselim pārvietoties pa priekšmetiem.

.carousel(number)

Pārvieto karuseli uz noteiktu kadru (0, kas ir līdzīgs masīvam).

.carousel('iepriekšējā')

Pāriet uz iepriekšējo vienumu.

.carousel('next')

Pāriet uz nākamo vienumu.

Pasākumi

Bootstrap karuseļa klase atklāj divus notikumus, lai pievienotos karuseļa funkcionalitātei.

Piemērs

Vienkāršs, viegli paplašināms spraudnis, lai ātri izveidotu elegantas veidlapas ar jebkura veida teksta ievadi.

<ievades veids = "teksts" data-provide = "ierakstīt priekšpusi" >  

Lietošana

Izmantojot datu atribūtus

Pievienojiet datu atribūtus, lai reģistrētu elementu ar priekšraksta funkcionalitāti, kā parādīts iepriekš minētajā piemērā.

Izmantojot JavaScript

Manuāli izsauciet veidlapu, izmantojot:

$ ( '.typeahead' ). uz priekšu ()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-source="".

Metodes

.typeahead(options)

Inicializē ievadi ar ievadrakstu.

Piemērs

Kreisajā pusē esošā apakšnavigācija ir afiksa spraudņa tiešraides demonstrācija.

Lietošana

Izmantojot datu atribūtus

Lai jebkuram elementam viegli pievienotu afiksa darbību, vienkārši pievienojiet data-spy="affix"elementam, kuru vēlaties izspiegot. Pēc tam izmantojiet nobīdes, lai noteiktu, kad jāieslēdz un jāizslēdz elementa piespraušana.

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

Izmantojot JavaScript

Izsauciet afiksa spraudni, izmantojot JavaScript:

$ ( '#navbar' ). pievienot ()

Metodes

.affix('refresh')

Izmantojot afiksu kopā ar elementu pievienošanu vai noņemšanu no DOM, ieteicams izsaukt atsvaidzināšanas metodi:

$ ( '[data-spy="affix"]' ). katrs ( funkcija () {  
  $ ( šis ). afikss ( 'atsvaidzināt' )
});

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScript. Datu atribūtiem pievienojiet opcijas nosaukumu data-, tāpat kā data-offset-top="200".