Egyéni vagy összeállított

A beépülő modulok egyenként is beépíthetők (bár némelyikhez függőségek szükségesek), vagy egyszerre is. A bootstrap.js és a bootstrap.min.js is egyetlen fájlban tartalmazza az összes beépülő modult.

Adatattribútumok

Az összes Bootstrap beépülő modult kizárólag a jelölő API-n keresztül használhatja anélkül, hogy egyetlen sornyi JavaScriptet is írna. Ez a Bootstrap első osztályú API-ja, és a beépülő modul használatakor ez az első szempont.

Ennek ellenére bizonyos helyzetekben kívánatos lehet ezt a funkciót kikapcsolni. Ezért lehetőséget biztosítunk az adatattribútum API letiltására is a `'data-api'` névtér törzsében található összes esemény kötésének megszüntetésével. Ez így néz ki:

$ ( 'test' ). ki ( '.data-api' )

Alternatív megoldásként egy adott beépülő modul megcélzásához egyszerűen adja meg a beépülő modul nevét névtérként a data-api névtér mellett, így:

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

Programozott API

Úgy gondoljuk, hogy az összes Bootstrap beépülő modult tisztán a JavaScript API-n keresztül használhatja. Minden nyilvános API egyetlen, láncolható metódus, és visszaadja a gyűjteményt.

$ ( ".btn.veszély" ). gomb ( "váltó" ). addClass ( "zsír" )

Minden metódusnak el kell fogadnia egy opcionális opciós objektumot, egy karakterláncot, amely egy adott metódust céloz, vagy semmit (amely alapértelmezett viselkedésű beépülő modult indít):

$ ( "#myModal" ). modális () // alapértelmezésekkel inicializálva                       
$ ( "#myModal" ). modális ({ billentyűzet : false }) // billentyűzet nélkül inicializálva     
$ ( "#myModal" ). modal ( 'show' ) // azonnal inicializálja és meghívja a show-t                

Minden beépülő modul egy "Constructor" tulajdonságon is megjeleníti a nyers konstruktorát: $.fn.popover.Constructor. Ha egy adott bővítménypéldányt szeretne lekérni, kérje le közvetlenül egy elemből: $('[rel=popover]').data('popover').

Nincs konfliktus

Néha szükséges a Bootstrap beépülő modulok használata más UI keretrendszerekkel. Ilyen körülmények között időnként előfordulhatnak névtér-ütközések. Ha ez megtörténik, hívhatja azt .noConflicta beépülő modult, amelynek az értékét vissza szeretné állítani.

var bootstrapButton = $ . fn . gomb . noConflict () // a $.fn.button visszaállítása a korábban hozzárendelt értékre 
$ . fn . bootstrapBtn = bootstrapButton             // megadja a $().bootstrapBtn-nek a bootstrap funkciót

Események

A Bootstrap egyéni eseményeket biztosít a legtöbb plugin egyedi műveletéhez. Általában ezek infinitivus és múlttag alakban fordulnak elő - ahol az infinitivus (pl. show) egy esemény kezdetén, a múltbeli igenév alakja (pl. shown) pedig egy cselekvés befejezésekor vált ki.

Minden infinitive esemény preventDefault funkciót biztosít. Ez lehetővé teszi egy művelet végrehajtásának leállítását, mielőtt az elindulna.

$ ( '#myModal' ). on ( 'show' , function ( e ) {   
    if (! adat ) return e . preventDefault () // leállítja a modális megjelenítést   
})

Az átmenetekről

Az egyszerű átmeneti effektusok érdekében egyszer szerepeljen a bootstrap-transition.js fájl a többi JS-fájl mellett. Ha a lefordított (vagy kicsinyített) bootstrap.js fájlt használja , akkor ezt nem kell belefoglalnia – már ott van.

Használati esetek

Néhány példa az átmeneti bővítményre:

• Csúszás vagy fakulás modálisan
• Eltűnik a lapok
• Elhalványuló figyelmeztetések
• Csúszó körhinta ablaktáblák

