Individuell oder zesummegesat

Plugins kënnen individuell abegraff ginn (och wann e puer erfuerderlech Ofhängegkeeten hunn), oder all op eemol. Béid bootstrap.js an bootstrap.min.js enthalen all Plugins an enger eenzeger Datei.

Daten Attributer

Dir kënnt all Bootstrap Plugins reng duerch d'Markup API benotzen ouni eng eenzeg Zeil vu JavaScript ze schreiwen. Dëst ass Bootstrap's éischt Klass API a sollt Är éischt Iwwerleeung sinn wann Dir e Plugin benotzt.

Dat gesot, an e puer Situatiounen kann et wënschenswäert sinn dës Funktionalitéit auszeschalten. Dofir bidde mir och d'Fäegkeet fir d'Datenattributer API auszeschalten andeems Dir all Eventer um Kierper mam Numm "data-api" unbinden. Dëst gesäit esou aus:

$ ( 'Kierper' ). aus ( '.data-api' )

Alternativ, fir e spezifesche Plugin ze zielen, gitt just den Numm vum Plugin als Nummraum zesumme mam Data-APi Nummraum wéi dëst:

$ ( 'Kierper' ). aus ( '.alert.data-api' )

Programmatesch API

Mir gleewen och datt Dir sollt fäeg sinn all Bootstrap Plugins reng duerch d'JavaScript API ze benotzen. All ëffentlech APIen sinn eenzel, chainable Methoden, a gitt d'Kollektioun zréck.

$ ( ".btn.danger" ). Knäppchen ( "toggle" ). addClass ( "fett" )

All Methode sollen en optionalen Optiounsobjekt akzeptéieren, eng String déi eng bestëmmte Method zielt, oder näischt (wat e Plugin mam Standardverhalen initiéiert):

$ ( "#myModal" ). modal () // initialiséiert mat Defaults                       
$ ( "#myModal" ). modal ({ Keyboard : falsch }) // initialiséiert ouni Tastatur     
$ ( "#myModal" ). modal ( 'show' ) // initialiséiert an rifft d'Show direkt op                

All Plugin weist och säi roude Konstruktor op enger 'Constructor' Eegeschafte $.fn.popover.Constructor:. Wann Dir eng bestëmmte Plugin Instanz wëllt kréien, recuperéieren se direkt vun engem Element $('[rel=popover]').data('popover'):.

Kee Konflikt

Heiansdo ass et néideg Bootstrap Plugins mat anere UI Kaderen ze benotzen. An dësen Ëmstänn kënnen Nummraumkollisiounen heiansdo optrieden. Wann dat passéiert, kënnt Dir .noConflictde Plugin uruffen, deen Dir wëllt de Wäert zrécksetzen.

var bootstrapButton = $ . fn vun. Knäppchen . noConflict () // zréck $.fn.button zu virdrun zougewisen Wäert 
$ . fn vun. bootstrapBtn = bootstrapButton             // gitt $().bootstrapBtn d'Bootstrap Funktionalitéit

Evenementer

Bootstrap bitt personaliséiert Eventer fir déi meescht Plugin eenzegaarteg Aktiounen. Allgemeng kommen dës an enger Infinitiv- a Vergaangenheetsform - wou den Infinitiv (ex. show) am Ufank vun engem Event ausgeléist gëtt, a seng Partizipform (ex. shown) ausgeléist gëtt beim Ofschloss vun enger Handlung.

All infinitiv Eventer bidden PräventiounDefault Funktionalitéit. Dëst bitt d'Fäegkeet d'Ausféierung vun enger Aktioun ze stoppen ier se ufänkt.

$ ( '#myModal' ). op ( 'weisen' , Funktioun ( e ) {   
    wann (! Daten ) zréckginn e . preventDefault () // stoppt modal ze weisen   
})

Iwwer Iwwergäng

Fir einfach Iwwergangseffekter, bootstrap-transition.js eng Kéier niewent deenen anere JS Dateien. Wann Dir de kompiléierten (oder minifizéierten) bootstrap.js benotzt , ass et net néideg dëst matzemaachen - et ass schonn do.

Benotzen Fäll

E puer Beispiller vum Iwwergangsplugin:

• Rutsch oder verschwannen a Modal
• Tabs verschwannen
• Verschwannen Alarmer
• Rutsch Karussell Panelen

