A modálisokról

Egy áramvonalas, de rugalmas, átveszi a hagyományos javascript modális beépülő modult, csak a minimálisan szükséges funkcionalitással és intelligens alapértelmezésekkel.

Statikus példa

Az alábbiakban egy statikusan renderelt modális látható.

Élő demó

Váltson át egy modált javascripten keresztül az alábbi gombra kattintva. Lecsúszik, és elhalványul az oldal tetejétől.

Bootstrap-modal használata

Hívja a modált javascripten keresztül:

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

Lehetőségek

Jelölés

Könnyedén aktiválhatja a modálokat az oldalon anélkül, hogy egyetlen soros javascriptet kellene írnia. Csak állítson data-toggle="modal"be egy vezérlőelemet a data-target="#foo"vagy href="#foo"a modális elem azonosítójának megfelelő vezérlőelemre, és ha rákattint, elindítja a modált.

Ezenkívül, ha opciókat szeretne hozzáadni a modális példányhoz, csak adja meg azokat további adatattribútumokként vagy a vezérlőelemen, vagy magán a modális jelölésen.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modal indítása </a>    

<div class = "modal" id = "myModal" >  
  <div class = "modal-header" > 
    <button class = "close" data-dismiss = "modal" > × </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>

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…
})

A legördülő menükről

Ezzel az egyszerű beépülő modullal a Bootstrapben szinte bármihez hozzáadhat legördülő menüket. A Bootstrap teljes körű legördülő menü támogatást nyújt a navigációs sávon, a lapokon és a tablettákon.

Példák

A legördülő menük teszteléséhez kattintson a legördülő navigációs hivatkozásokra a navigációs sávban és az alábbi tablettákra.

• Rendszeres link
• Ledob
  • Action
  • Another action
  • Something else here
  • Separated link
• Legördülő menü 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Legördülő menü 3
  • Action
  • Another action
  • Something else here
  • Separated link

A bootstrap-dropdown.js használata

Hívja a legördülő listákat javascripten keresztül:

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

Jelölés

Ha gyorsan szeretne legördülő menüt hozzáadni bármely elemhez, csak adja hozzá data-toggle="dropdown", és minden érvényes rendszerindítási legördülő menü automatikusan aktiválódik.

<ul class = "nav nav-pills" > 
  <li class = "aktív" ><a href = "#" > Normál link </a></li>  
  <li class = "legördülő" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Ledob
      <b class = "caret" ></b> 
    </a>
    <ul class = "legördülő menü" > 
      <li><a href = "#" > Művelet </a></li> 
      <li><a href = "#" > Egy másik művelet </a></li> 
      <li><a href = "#" > Itt van még valami </a></li> 
      <li class = "osztó" ></li> 
      <li><a href = "#" > Elválasztott link </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pills" > 
  <li class = "legördülő menü" > 
    <a class = "dropdown-toggle" data-toggle = "legördülő" data-target = "#" href = "elérési út/oldalhoz.html" >    
      Ledob
      <b class = "caret" ></b> 
    </a>
    <ul class = "legördülő menü" > 
      ...
    </ul>
  </li>
</ul>

Mód

$().dropdown()

Programozási API egy adott navigációs sáv vagy lapos navigáció menüinek aktiválásához.

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.

Példa navigációs sávra scrollspy-vel

Görgessen az alábbi területen, és nézze meg a navigációs frissítést. A legördülő alelemek is kiemelve lesznek. Próbáld ki!

A bootstrap-scrollspy.js használata

Hívja a scrollspy-t javascripten keresztül:

$ ( '#navbar' ). scrollspy ()

Jelölés

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

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

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

Események

Ez a beépülő modul gyors, dinamikus lap- és pillérfunkciókat ad a helyi tartalom közötti átálláshoz.

Példalapok

Kattintson az alábbi fülekre a rejtett panelek közötti váltáshoz, akár legördülő menük segítségével is.

• itthon
• Profil
• Ledob
  • @fat
  • @mdo

A bootstrap-tab.js használata

Lapozható lapok engedélyezése javascripten keresztül (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 lapot 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 rendszerindító 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
})

Az eszköztippekről

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.

Példa az Eszköztippek használatára

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

A bootstrap-tooltip.js használata

Az eszköztipp aktiválása javascripten keresztül:

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

Lehetőségek

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.

<a href = "#" rel = "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' )

A popoverekről

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.

* Szükséges az eszköztipp csatolása

Példa hover popoverre

Vigye az egérmutatót a gomb fölé a popover aktiválásához.

A bootstrap-popover.js használata

Popover engedélyezése javascripten keresztül:

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

Lehetőségek

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' )

A riasztásokról

A riasztási beépülő modul egy apró osztály a riasztásokhoz való szoros funkciók hozzáadásához.

Példa figyelmeztetések

A riasztások beépülő modulja a normál figyelmeztető üzeneteken és a blokkoló üzeneteken működik.

A bootstrap-alert.js használata

Figyelmeztetés elutasításának engedélyezése javascripten keresztül:

$ ( ".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…
})

Ról ről

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.

Használati példák

Használja a gombok beépülő modulját az állapotokhoz és a kapcsolókhoz.

A bootstrap-button.js használata

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.

<!-- Add data-toggle="button" a váltás aktiválásához egyetlen gombon -->
<button class = "btn" data-toggle = "button" > Egyetlen kapcsoló </button>  
 
<!-- Add 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 class = "btn" > Bal </button> 
  <button class = "btn" > Középső </button> 
  <button class = "btn" > Jobb </button> 
</div>
 
<!-- Add data-toggle="buttons-radio" a rádióstílus váltásához a btn-groupnál -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Bal </button> 
  <button class = "btn" > Középső </button> 
  <button class = "btn" > Jobb </button> 
</div>

Mód

$().button('toggle')

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

<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 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 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:

A bootstrap-collapse.js használata

Engedélyezés javascripten keresztül:

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

Lehetőségek

Jelölés

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ályt in.

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

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…
})

Ról ről

Egy általános bővítmény az elemek közötti kerékpározáshoz. Egy körhintó.

Példakörhinta

Nézze meg az alábbi diavetítést.

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.

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

‹ ›

A bootstrap-carousel.js használata

Hívjon javascripten keresztül:

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

Lehetőségek

Jelölés

Az adatattribútumok az előző és a következő vezérlőkhöz használatosak. Tekintse meg az alábbi példajelölést.

<div id = "myCarousel" class = "carousel" >  
  <!-- 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>

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.

Ról ről

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.

Példa

Kezdje el a gépelést az alábbi mezőbe, hogy megjelenjen a gépelési eredmények.

A bootstrap-typeahead.js használata

Hívja meg a typeaheadet javascripten keresztül:

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

Lehetőségek

Jelölés

Adjon hozzá adatattribútumokat, hogy regisztráljon egy elemet betűfejes funkcióval.

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

Mód

.typeahead(options)

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