Példák

A modálok egyszerűsített, de rugalmas párbeszédpanelek a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

Statikus példa

Renderelt modális fejléccel, törzstel és a láblécben található műveletek halmazával.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "bezárás" data-dismiss = "modal" aria-hidden = "igaz" > × </button>    
    <h3> Modális fejléc </h3>
  </div>
  <div class = "modal-body" > 
    <p> Egy szép test… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Bezárás </a>  
    <a href = "#" class = "btn btn-primary" > Módosítások mentése </a>  
  </div>
</div>

Élő demó

Az alábbi gombra kattintva válthat át egy modált JavaScript segítségével. Lecsúszik, és elhalványul az oldal tetejétől.

<!-- Modális indító gomb -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Modal bemutató indítása </a>    
 
<!-- Modális -->
<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 = "close" data-dismiss = "modal" aria-hidden = "true" > × </button>    
    <h3 id = "myModalLabel" > Modális fejléc </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Egy szép test… </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Bezárás </button>   
    <button class = "btn btn-primary" > Módosítások mentése </button> 
  </div>
</div>

Használat

Adatattribútumokon keresztül

Aktiválja a modált JavaScript írása nélkül. Állítsa data-toggle="modal"be a vezérlőelemet, például egy gombot, a data-target="#foo"vagy a gombbal együtt, href="#foo"hogy egy adott módot célozzon a váltáshoz.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal indítása </button>   

JavaScripten keresztül

Hívjon egy modált azonosítóval myModalegyetlen soros JavaScripttel:

$ ( '#myModal' ). modális ( opciók )

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-backdrop="".

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

Mód

.modal(opciók)

Aktiválja a tartalmat modálisként. Elfogad egy opcionális opciót object.

$ ( '#myModal' ). modális ({
  billentyűzet : false 
})

.modal('toggle')

Manuálisan vált egy módot.

$ ( '#myModal' ). modális ( 'toggle' )

.modal('show')

Manuálisan megnyit egy modált.

$ ( '#myModal' ). modális ( 'show' )

.modal('hide')

Manuálisan elrejti a modált.

$ ( '#myModal' ). modális ( 'elrejtés' )

Események

A Bootstrap modális osztálya felfed néhány eseményt a modális funkciókhoz való kapcsolódáshoz.

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // csinálj valamit…
})

Példák

Ezzel az egyszerű bővítménnyel szinte bármihez hozzáadhat legördülő menüket, beleértve a navigációs sávot, a lapokat és a tablettákat.

Egy navigációs sávon belül

A lapokon belül

Használat

Adatattribútumokon keresztül

Hozzáadás data-toggle="dropdown"hivatkozáshoz vagy gombhoz a legördülő menü váltásához.

<div class = "legördülő menü" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Legördülő menü aktiválása </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Az URL-ek érintetlenségének megőrzéséhez használja az data-targetattribútumot a helyett href="#".

<div class = "legördülő menü" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html" >      
    Ledob
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

JavaScripten keresztül

A legördülő menük meghívása JavaScripten keresztül:

$ ( '.dropdown-toggle' ). legördülő menü ()

Lehetőségek

Egyik sem

Mód

$().dropdown('toggle')

Programozott API egy adott navigációs sáv vagy lapos navigáció menüinek váltásához.

Példa a navigációs sávban

A ScrollSpy beépülő modul a navigációs célok automatikus frissítésére szolgál a görgetés pozíciója alapján. Görgessen a navigációs sáv alatti területen, és figyelje az aktív osztály változását. A legördülő alelemek is kiemelve lesznek.

Használat

Adatattribútumokon keresztül

A scrollspy viselkedés egyszerű hozzáadásához a felső sáv navigációjához egyszerűen adja hozzá data-spy="scroll"azt az elemet, amely után kémkedni szeretne (leggyakrabban ez a törzs), és data-target=".navbar"válassza ki, hogy melyik navigációt használja. Használja a scrollspy-t egy .navösszetevővel.

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