Beispiller

Modale si streamlined, awer flexibel, Dialogprompts mat der minimaler erfuerderter Funktionalitéit a Smart Defaults.

Statescht Beispill

E rendered Modal mat Header, Kierper a Set vun Aktiounen am Fousszeil.

<div class = "modal hide fade" > 
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "richteg" > × </button>    
    <h3> Modal Header </h3>
  </div>
  <div class = "modal-body" > 
    <p> Ee schéine Kierper ... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" > Zoumaachen </a>  
    <a href = "#" class = "btn btn-primary" > Ännerungen späicheren </a>  
  </div>
</div>

Live Demo

Wiesselt e Modal iwwer JavaScript andeems Dir op de Knäppchen hei drënner klickt. Et rutscht erof a verschwannen vun uewen op der Säit.

<!-- Knäppchen fir Modal auszeléisen -->
<a href = "#myModal" role = "button" class = "btn" data-toggle = "modal" > Demo Modal starten </a>    
 
<!-- Modal -->
<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" > Modal Header </h3> 
  </div>
  <div class = "modal-body" > 
    <p> Ee schéine Kierper ... </p>
  </div>
  <div class = "modal-footer" > 
    <button class = "btn" data-dismiss = "modal" aria-hidden = "richteg" > Zoumaachen </button>   
    <button class = "btn btn-primary" > Ännerungen späicheren </button> 
  </div>
</div>

Benotzung

Via daten Attributer

Aktivéiert e Modal ouni JavaScript ze schreiwen. Setzt data-toggle="modal"op e Controllerelement, wéi e Knäppchen, zesumme mat engem data-target="#foo"oder href="#foo"fir e spezifesche Modal ze zielen fir ze wiesselen.

<button type = "button" data-toggle = "modal" data-target = "#myModal" > Modal starten </button>   

Iwwer JavaScript

Rufft e Modal mat ID myModalmat enger eenzeger Zeil vu JavaScript:

$ ( '#myModal' ). modal ( Optiounen )

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-backdrop="".

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

Methoden

.modal (Optiounen)

Aktivéiert Ären Inhalt als Modal. Akzeptéiert eng fakultativ Optiounen object.

$ ( '#myModal' ). modal ({
  Keyboard : falsch 
})

.modal('toggle')

Manuell wiesselt e Modal.

$ ( '#myModal' ). modal ( 'toggle' )

.modal('show')

Manuell mécht e Modal op.

$ ( '#myModal' ). modal ( 'weisen' )

.modal('verstoppen')

Manuell verstoppt e Modal.

$ ( '#myModal' ). modal ( 'verstoppen' )

Evenementer

Dem Bootstrap seng modal Klass weist e puer Eventer fir an d'modal Funktionalitéit unzehaken.

$ ( '#myModal' ). op ( 'verstoppt' , Funktioun () {   
  // maach eppes…
})

Beispiller

Füügt Dropdown-Menüe fir bal alles mat dësem einfache Plugin, och d'Navbar, Tabs a Pillen.

An enger navbar

Bannent Tabs

Benotzung

Via daten Attributer

Füügt data-toggle="dropdown"e Link oder Knäppchen fir en Dropdown ze wiesselen.

<div class = "dropdown" > 
  <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#" > Dropdown-Ausléiser </a>   
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Fir URLen intakt ze halen, benotzt d' data-targetAttribut anstatt href="#".

<div class = "dropdown" > 
  <a class = "dropdown-toggle" id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html"> _      
    Fale loossen
    <b class = "caret" ></b> 
  </a>
  <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >   
    ...
  </ul>
</div>

Iwwer JavaScript

Rufft d'Dropdowns iwwer JavaScript un:

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

Optiounen

Keen

Methoden

$().dropdown('toggle')

E programmateschen API fir d'Menüe fir eng gegebene Navbar oder Tabbed Navigatioun ze wiesselen.

Beispill an navbar

De ScrollSpy Plugin ass fir automatesch Aktualiséierung vun Nav Ziler baséiert op Scroll Positioun. Scroll d'Gebitt ënner der Navbar a kuckt d'aktiv Klass änneren. D'Dropdown Ënnerartikele ginn och markéiert.

Benotzung

