Individuaj aŭ kompilitaj

Kromaĵoj povas esti inkluzivitaj individue (kvankam kelkaj havas postulatajn dependecojn), aŭ ĉiuj samtempe. Kaj bootstrap.js kaj bootstrap.min.js enhavas ĉiujn kromaĵojn en ununura dosiero.

Datumaj atributoj

Vi povas uzi ĉiujn Bootstrap-kromaĵojn nur per la markada API sen skribi ununuran linion de JavaScript. Ĉi tio estas la unuaklasa API de Bootstrap kaj devus esti via unua konsidero kiam vi uzas kromprogramon.

Dirite, en iuj situacioj eble estos dezirinde malŝalti ĉi tiun funkcion. Sekve, ni ankaŭ provizas la kapablon malŝalti la datuman atributon API malligante ĉiujn eventojn sur la korpo nomspacigita per `'data-api'`. Ĉi tio aspektas jene:

$ ( 'korpo' ). off ( '.data-api' )

Alternative, por celi specifan kromaĵon, simple inkluzivu la nomon de la kromaĵo kiel nomspacon kune kun la data-api nomspaco jene:

$ ( 'korpo' ). off ( '.alert.data-api' )

Programa API

Ni ankaŭ kredas, ke vi devus povi uzi ĉiujn Bootstrap kromaĵojn nur per la JavaScript API. Ĉiuj publikaj API-oj estas unuopaj, ĉeneblaj metodoj, kaj resendas la kolekton pri kiu reagis.

$ ( ".btn.danĝero" ). butono ( "ŝaltilo" ). addClass ( "graso" )

Ĉiuj metodoj devas akcepti laŭvolan opcian objekton, ĉenon kiu celas apartan metodon, aŭ nenion (kiu iniciatas kromprogramon kun defaŭlta konduto):

$ ( "#miaModalo" ). modalo () // pravigita kun defaŭltoj                       
$ ( "#miaModalo" ). modala ({ klavaro : falsa }) // pravigita sen klavaro     
$ ( "#miaModalo" ). modalo ( 'montri' ) // pravalorigas kaj alvokas montri tuj                

Ĉiu kromaĵo ankaŭ elmontras sian krudan konstruktilon sur `Konstruisto` posedaĵo: $.fn.popover.Constructor. Se vi ŝatus ricevi apartan kromprogramon, reakiru ĝin rekte de elemento: $('[rel=popover]').data('popover').

Neniu Konflikto

Kelkfoje necesas uzi Bootstrap-kromaĵojn kun aliaj UI-kadroj. En tiuj cirkonstancoj, nomspackolizioj povas foje okazi. Se tio okazas, vi povas alvoki .noConflictla kromprogramon, pri kiu vi volas reverti la valoron.

var bootstrapButton = $ . fn . butono . noConflict () // resendas $.fn.buton al antaŭe asignita valoro 
$ . fn . bootstrapBtn = bootstrapButton             // donas $().bootstrapBtn la botostrap-funkciecon

Eventoj

Bootstrap provizas kutimajn eventojn por la plej unikaj agoj de kromaĵo. Ĝenerale, tiuj venas en infinitiva kaj preterito participo - kie la infinitivo (ekz. show) estas ekigita ĉe la komenco de okazaĵo, kaj ĝia preterito participformo (ekz. shown) estas ellasilo sur la kompletigo de ago.

Ĉiuj infinitivaj eventoj provizas preventDefault-funkcion. Ĉi tio disponigas la kapablon ĉesigi la ekzekuton de ago antaŭ ol ĝi komenciĝas.

$ ( '#miaModalo' ). on ( 'montri' , funkcio ( e ) {   
    se (! datumoj ) redonas e . preventDefault () // ĉesigas modalon esti montrita   
})

Pri transiroj

Por simplaj transiraj efikoj, inkludu bootstrap-transition.js unufoje kune kun la aliaj JS-dosieroj. Se vi uzas la kompilitan (aŭ minimumigitan) bootstrap.js , ne necesas inkluzivi ĉi tion—ĝi jam estas tie.

Uzkazoj

Kelkaj ekzemploj de la transira kromaĵo:

• Glitado aŭ velkado en modaloj
• Forvelkantaj langetoj
• Forvelkantaj alarmoj
• Glitantaj karuselaj vitroj

Ekzemploj