JavaScripten keresztül

Hívja a scrollspy-t JavaScript-en keresztül:

$ ( '#navbar' ). scrollspy ()

Mód

.scrollspy('refresh')

Ha a scrollspy-t a DOM-elemek hozzáadásával vagy eltávolításával együtt használja, meg kell hívnia a frissítési metódust, például:

$ ( '[data-spy="scroll"]' ). mindegyik ( függvény () {  
  var $spy = $ ( ez ). scrollspy ( 'frissítés' )
});

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset="".

Események

Példalapok

Adjon hozzá gyors, dinamikus lapfunkciókat a helyi tartalom paneljei közötti váltáshoz, akár legördülő menük segítségével is.

Használat

Lapozható lapok engedélyezése JavaScript segítségével (minden lapot külön kell aktiválni):

$ ( '#myTab a' ). kattintás ( függvény ( e ) {  
  e . preventDefault ();
  $ ( ez ). lap ( 'megjelenítés' );
})

Az egyes lapokat többféleképpen is aktiválhatja:

$ ( '#myTab a[href="#profile"]' ). lap ( 'megjelenítés' ); // Lap kiválasztása név szerint 
$ ( '#myTab a:first' ). lap ( 'megjelenítés' ); // Válassza ki az első fület 
$ ( '#myTab a:last' ). lap ( 'megjelenítés' ); // Utolsó lap kiválasztása 
$ ( '#myTab li:eq(2) a' ). lap ( 'megjelenítés' ); // Harmadik lap kiválasztása (0-indexelt) 

Jelölés

Aktiválhat egy fület vagy tabletta navigációt anélkül, hogy JavaScriptet írna, egyszerűen megadva data-toggle="tab"vagy data-toggle="pill"egy elemen. Ha hozzáadja a navés nav-tabsosztályokat a laphoz ul, akkor a Bootstrap lapstílus érvényesül.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Főoldal </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Üzenetek </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Beállítások </a></li>  
</ul>

Mód

$().tab

Aktivál egy tabulátor elemet és tartalomtárolót. A lapon egy data-targetvagy egy tárolócsomópontot kell hrefcélozni a DOM-ban.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "aktív" ><a href = "#home" > Kezdőlap </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Üzenetek </a></li> 
  <li><a href = "#settings" > Beállítások </a></li> 
</ul>
 
<div class = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profil" > ... </div>  
  <div class = "tab-pane" id = "üzenetek" > ... </div>  
  <div class = "tab-pane" id = "beállítások" > ... </div>  
</div>
 
<script>
  $ ( függvény () {  
    $ ( '#myTab a:last' ). lap ( 'megjelenítés' );
  })
</script>

Események

$ ( 'a[data-toggle="tab"]' ). on ( 'shown' , function ( e ) {   
  e . cél // aktivált lap
  e . relatedTarget // előző lap
})

Példák

A Jason Frame által írt kiváló jQuery.tipsy plugin ihlette; Az eszköztippek egy frissített verzió, amely nem támaszkodik képekre, CSS3-at használ az animációkhoz, és adatattribútumokat a helyi címtároláshoz.

A teljesítmény érdekében az eszköztipp és a popover data-apis be van kapcsolva, vagyis Önnek kell inicializálnia őket .

Az eszköztippek megtekintéséhez vigye az egérmutatót az alábbi linkekre:

Négy irány

Eszköztippek beviteli csoportokban

Ha eszköztippeket és előugró ablakokat használ a Bootstrap beviteli csoportokkal, be kell állítania az container(alább dokumentált) opciót a nem kívánt mellékhatások elkerülése érdekében.

Használat

Az elemleírás aktiválása JavaScripten keresztül:

$ ( '#example' ). eszköztipp ( opciók )

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Jelölés

<a href = "#" data-toggle = "tooltip" title = "első eszköztipp" > mutasson rám </a>   