Via daten Attributer

Fir einfach Scrollspy Verhalen op Är Topbar Navigatioun ze addéieren, füügt just data-spy="scroll"un d'Element un op deen Dir wëllt spionéieren (meeschtens wier dëst de Kierper) a data-target=".navbar"wielt wéi eng Navigatioun ze benotzen. Dir wëllt Scrollspy mat engem .navKomponent benotzen.

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

Iwwer JavaScript

Rufft de Scrollspy iwwer JavaScript un:

$ ( '#navbar' ). scrollspy ()

Methoden

.scrollspy('refresh')

Wann Dir Scrollspy benotzt a Verbindung mat der Zousatz oder Ewechhuele vun Elementer aus der DOM, musst Dir d'Erfrëschungsmethod sou nennen:

$ ( '[data-spy="scroll"]' ). all ( Funktioun () {  
  var $spion = $ ( dëser ). scrollspy ( 'erfrëschen' )
});

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset="".

Evenementer

Beispill Tabs

Füügt séier, dynamesch Tab Funktionalitéit fir den Iwwergank duerch Paneele vum lokalen Inhalt, och iwwer Dropdown-Menüen.

Benotzung

Aktivéiert Tabbar Tabs iwwer JavaScript (all Tab muss individuell aktivéiert ginn):

$ ( '#myTab a' ). klickt ( Funktioun ( e ) {  
  e . verhënnerenDefault ();
  $ ( dëst ). tab ( 'weisen' );
})

Dir kënnt eenzel Tabs op verschidde Manéieren aktivéieren:

$ ( '#myTab a[href="#profile"]' ). tab ( 'weisen' ); // Wielt Tab mam Numm 
$ ( '#myTab a:first' ). tab ( 'weisen' ); // Wielt éischt Tab 
$ ( '#myTab a:lescht' ). tab ( 'weisen' ); // Wielt lescht Tab 
$ ( '#myTab li:eq(2) a' ). tab ( 'weisen' ); // Wielt drëtt Tab (0-indexéiert) 

Markup

Dir kënnt eng Tab oder Pille Navigatioun aktivéieren ouni JavaScript ze schreiwen andeems Dir einfach spezifizéiert data-toggle="tab"oder data-toggle="pill"op en Element. D'Addéieren vun den nava nav-tabsKlassen op d'Tab ulwäert de Bootstrap Tab Styling uwenden.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Home </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Messagen </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Astellunge </a></li>  
</ul>

Methoden

$().tab

Aktivéiert e Tabelement an Inhaltsbehälter. Tab soll entweder en data-targetoder e hrefgezielt e Container Node am DOM hunn.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Messagen </a></li> 
  <li><a href = "#settings" > Astellungen </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 = "Messagen" > ... </div>  
  <div class = "tab-pane" id = "Astellungen" > ... </div>  
</div>
 
<script>
  $ ( Funktioun () {  
    $ ( '#myTab a:lescht' ). tab ( 'weisen' );
  })
</script>

Evenementer

$ ( 'a[data-toggle="tab"]' ). op ( 'gewise' , Funktioun ( e ) {   
  e . Zil // Tab aktivéiert
  e . relatedTarget // virdrun Tab
})

Beispiller

Inspiréiert vum exzellente jQuery.tipsy Plugin geschriwwen vum Jason Frame; Tooltips sinn eng aktualiséiert Versioun, déi net op Biller vertrauen, CSS3 fir Animatiounen benotzen, an Datenattributer fir lokal Titellagerung.

Aus Leeschtungsgrënn sinn d'Tooltip an d'Popover Data-Apis optéiert, dat heescht datt Dir se selwer initialiséiere musst .

Hover iwwer d'Links hei drënner fir Tooltipps ze gesinn:

Véier Richtungen

Tooltips an Inputgruppen

Wann Dir Tooltips a Popovers mat de Bootstrap Input Gruppen benotzt, musst Dir d' container(dokumentéiert ënnendrënner) Optioun setzen fir ongewollt Nebenwirkungen ze vermeiden.

Benotzung

Ausléiser den Tooltip iwwer JavaScript:

$ ( '#Beispill' ). Tooltip ( Optiounen )

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-animation="".

Markup

<a href = "#" data-toggle = "tooltip" title = "éischt Tooltip" > hänk iwwer mech </a>   