Modaloj estas fluliniaj, sed flekseblaj, dialogaj instigoj kun la minimuma postulata funkcieco kaj inteligentaj defaŭltoj.

Statika ekzemplo

Farita modalo kun kaplinio, korpo kaj aro de agoj en la piedlinio.

<div class = "modala kaŝa fade" > 
  <div class = "modala-kapo" > 
    <button type = "button" class = "fermi" data-dismiss = "modala" aria-hidden = "vera" > × </butono>    
    <h3> Modala kaplinio </h3>
  </div>
  <div class = "modala-korpo" > 
    <p> Unu bela korpo... </p>
  </div>
  <div class = "modala-piedo" > 
    <a href = "#" class = "btn" > Fermi </a>  
    <a href = "#" class = "btn btn-primary" > Konservi ŝanĝojn </a>  
  </div>
</div>

Viva demonstraĵo

Ŝaltu modalon per JavaScript alklakante la suban butonon. Ĝi glitos malsupren kaj velkos de la supro de la paĝo.

<!-- Butono por ekigi modala -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Lanĉi demonstran modalon </a>    
 
<!-- Modala -->
<div id = "myModal" class = "modala kaŝa fade" tabindex = "-1" rolo = "dialogo" aria-labelledby = "myModalLabel" aria-hidden = "vera" >      
  <div class = "modala-kapo" > 
    <button type = "button" class = "fermi" data-dismiss = "modala" aria-hidden = "vera" > × </button>    
    <h3 id = "myModalLabel" > Modala kaplinio </h3> 
  </div>
  <div class = "modala-korpo" > 
    <p> Unu bela korpo... </p>
  </div>
  <div class = "modala-piedo" > 
    <button class = "btn" data-dismiss = "modala" aria-hidden = "vera" > Fermi </button>   
    <button class = "btn btn-primary" > Konservi ŝanĝojn </button> 
  </div>
</div>

Uzado

Per datumaj atributoj

Aktivigu modalon sen skribi JavaScript. Agordu data-toggle="modal"sur regila elemento, kiel butono, kune kun data-target="#foo"aŭ href="#foo"por celi specifan modalon por ŝanĝi.

<button type = "button" data-toggle = "modala" data-target = "#myModal" > Lanĉi modalon </button>   

Per JavaScript

Voku modalon kun id myModalkun ununura linio de JavaScript:

$ ( '#miaModalo' ). modalo ( opcioj )

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-backdrop="".

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

Metodoj

.modal(opcioj)

Aktivigas vian enhavon kiel modalon. Akceptas laŭvolajn opciojn object.

$ ( '#miaModalo' ). modalo ({
  klavaro : falsa 
})

.modal('ŝanĝu')

Mane ŝanĝas modalon.

$ ( '#miaModalo' ). modala ( 'ŝalti' )

.modal('montri')

Mane malfermas modalon.

$ ( '#miaModalo' ). modalo ( 'montri' )

.modal('kaŝi')

Mane kaŝas modalon.

$ ( '#miaModalo' ). modalo ( 'kaŝi' )

Eventoj

La modala klaso de Bootstrap elmontras kelkajn eventojn por hoki al modala funkcieco.

$ ( '#miaModalo' ). on ( 'kaŝita' , funkcio () {   
  // fari ion…
})

Ekzemploj

Aldonu falmenuojn al preskaŭ io ajn per ĉi tiu simpla kromaĵo, inkluzive de la navigadbreto, langetoj kaj piloloj.

Ene de navbar

Ene de langetoj

Uzado

Per datumaj atributoj

Aldonu data-toggle="dropdown"al ligilo aŭ butono por ŝanĝi falmenuon.

<div klaso = "menumenumo" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown ellasilo </a>   
  <ul class = "dropdown-menu" rolo = "menuo" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Por konservi URL-ojn sendifektaj, uzu la data-targetatributon anstataŭ href="#".

<div klaso = "menumenumo" > 
  <a class = "dropdown-toggle" id = "dLabel" rolo = "butono" data-toggle = "menumenumo" data-target = "#" href = "/page.html" >      
    Dropdown
    <b klaso = "karto" ></b> 
  </a>
  <ul class = "dropdown-menu" rolo = "menuo" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Per JavaScript

Voku la menuojn per JavaScript:

$ ( '.dropdown-toggle' ). falmenuo ()

Opcioj

Neniu

Metodoj

$().dropdown('ŝaltu')

Programa api por ŝanĝi menuojn por antaŭfiksita navbar aŭ klapeta navigado.