Mód

$(). tooltip(opciók)

Eszköztipp-kezelőt csatol egy elemgyűjteményhez.

.tooltip('show')

Megjeleníti egy elem elemleírását.

$ ( '#elem' ). eszköztipp ( 'show' )

.tooltip('hide')

Elrejti az elem elemleírását.

$ ( '#elem' ). eszköztipp ( 'elrejtés' )

.tooltip('toggle')

Bekapcsolja az elem elemleírását.

$ ( '#elem' ). eszköztipp ( 'toggle' )

.tooltip('destroy')

Elrejti és megsemmisíti egy elem elemleírását.

$ ( '#elem' ). eszköztipp ( 'megsemmisítés' )

Példák

Adjon hozzá kis tartalomfedvényeket, például az iPaden lévőket, bármely másodlagos információ tárolására szolgáló elemhez. Vigye az egérmutatót a gomb fölé a popover aktiválásához. Szükséges az eszköztipp hozzáadása.

Statikus popover

Négy lehetőség áll rendelkezésre: felül, jobb, alsó és balra igazítva.

dataA JavaScriptből és egy attribútumon belüli tartalomból nem jön létre előugró ablakként megjelenő jelölés .

Élő demó

Négy irány

Használat

Előugró ablakok engedélyezése JavaScripten keresztül:

$ ( '#example' ). popover ( opciók )

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-animation="".

Jelölés

Teljesítmény okokból a Tooltip és a Popover data-apis be van kapcsolva. Ha használni szeretné őket, csak adjon meg egy választó opciót.

Mód

$().popover(options)

Inicializálja az elemgyűjtemény popovereit.

.popover('show')

Felfedi az elemek felbukkanását.

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

.popover('hide')

Elrejti az elemek felbukkanását.

$ ( '#elem' ). popover ( 'elrejtés' )

.popover('toggle')

Bekapcsolja az elemek felbukkanását.

$ ( '#elem' ). popover ( 'toggle' )

.popover('destroy')

Elrejti és megsemmisíti egy elem felbukkanását.

$ ( '#elem' ). popover ( 'megsemmisíteni' )

Példa figyelmeztetések

Adja hozzá az elvetés funkciót az összes figyelmeztető üzenethez ezzel a bővítménnyel.

Használat

Riasztások elutasításának engedélyezése JavaScript használatával:

$ ( ".alert" ). figyelmeztetés ()

Jelölés

Csak adja hozzá data-dismiss="alert"a bezárás gombot, hogy automatikusan riasztási bezárási funkciót adjon.

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

Mód

$().alert()

Az összes figyelmeztetést szoros funkcionalitással burkolja. Ha azt szeretné, hogy a figyelmeztetések bezárt állapotban megjelenjenek, győződjön meg arról, hogy a .fadeés .inosztály már alkalmazza őket.

.alert('close')

Bezár egy riasztást.

$ ( ".alert" ). figyelmeztetés ( 'bezárás' )

Események

A Bootstrap riasztási osztálya felfed néhány eseményt a riasztási funkciókhoz való csatlakozáshoz.

$ ( '#my-alert' ). bind ( 'zárt' , function () {   
  // csinálj valamit…
})

Használati példák

Többet tehet a gombokkal. Vezérlő gombállapotokat vagy gombcsoportokat hozhat létre több összetevőhöz, például eszköztárhoz.

Állítólagos

Hozzáadás data-loading-text="Loading..."a gomb betöltési állapotának használatához.

<button type = "button" class = "btn btn-primary" data-loading-text = "Betöltés..." > Betöltési állapot </button>   

Egyetlen kapcsoló

Hozzáadás data-toggle="button"az egyetlen gombon történő váltás aktiválásához.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Egyetlen kapcsoló </button>   

Jelölőnégyzet

Hozzáadás data-toggle="buttons-checkbox"a jelölőnégyzet stílusának váltásához a btn-groupnál.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Bal </button>  
  <button type = "button" class = "btn btn-primary" > Középső </button>  
  <button type = "button" class = "btn btn-primary" > Jobb </button>  