Methoden

$().tooltip(optiounen)

Befestegt e Tooltip-Handler op eng Elementsammlung.

.tooltip('weisen')

Entdeckt den Tooltip vun engem Element.

$ ( '#element' ). tooltip ( 'weisen' )

.tooltip('verstoppen')

Verstoppt den Tooltip vun engem Element.

$ ( '#element' ). tooltip ( 'verstoppen' )

.tooltip('toggle')

Wiesselt den Tooltip vun engem Element.

$ ( '#element' ). tooltip ( 'toggle' )

.tooltip('zerstéieren')

Verstoppt an zerstéiert den Tooltip vun engem Element.

$ ( '#element' ). Tooltip ( 'zerstéieren' )

Beispiller

Füügt kleng Iwwerlagerunge vum Inhalt, wéi déi um iPad, un all Element fir sekundär Informatioun ze wunnen. Hover iwwer de Knäppchen fir de Popover auszeléisen. Verlaangt Tooltip abegraff.

Statesch Popover

Véier Optiounen sinn verfügbar: uewen, riets, ënnen a lénks ausgeriicht.

Kee Markup, déi als Popovers gewise gëtt, ginn aus JavaScript an Inhalt an engem dataAttribut generéiert.

Live Demo

Véier Richtungen

Benotzung

Aktivéiert Popovers iwwer JavaScript:

$ ( '#Beispill' ). Popover ( Optiounen )

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-animation="".

Markup

Aus Leeschtungsgrënn sinn d'Tooltip an d'Popover Data-Apis optéiert. Wann Dir se benotze wëllt, gitt einfach eng Selektiounsoptioun un.

Methoden

$().popover(optiounen)

Initializes Popovers fir eng Element Kollektioun.

.popover('weisen')

Entdeckt en Elementer Popover.

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

.popover('verstoppen')

Verstoppt eng Elementer Popover.

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

.popover('toggle')

Wiesselt en Element Popover.

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

.popover('zerstéieren')

Verstoppt an zerstéiert de Popover vun engem Element.

$ ( '#element' ). popover ( 'zerstéieren' )

Beispill Alarmer

Füügt d'Entloossfunktioun un all Alarmmeldung mat dësem Plugin.

Benotzung

Aktivéiert d'Entloossung vun enger Alarm iwwer JavaScript:

$ ( ".alert" ). alert ()

Markup

Füügt just data-dismiss="alert"un Äre Zoumaache Knäppchen fir automatesch eng Alarm Zoumaache Funktionalitéit ze ginn.

<a class = "close" data-dismiss = "alarm" href = "#"> & Zäiten; </a>   

Methoden

$().alert()

Wraps all Alarmer mat enker Funktionalitéit. Fir Är Alarmer ze animéieren wann se zougemaach sinn, gitt sécher datt se d' Klass .fadean d' .inKlasse scho fir si applizéiert hunn.

.alert('close')

Maacht eng Alarm zou.

$ ( ".alert" ). alert ( 'zoumaachen' )

Evenementer

Dem Bootstrap seng Alarmklasse weist e puer Eventer aus fir an d'Alarmfunktionalitéit unzekoppelen.

$ ( '#my-alert' ). binden ( 'zougemaach' , Funktioun () {   
  // maach eppes…
})

Beispill benotzt

Maacht méi mat Knäppercher. Kontroll Knäppchen Staaten oder Gruppe vu Knäppercher erstellen fir méi Komponenten wéi Toolbaren.

Staatlech

Füügt data-loading-text="Loading..."fir e Luedezoustand op engem Knäppchen ze benotzen.

<button type = "button" class = "btn btn-primary" data-loading-text = "Lueden..." > Lueden Zoustand </button>   

Eenzel Këscht

Füügt data-toggle="button"fir den Toggling op engem eenzege Knäppchen z'aktivéieren.

<button type = "button" class = "btn btn-primary" data-toggle = "button" > Single Toggle </button>   

Checkbox

Füügt data-toggle="buttons-checkbox"fir d'Checkbox-Stil ze wiesselen op btn-Grupp.

<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button type = "button" class = "btn btn-primary" > Lénks </button>  
  <button type = "button" class = "btn btn-primary" > Mëtt </button>  
  <button type = "button" class = "btn btn-primary" > Riets </button>  