Ekzemplo en navbar

La ScrollSpy kromaĵo estas por aŭtomate ĝisdatigi nav-celojn bazitajn sur rulpozicio. Rulumu la areon sub la navbar kaj rigardu la aktivan klasŝanĝon. La submenuaj suberoj ankaŭ estos reliefigitaj.

Uzado

Per datumaj atributoj

Por facile aldoni scrollspy-konduton al via supra navigado, simple aldonu data-spy="scroll"al la elemento, kiun vi volas spioni (plej kutime ĉi tio estus la korpo) kaj data-target=".navbar"elektu kiun navigacion uzi. Vi volas uzi scrollspy kun .navkomponanto.

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

Per JavaScript

Voku la scrollspy per JavaScript:

$ ( '#navbaro' ). scrollspy ()

Metodoj

.scrollspy('refreŝigi')

Kiam vi uzas scrollspy kune kun aldono aŭ forigo de elementoj de la DOM, vi devos nomi la refreŝigan metodon tiel:

$ ( '[data-spy="scroll"]' ). ĉiu ( funkcio () {  
  var $spiono = $ ( ĉi ). scrollspy ( 'refreŝigi' )
});

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset="".

Eventoj

Ekzemplaj langetoj

Aldonu rapidan dinamikan langeton por transiri tra paneloj de loka enhavo, eĉ per falmenuoj.

Uzado

Ebligu tabulajn langetojn per JavaScript (ĉiu langeto devas esti aktivigita individue):

$ ( '#miaTab a' ). klaku ( funkcio ( e ) {  
  e . preventDefault ();
  $ ( ĉi ). langeto ( 'montri' );
})

Vi povas aktivigi individuajn langetojn en pluraj manieroj:

$ ( '#miaTab a[href="#profilo"]' ). langeto ( 'montri' ); // Elektu langeton laŭ nomo 
$ ( '#miaTab a:unue' ). langeto ( 'montri' ); // Elektu la unuan langeton 
$ ( '#miaTab a:lasta' ). langeto ( 'montri' ); // Elektu lastan langeton 
$ ( '#miaTab li:eq(2) a' ). langeto ( 'montri' ); // Elektu la trian langeton (0-indeksitan) 

Markado

Vi povas aktivigi langeton aŭ pilolan navigadon sen skribi JavaScript per simple specifi data-toggle="tab"aŭ data-toggle="pill"sur elemento. Aldonante la navkaj nav-tabsklasojn al la langeto ulaplikos la stilon de la langeto Bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hejmo </a></li>  
  <li><a href = "#profile" data-toggle = "langeto" > Profilo </a></li>  
  <li><a href = "#messages" data-toggle = "langeto" > Mesaĝoj </a></li>  
  <li><a href = "#settings" data-toggle = "langeto" > Agordoj </a></li>  
</ul>

Metodoj

$().tab

Aktivigas langeto-elementon kaj enhavujon. Tab devus havi aŭ a data-targetaŭ hrefcelanta ujo-nodon en la DOM.

<ul class = "nav nav-tabs" id = "miaTab" >  
  <li class = "aktiva" ><a href = "#home" > Hejmo </a></li>  
  <li><a href = "#profile" > Profilo </a></li> 
  <li><a href = "#messages" > Mesaĝoj </a></li> 
  <li><a href = "#settings" > Agordoj </a></li> 
</ul>
 
<div class = "tab-enhavo" > 
  <div class = "tab-pane active" id = "hejmo" > ... </div>  
  <div class = "tab-pane" id = "profilo" > ... </div>  
  <div class = "tab-pane" id = "mesaĝoj" > ... </div>  
  <div class = "tab-pane" id = "agordoj" > ... </div>  
</div>
 
<skripto>
  $ ( funkcio () {  
    $ ( '#miaTab a:lasta' ). langeto ( 'montri' );
  })
</script>

Eventoj

$ ( 'a[data-toggle="tab"]' ). on ( 'montrita' , funkcio ( e ) {   
  e . celo // aktivigita langeto
  e . rilataCelo // antaŭa langeto
})

Ekzemploj

Inspirite de la bonega jQuery.tipsy kromaĵo verkita de Jason Frame; Konsiletoj estas ĝisdatigita versio, kiu ne dependas de bildoj, uzas CSS3 por kuraĝigoj kaj datumoj-atributoj por loka titolstokado.