</div>

Rádió

Hozzáadás data-toggle="buttons-radio"a rádióstílus váltásához a btn-csoporton.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Bal </button>  
  <button type = "button" class = "btn btn-primary" > Középső </button>  
  <button type = "button" class = "btn btn-primary" > Jobb </button>  
</div>

Használat

Gombok engedélyezése JavaScripten keresztül:

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

Jelölés

Az adatattribútumok a gombbővítmény szerves részét képezik. Tekintse meg az alábbi példakódot a különböző jelöléstípusokhoz.

Lehetőségek

Egyik sem

Mód

$().button('toggle')

Bekapcsolja a push állapotot. Azt a látszatot kölcsönzi a gombnak, mintha aktiválva lett volna.

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

$().button('betöltés')

A gomb állapotát betöltésre állítja – letiltja a gombot, és a szöveget szöveg betöltésére cseréli. A betöltési szöveget a gombelemen kell megadni a data attribútum segítségével data-loading-text.

<button type = "button" class = "btn" data-loading-text = "cuccok betöltése..." > ... </button>    

$().button('reset')

Visszaállítja a gomb állapotát – a szöveget eredeti szövegre cseréli.

$().button(karakterlánc)

Visszaállítja a gomb állapotát – a szöveget bármely adatban meghatározott szövegállapotra cseréli.

<button type = "button" class = "btn" data-complete-text = "kész!" > ... </button>    
<script>
  $ ( '.btn' ). gomb ( 'teljes' )
</script>

Ról ről

Szerezzen alapstílusokat és rugalmas támogatást az összecsukható alkatrészekhez, mint például a harmonika és a navigáció.

* A Transitions beépülő modul belefoglalása szükséges.

Példa harmonika

Az összecsukás plugin segítségével egy egyszerű harmonika stílusú widgetet építettünk:

<div class = "harmonika" id = "harmonika2" >  
  <div class = "harmonika-csoport" > 
    <div class = "harmonika-fejléc" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Összecsukható csoport 1. tétel
      </a>
    </div>
    <div id = "collapseOne" class = "harmonika-test összeomlása" >  
      <div class = "harmonika-belső" > 
        Anim pariatur közhely...
      </div>
    </div>
  </div>
  <div class = "harmonika-csoport" > 
    <div class = "harmonika-fejléc" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2"     href = "#collapseTwo" >
        Összecsukható csoport 2. tétel
      </a>
    </div>
    <div id = "collapseTwo" class = "harmonika-test összeomlása"   >
      <div class = "harmonika-belső" >
        Anim pariatur közhely...
      </div>
    </div>
  </div>
</div>
...

A bővítményt harmonika jelölés nélkül is használhatja. Egy másik elem kibontását és összecsukását hozzon létre egy gombbal.

<button type = "button" class = "btn btn-danger"    data-toggle = "collapse" data-target = "#demo" > 
  egyszerű összecsukható
</button>
 
<div id = "demo"   class = "összecsukása" > … </div>

Használat

Adatattribútumokon keresztül

Csak adjon hozzá data-toggle="collapse"és egy data-targetelemet az összecsukható elem vezérléséhez. Az data-targetattribútum elfogad egy css-választót az összecsukás alkalmazásához. Feltétlenül adja hozzá az osztályt collapseaz összecsukható elemhez. Ha azt szeretné, hogy alapértelmezetten megnyíljon, adja hozzá a további osztálytin .

Ha harmonikaszerű csoportkezelést szeretne hozzáadni egy összecsukható vezérlőhöz, adja hozzá a data attribútumot data-parent="#selector". Tekintse meg a bemutatót, hogy megtekinthesse ezt működés közben.

JavaScripten keresztül

Manuális engedélyezés a következőkkel:

$ ( ".collapse" ).összeomlik ()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz:data-parent="".