</div>

Radio

Füügt data-toggle="buttons-radio"fir Radiostil ze wiesselen op btn-Grupp.

<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button type = "button" class = "btn btn-primary" > Lénks </button>  
  <button type = "button" class = "btn btn-primary" > Mëtt </button>  
  <button type = "button" class = "btn btn-primary" > Riets </button>  
</div>

Benotzung

Knäppercher iwwer JavaScript aktivéieren:

$ ( '.nav-tabs' ). Knäppchen ()

Markup

Donnéeën Attributer sinn integral un de Knäppchen Plugin. Kuckt de Beispillcode hei ënnen fir déi verschidde Markuptypen.

Optiounen

Keen

Methoden

$().button('toggle')

Wiesselt Push Staat. Gëtt de Knäppchen d'Erscheinung datt et aktivéiert gouf.

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

$().button('loading')

Setzt de Knäppchenzoustand fir d'Luede ze setzen - deaktivéiert de Knäppchen an wiesselt Text op d'Luede vum Text. Luede Text soll op de Knäppchen Element definéiert ginn mat der Daten Attribut data-loading-text.

<button type = "button" class = "btn" data-loading-text = "Saache lueden..." > ... </button>    

$().button('reset')

Reset Knäppchen Staat - wiesselt Text op Originaltext.

$().button(string)

Reset Knäppchen Staat - tauscht Text an all Daten definéiert Text Staat.

<button type = "button" class = "btn" data-complete-text = "fäerdeg!" > ... </button>    
<script>
  $ ( '.btn' ). Knäppchen ( 'komplett' )
</script>

Iwwer

Kritt Basisstiler a flexibel Ënnerstëtzung fir zesummeklappbare Komponenten wéi Akkordeonen a Navigatioun.

* Verlaangt datt den Transitions Plugin abegraff ass.

Beispill Akkordeon

Mat dem Zesummebroch Plugin hu mir en einfachen Akkordeonstil Widget gebaut:

<div class = "accordion" id = "accordion2" >  
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseOne" >    
        Zesummeklappbar Grupp Element #1
      </a>
    </div>
    <div id = "collapseOne" class = "Akkordeon-Kierper Zesummebroch an" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
  <div class = "accordion-group" > 
    <div class = "accordion-heading" > 
      <a class = "accordion-toggle" data-toggle = "collapse" data-parent = "#accordion2" href = "#collapseTwo" >    
        Zesummeklappbar Grupp Element #2
      </a>
    </div>
    <div id = "collapseTwo" class = "Akkordeon-Kierper Zesummebroch" >  
      <div class = "accordion-inner" > 
        Anim pariatur cliche...
      </div>
    </div>
  </div>
</div>
...

Dir kënnt och de Plugin ouni Akkordeon Markup benotzen. Maacht e Knäppchen wiesselt d'Erweiderung an Zesummebroch vun engem aneren Element.

<button type = "button" class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >    
  einfach zesummeklappbar
</button>
 
<div id = "demo" class = "zesummeklappen" > … </div>  

Benotzung

Via daten Attributer

Füügt einfach data-toggle="collapse"an en data-targetElement fir automatesch d'Kontroll vun engem zesummeklappbare Element ze zouzeschreiwen. Den data-targetAttribut akzeptéiert e css Selector fir den Zesummebroch anzebezéien. Vergewëssert Iech d'Klass collapsezum zesummeklappbare Element ze addéieren. Wann Dir wëllt datt et als Standard opmaacht, füügt déi zousätzlech Klass in.

Fir Akkordeonähnlech Gruppemanagement zu enger zesummeklappbarer Kontroll ze addéieren, füügt d'Datenattribut data-parent="#selector". Kuckt d'Demo fir dëst an Aktioun ze gesinn.

Iwwer JavaScript

Aktivéiert manuell mat:

$ ( ".collapse" ). kollapsen ()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-parent="".

Methoden

.collapse (Optiounen)

Aktivéiert Ären Inhalt als zesummeklappbar Element. Akzeptéiert eng fakultativ Optiounen object.

$ ( '#myCollapsible' ). Zesummebroch ({
  toggle : falsch 
})

.collapse('toggle')