Pro agado-kialoj, la konsileto kaj popover-datum-apis estas elekteblaj, tio signifas, ke vi devas pravigi ilin mem .

Ŝvebu super la subaj ligiloj por vidi konsiletojn:

Kvar direktoj

Konsiletoj en enigogrupoj

Kiam vi uzas konsiletojn kaj popovers kun la eniggrupoj de Bootstrap, vi devos agordi la container(dokumentitan sube) opcion por eviti nedeziratajn kromefikojn.

Uzado

Ekfunkciigu la konsileton per JavaScript:

$ ( '#ekzemplo' ). konsileto ( opcioj )

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Markado

<a href = "#" data-toggle = "tooltip" title = "unua konsileto" > ŝvebi super mi </a>   

Metodoj

$(). konsileto (opcioj)

Alligas konsileton pritraktilon al elementkolekto.

.tooltip('montri')

Rivelas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'montri' )

.tooltip('kaŝi')

Kaŝas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'kaŝi' )

.tooltip('ŝanĝu')

Ŝaltas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'ŝalti' )

.tooltip('detruu')

Kaŝas kaj detruas la konsileton de elemento.

$ ( '#elemento' ). konsileto ( 'detruu' )

Ekzemploj

Aldonu malgrandajn tegaĵojn de enhavo, kiel tiuj sur la iPad, al iu ajn elemento por loĝigi malĉefajn informojn. Ŝvebu super la butono por ekigi la popover. Postulas konsileton por esti inkluzivita.

Senmova popover

Kvar opcioj estas disponeblaj: supro, dekstre, malsupre kaj maldekstre vicigitaj.

Neniu markado montrita ĉar popovers estas generitaj de JavaScript kaj enhavo ene de dataatributo.

Viva demonstraĵo

Kvar direktoj

Uzado

Ebligu popovers per JavaScript:

$ ( '#ekzemplo' ). popover ( opcioj )

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-animation="".

Markado

Pro kaŭzoj de rendimento, la Tooltip kaj Popover-datum-apis elektas. Se vi ŝatus uzi ilin, nur specifu elektan opcion.

Metodoj

$().popover(opcioj)

Inicializas popovers por elemento kolekto.

.popover('montri')

Rivelas elementojn popover.

$ ( '#elemento' ). popover ( 'montri' )

.popover('kaŝi')

Kaŝas elementojn popover.

$ ( '#elemento' ). popover ( 'kaŝi' )

.popover('ŝaltu')

Ŝaltas popover de elementoj.

$ ( '#elemento' ). popover ( 'ŝalti' )

.popover('detruu')

Kaŝas kaj detruas la popover de elemento.

$ ( '#elemento' ). popover ( 'detrui' )

Ekzemplaj atentigoj

Aldonu malakceptan funkcion al ĉiuj atentaj mesaĝoj per ĉi tiu kromaĵo.

Uzado

Ebligu malakcepton de atentigo per JavaScript:

$ ( ".alerto" ). atentiga ()

Markado

Nur aldonu data-dismiss="alert"al via fermbutono por aŭtomate doni atentan proksiman funkcion.

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

Metodoj

$().alerto()

Envolvas ĉiujn atentigojn kun proksima funkcio. Por ke viaj atentigoj animiĝu kiam fermite, certigu, ke ili havas la klason .fadekaj .injam aplikita al ili.

.alert('fermi')

Fermas alarmon.

$ ( ".alerto" ). atentigo ( 'fermi' )

Eventoj

La atentiga klaso de Bootstrap elmontras kelkajn eventojn por aliĝi al atentiga funkcieco.

$ ( '#mia-atentigo' ). bind ( 'fermita' , funkcio () {   
  // fari ion…
})

Ekzemplaj uzoj

Faru pli per butonoj. Kontrolu butonajn ŝtatojn aŭ kreu grupojn de butonoj por pli da komponantoj kiel ilobretoj.

Stateful

Aldonu data-loading-text="Loading..."por uzi ŝarĝan staton sur butono.

<button type = "button" class = "btn btn-primary" data-loading-text = "Ŝargante..." > Ŝarĝante staton </button>   

Ununura baskulo

Aldonu data-toggle="button"por aktivigi baskulon sur ununura butono.

<button type = "button" class = "btn btn-primary" data-toggle = "butono" > Ununura Ŝaltilo </button>   

Markobutono