Mód

.collapse(options)

A tartalmat összecsukható elemként aktiválja. Elfogad egy opcionális opciót object.

$ ( '#myCollapsible' ). összecsukása ({
  toggle : false 
})

.collapse('toggle')

Az összecsukható elemet megjelenített vagy rejtett állapotba kapcsolja.

.collapse('show')

Összecsukható elemet jelenít meg.

.collapse('hide')

Elrejti az összecsukható elemet.

Események

A Bootstrap összecsukási osztálya felfed néhány eseményt az összecsukási funkcióhoz való kapcsolódáshoz.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // csinálj valamit…
})

Példakörhinta

Az alábbi diavetítés egy általános beépülő modult és komponenst mutat be az elemek, például a körhinta közötti kerékpározáshoz.

Első miniatűr címke

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.

Második miniatűr címke

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 = "carousel slide" >  
  <ol class = "körhintajelzők" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktív" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Körhinta elemek -->
  <div class = "carousel-inner" > 
    <div class = "aktív elem" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Használat

Adatattribútumokon keresztül

Használjon adatattribútumokat a körhinta helyzetének egyszerű szabályozásához. elfogadja a vagy data-slidekulcsszavakat , amely megváltoztatja a dia pozícióját az aktuális pozícióhoz képest. Alternatív megoldásként használja a nyers diaindex átadásához a körhintahoz , amely a dia pozícióját egy adott indexre ugrik, kezdveprevnextdata-slide-todata-slide-to="2"0 .

JavaScripten keresztül

Körhinta kézi hívása a következőkkel:

$ ( '.carousel' ). körhinta ()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScriptz-en keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-interval="".

Mód

.carousel(opciók)

Inicializálja a körhinta egy opcionális opcióval object, és elkezdi az elemek közötti kerékpározást.

$ ( '.carousel' ). körhinta ({
  intervallum : 2000 
})

.carousel('cycle')

Balról jobbra körbejárja a körhinta elemeit.

.carousel('pause')

Megakadályozza, hogy a körhinta az elemek között mozogjon.

.carousel(szám)

A körhinta egy adott kerethez kapcsolja (0 alapú, hasonlóan egy tömbhöz).

.carousel('prev')

Az előző elemre vált.

.carousel('next')

Ugrás a következő elemre.

Események

A Bootstrap körhinta osztálya két eseményt tesz közzé a körhinta funkcióihoz való kapcsolódáshoz.

Példa

Alapvető, könnyen bővíthető beépülő modul elegáns fejlécek gyors létrehozásához bármilyen formátumú szövegbevitellel.

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

Érdemes beállítani autocomplete="off", hogy ne jelenjenek meg az alapértelmezett böngészőmenük a Bootstrap typeahead legördülő menüben.

Használat

Adatattribútumokon keresztül

Adjon hozzá adatattribútumokat, hogy regisztráljon egy elemet betűfejes funkcióval a fenti példában látható módon.

JavaScripten keresztül

Hívja manuálisan a headheadet a következővel:

$ ( '.typeahead' ). előre gépelve ()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-source="".

Mód

.typeahead(options)

Inicializálja a bemenetet egy előírással.

Példa

A bal oldali alnavigáció az affix plugin élő bemutatója.

Használat

Adatattribútumokon keresztül

A toldalékolási viselkedés egyszerű hozzáadásához bármely elemhez egyszerűen adja hozzá data-spy="affix"azt az elemet, amely után kémkedni szeretne. Ezután az eltolásokkal határozza meg, hogy mikor kapcsolja be és ki egy elem rögzítését.

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

JavaScripten keresztül

Hívja meg az affix beépülő modult JavaScripten keresztül:

$ ( '#navbar' ). toldalék ()

Lehetőségek

Az opciók átadhatók adatattribútumokon vagy JavaScripten keresztül. Az adatattribútumokhoz fűzze hozzá az opció nevét a data-következőhöz: data-offset-top="200".