Wiesselt en zesummeklappbare Element fir ze weisen oder verstoppt.

.collapse('weisen')

Weist en zesummeklappbare Element.

.collapse('verstoppen')

Verstoppt en zesummeklappbare Element.

Evenementer

Dem Bootstrap seng Zesummebroch Klass weist e puer Eventer fir an d'Zesummefunktionalitéit unzehaken.

$ ( '#myCollapsible' ). op ( 'verstoppt' , Funktioun () {   
  // maach eppes…
})

Beispill Karussell

D'Diashow hei drënner weist e generesche Plugin a Komponent fir Vëlo duerch Elementer wéi e Karussell.

Éischt 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.

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 = "Carousel Rutsch" >  
  <ol class = "Carousel-Indicators" > 
    <li data-target = "#myCarousel" data-slide-to = "0" class = "aktiv" ></li>   
    <li data-target = "#myCarousel" data-slide-to = "1" ></li>  
    <li data-target = "#myCarousel" data-slide-to = "2" ></li>  
  </ol>
  <!-- Karussellartikelen -->
  <div class = "carousel-inner" > 
    <div class = "aktiv Element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "virdrun"> & lsaquo ; </a>   
  < eng Klass = "Carousel -Kontroll richteg" href = "#myCarousel " data- slide = "nächst" > & rsaquo; </a>   
</div>

Benotzung

Via daten Attributer

Benotzt Datenattributer fir d'Positioun vum Karussell einfach ze kontrolléieren. data-slideakzeptéiert d'Schlësselwierder prevoder next, déi d'Rutschpositioun relativ zu der aktueller Positioun ännert. Alternativ benotzt data-slide-tofir e roude Rutschindex un de Karussell ze passéieren data-slide-to="2", dee spréngt d'Rutschpositioun op e bestëmmten Index, deen mat ufänkt 0.

Iwwer JavaScript

Call Karussell manuell mat:

$ ( '.carousel' ). Karussell ()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScriptz weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-interval="".

Methoden

.carousel (Optiounen)

Initialiséiert de Karussell mat engem fakultativen Optiounen objecta fänkt mam Vëlo duerch Elementer un.

$ ( '.carousel' ). Karussell ({
  Intervall : 2000 
})

.carousel('Cycle')

Zyklen duerch d'Karussellartikele vu lénks op riets.

.carousel('paus')

Stoppt de Karussell aus dem Vëlo duerch Elementer.

.carousel (Nummer)

Zyklen de Karussell op e bestëmmte Frame (0 baséiert, ähnlech wéi eng Array).

.carousel('virdrun')

Zyklen op dat viregt Element.

.carousel('nächst')

Zyklen op den nächsten Element.

Evenementer

D'Bootstrap Karussell Klass weist zwee Eventer fir d'Karussell Funktionalitéit unzehaken.

Beispill

E Basis, liicht erweiderten Plugin fir séier elegant Schreifweis mat all Form Textinput ze kreéieren.

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

Dir wëllt setzen autocomplete="off"fir ze verhënneren datt Standardbrowsermenüen iwwer de Bootstrap Typeahead Dropdown erschéngen.

Benotzung

Via daten Attributer

Füügt Donnéeën Attributer fir en Element mat Typeahead Funktionalitéit ze registréieren wéi am Beispill hei uewen gewisen.

Iwwer JavaScript

Rufft den Typahead manuell mat:

$ ( '.typeahead' ). typeahead ()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-source="".

Methoden

.typeahead(Optiounen)

Initialiséiert en Input mat engem Typahead.

Beispill

D'Subnavigatioun op der lénker Säit ass eng Live Demo vum Affix Plugin.

Benotzung

Via daten Attributer

Fir einfach Affix Verhalen op all Element ze addéieren, füügt just data-spy="affix"un dat Element op deen Dir wëllt spionéieren. Benotzt dann Offsets fir ze definéieren wéini de Pinning vun engem Element un an ausgeschalt gëtt.

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

Iwwer JavaScript

Rufft den Affix Plugin iwwer JavaScript un:

$ ( '#navbar' ). affixen ()

Optiounen

Optiounen kënnen iwwer Datenattributer oder JavaScript weidergeleet ginn. Fir Datenattributer, fügen d'Optiounsnumm un data-, wéi an data-offset-top="200".