Aldonu data-toggle="buttons-checkbox"por markobutono-stilo ŝanĝanta sur btn-grupo.

<div class = "btn-group" data-toggle = "butonoj-markbutono" >  
  <button type = "button" class = "btn btn-primary" > Maldekstre </button>  
  <button type = "button" class = "btn btn-primary" > Meza </button>  
  <button type = "button" class = "btn btn-primary" > Dekstre </button>  
</div>

Radio

Aldonu data-toggle="buttons-radio"por radiostilo ŝanĝanta sur btn-grupo.

<div class = "btn-group" data-toggle = "butonoj-radio" >  
  <button type = "button" class = "btn btn-primary" > Maldekstre </button>  
  <button type = "button" class = "btn btn-primary" > Meza </button>  
  <button type = "button" class = "btn btn-primary" > Dekstre </button>  
</div>

Uzado

Ebligu butonojn per JavaScript:

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

Markado

Datumaj atributoj estas integritaj al la butonaldonaĵo. Rigardu la ekzemplokodon sube por la diversaj markadaj tipoj.

Opcioj

Neniu

Metodoj

$().button('ŝaltu')

Ŝaltigas puŝan staton. Donas al la butono la aspekton, ke ĝi estas aktivigita.

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

$().button('ŝarĝante')

Agordas butonan staton al ŝarĝo - malŝaltas butonon kaj interŝanĝas tekston al ŝarĝo de teksto. Ŝargado de teksto devus esti difinita sur la butonelemento uzante la datuman atributon data-loading-text.

<button type = "button" class = "btn" data-loading-text = "ŝargi aĵojn..." > ... </button>    

$().button('restarigi')

Restarigas butonan staton - interŝanĝas tekston al originala teksto.

$().butono(ŝnuro)

Restarigas butonan staton - interŝanĝas tekston al iu ajn datuma difinita teksto-stato.

<button type = "button" class = "btn" data-complete-text = "finita!" > ... </butono>    
<skripto>
  $ ( '.btn' ). butono ( 'kompleta' )
</script>

Pri

Akiru bazajn stilojn kaj flekseblan subtenon por faldeblaj komponantoj kiel akordionoj kaj navigado.

* Postulas la transirojn aldonaĵon esti inkluzivita.

Ekzemplo akordiono

Uzante la kolapsan kromaĵon, ni konstruis simplan akordionstilan fenestraĵon:

<div class = "akordiono" id = "akordiono2" >  
  <div class = "akordiongrupo" > 
    <div class = "akordion-titolo" > 
      <a class = "accordion-toggle" data-toggle = "kolapso" data-parent = "#accordion2" href = "#collapseOne" >    
        Faldebla Grupo Ero #1
      </a>
    </div>
    <div id = "collapseOne" class = "akordion-korpa kolapso en" >  
      <div class = "akordiono-interna" > 
        Anim pariatur kliŝo...
      </div>
    </div>
  </div>
  <div class = "akordiongrupo" > 
    <div class = "akordion-titolo" > 
      <a class = "accordion-toggle" data-toggle = "kolapso" data-parent = "#accordion2" href = "#kolapsoDu" >    
        Faldebla Grupo Ero #2
      </a>
    </div>
    <div id = "collapseTwo" class = "akordion-korpa disfalo" >  
      <div class = "akordiono-interna" > 
        Anim pariatur kliŝo...
      </div>
    </div>
  </div>
</div>
...

Vi ankaŭ povas uzi la kromprogramon sen la akordiona markado. Faru butonon ŝanĝi la disvastigon kaj kolapson de alia elemento.

<button type = "button" class = "btn btn-danger" data-toggle = "kolapsi" data-target = "#demo" >    
  simpla faldebla
</butono>
 
<div id = "demo" class = "kolapsi" > … </div>  

Uzado

Per datumaj atributoj

Nur aldonu data-toggle="collapse"kaj data-targetal elementon por aŭtomate atribui kontrolon de faldebla elemento. La data-targetatributo akceptas css-elektilon al kiu apliki la kolapson. Nepre aldonu la klason collapseal la faldebla elemento. Se vi ŝatus, ke ĝi defaŭlte malfermu, aldonu la aldonan klason in.

Por aldoni akordion-similan grupadministradon al faldebla kontrolo, aldonu la datuman atributon data-parent="#selector". Riferu al la demo por vidi ĉi tion en ago.

Per JavaScript

Ebligu permane per:

$ ( ".kolapso" ). kolapsi ()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-parent="".

Metodoj

.kolapso(opcioj)

Aktivigas vian enhavon kiel faldebla elemento. Akceptas laŭvolajn opciojn object.

$ ( '#miaKlasebla' ). kolapsi ({
  toggle : malvera 
})

.kolapso('ŝalti')

Ŝaltas faldebla elemento al montrita aŭ kaŝita.

.kolapso('montri')

Montras faldeblan elementon.

.kolapso('kaŝi')

Kaŝas faldeblan elementon.

Eventoj

La kolapsoklaso de Bootstrap elmontras kelkajn eventojn por hoki en kolapfunkciecon.

$ ( '#miaKlasebla' ). on ( 'kaŝita' , funkcio () {   
  // fari ion…
})

Ekzemplo karuselo

La suba bildoprezento montras ĝeneralan kromaĵon kaj komponanton por bicikli tra elementoj kiel karuselo.

Unua Bildeto-etikedo

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 = "karusela glitado" >  
  <ol class = "karuselo-indikiloj" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiva" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karuselaj eroj -->
  <div class = "karuselo-interna" > 
    <div class = "aktiva ero" > … </div> 
    <div class = "ero" > … </div> 
    <div class = "ero" > … </div> 
  </div>
  <!-- Karuselo nav -->
  <a class = "karusel-control left" href = "#myCarousel" data-slide = "antaŭa" > ‹ </a>   
  <a class = "karusel-control right" href = "#myCarousel" data-slide = "sekva" > › </a>   
</div>

Uzado

Per datumaj atributoj

Uzu datumajn atributojn por facile kontroli la pozicion de la karuselo. data-slideakceptas la ŝlosilvortojn prevaŭ next, kiu ŝanĝas la glitpozicion rilate al ĝia nuna pozicio. Alternative, uzu data-slide-topor transdoni krudan glitan indekson al la karuselo data-slide-to="2", kiu salto estas la glita pozicio al aparta indekso komencanta per 0.

Per JavaScript

Voku karuselon mane per:

$ ( '.karuselo' ). karuselo ()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScriptz. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-interval="".

Metodoj

.karuselo(opcioj)

Komencas la karuselon kun laŭvolaj opcioj objectkaj komencas bicikli tra eroj.

$ ( '.karuselo' ). karuselo ({
  intervalo : 2000 
})

.karuselo('ciklo')

Biciklas tra la karuselaj eroj de maldekstre dekstren.

.karuselo('paŭzo')

Maldaŭrigas la karuselon de bicikli tra eroj.

.karuselo(nombro)

Biciklas la karuselon al aparta kadro (bazita 0, simile al tabelo).

.karuselo('antaŭa')

Ciklas al la antaŭa ero.

.karuselo('sekva')

Bicikloj al la sekva ero.

Eventoj

La karuselklaso de Bootstrap elmontras du okazaĵojn por hokado en karuselfunkciecon.

Ekzemplo

Baza, facile etendita kromaĵo por rapide krei elegantajn tajpaĵojn kun ajna formo de teksto-enigo.

<input type = "text" data-provide = "tajpu antaŭe" >  

Vi volas agordi autocomplete="off"malhelpi defaŭltajn foliumilojn aperu super la menuo Bootstrap typeahead.

Uzado

Per datumaj atributoj

Aldonu datumajn atributojn por registri elementon kun tajpa funkcieco kiel montrite en la supra ekzemplo.

Per JavaScript

Voku la tajpu antaŭe permane per:

$ ( '.typeahead' ). tajpu antaŭe ()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-source="".

Metodoj

.typeahead(opcioj)

Inicialigas enigaĵon per tajpu antaŭen.

Ekzemplo

La subnavigado maldekstre estas reala demo de la afiksa kromaĵo.

Uzado

Per datumaj atributoj

Por facile aldoni afiksan konduton al iu ajn elemento, simple aldonu data-spy="affix"al la elemento, kiun vi volas spioni. Poste uzu ofsetojn por difini kiam ŝalti kaj malŝalti la alpinglon de elemento.

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

Per JavaScript

Voku la afiksan kromprogramon per JavaScript:

$ ( '#navbaro' ). afikso ()

Opcioj

Opcioj povas esti pasitaj per datumaj atributoj aŭ JavaScript. Por datumaj atributoj, aldonu la opcionomon al data-, kiel en data-offset-top="200".