Individuāli vai apkopoti

Spraudņus var iekļaut atsevišķi (lai gan dažiem ir nepieciešamas atkarības) vai visus vienlaikus. Gan bootstrap.js , gan bootstrap.min.js satur visus spraudņus vienā failā.

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ņa 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 savu 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').

Bez konflikta

Dažreiz ir nepieciešams izmantot Bootstrap spraudņus ar citiem lietotāja interfeisa ietvariem. Šādos apstākļos dažkārt var rasties nosaukumtelpas sadursmes. Ja tā notiek, varat izsaukt .noConflictspraudni, kura vērtību vēlaties atjaunot.

var bootstrapButton = $ . fn . pogu . noConflict () // atgriež pogu $.fn. uz iepriekš piešķirto vērtību 
$ . fn . bootstrapBtn = bootstrapButton             // dod $().bootstrapBtn sāknēšanas funkcionalitāti

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 tā pagātnes divdabja forma (piem. shown) tiek aktivizēta, kad darbība ir pabeigta.

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.

<!-- Modāla aktivizēšanas poga -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Palaist demonstrācijas modālu </a>    
 
<!-- Modāls -->
<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 = "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" data-toggle = "dropdown" 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('toggle')

Programmatisks API, lai pārslēgtu izvēlnes 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, lai pārietu 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.

Veiktspējas nolūkos tiek izvēlēts rīka padoms un uznirstošās datu apis, kas nozīmē, ka jums tie ir jāinicializē pašam .

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

Četri virzieni

Rīka padomi ievades grupās

Izmantojot rīka padomus un uznirstošos logus ar Bootstrap ievades grupām, jums ir jāiestata containeropcija (dokumentēta tālāk), lai izvairītos no nevēlamām blakusparādībām.

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

<a href = "#" data-toggle = "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ē

Četri virzieni

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 brīdinājuma 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

Pievienot data-loading-text="Loading...", lai izmantotu pogas 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

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

<button type = "button" class = "btn btn-primary" 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 uz btn-group.

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

Radio

Pievienot data-toggle="buttons-radio"radio stila pārslēgšanai btn-grupā.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Pa kreisi </button>  
  <button type = "button" class = "btn btn-primary" > Vidējā </button>  
  <button type = "button" class = "btn btn-primary" > 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:

<div class = "akordeons" id = "akordeons2" >  
  <div  class = "akordeonu grupa" >
    <div  class = "akordeona virsraksts" >
      <a class = "akordeons-toggle" data-toggle = "sakļauts" data-parent =    "#accordion2" href = "#collapseOne" > 
        Saliekams grupas vienums Nr. 1
      </a>
    </div>
    <div id = "collapseOne" klase   = "akordeona korpusa sabrukšana" >
      <div  class = "akordeons-iekšējais" >
        Anim pariatur klišeja...
      </div>
    </div>
  </div>
  <div class = "akordeonu grupa" >
    <div class = "akordeona virsraksts" >
      <a class = "akordeons-toggle" data-toggle = "sakļauts" data-parent = "#accordion2" href =     "#collapseTwo" >
        Saliekams grupas vienums Nr. 2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordeona korpusa sabrukums" >  
      <div class = "akordeons-iekšējais" > 
        Anim pariatur klišeja...
      </div>
    </div>
  </div>
</div>
...

Varat arī izmantot spraudni bez akordeona marķējuma. Padariet pogu, lai pārslēgtu cita elementa izvēršanu un sakļaušanu.

<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 klasiin .

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" >  
  <ol class = "karuseļa indikatori" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktīvs" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- 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

Izmantojiet datu atribūtus, lai viegli kontrolētu karuseļa pozīciju. data-slidepieņem atslēgvārdus prevvai next, kas maina slaida pozīciju attiecībā pret tā pašreizējo pozīciju. Varat arī izmantot, data-slide-tolai nodotu neapstrādātu slaidu indeksu karuselim data-slide-to="2", kas pārlec slaida pozīciju uz noteiktu indeksu, kas sākas ar 0.

Izmantojot JavaScript

Manuāli izsaukt karuseļu, izmantojot:

$ ( '.karuselis' ). karuselis ()

Iespējas

Opcijas var nodot, izmantojot datu atribūtus vai JavaScriptz. 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" >  

Vēlaties iestatīt autocomplete="off", lai noklusējuma pārlūkprogrammas izvēlnes netiktu rādītas nolaižamajā izvēlnē Bootstrap typeahead.

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" > ... </div>  

Izmantojot JavaScript

Izsauciet afiksa spraudni, izmantojot JavaScript:

$ ( '#navbar' ). pievienot ()

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".