Iwwert Modal

E streamlined, awer flexibel, iwwerhëlt den traditionelle Javascript Modal Plugin mat nëmmen déi minimal erfuerderlech Funktionalitéit a Smart Defaults.

Statescht Beispill

Drënner ass e statesch rendered Modal.

Live Demo

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

Benotzt Bootstrap-Modal

Rufft de Modal iwwer Javascript un:

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

Optiounen

Markup

Dir kënnt Modalen op Ärer Säit einfach aktivéieren ouni eng eenzeg Zeil vu Javascript ze schreiwen. Setzt just data-toggle="modal"op e Controllerelement mat engem data-target="#foo"oder href="#foo"wat mat enger Modal Element ID entsprécht, a wann Dir klickt, lancéiert et Äre Modal.

Och, fir Optiounen op Är modal Instanz ze addéieren, gitt se just als zousätzlech Datenattributer op entweder de Kontrollelement oder de modale Markup selwer.

<a class = "btn" data-toggle = "modal" href = "#myModal" > Modal starten </a>    

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </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" data-dismiss = "modal" > Zoumaachen </a>   
    <a href = "#" class = "btn btn-primary" > Ännerungen späicheren </a>  
  </div>
</div>

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

Iwwert Dropdowns

Füügt Dropdown-Menüe fir bal alles am Bootstrap mat dësem einfache Plugin. Bootstrap huet voll Dropdown-Menü Ënnerstëtzung an der Navbar, Tabs a Pillen.

Beispiller

Klickt op d'Dropdown nav Linken an der Navbar a Pëllen hei drënner fir Dropdowns ze testen.

• Regelméisseg Link
• Fale loossen
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropdown 3
  • Action
  • Another action
  • Something else here
  • Separated link

Benotzt bootstrap-dropdown.js

Rufft d'Dropdowns iwwer Javascript un:

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

Markup

Fir séier Dropdown-Funktionalitéit un all Element derbäi ze addéieren, füügt einfach data-toggle="dropdown"an all gültege Bootstrap Dropdown gëtt automatesch aktivéiert.

<ul class = "nav nav-pillen" > 
  <li class = "aktiv" ><a href = "#" > Regelméisseg Link </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1"> _   
      Fale loossen
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Aktioun </a></li> 
      <li><a href = "#" > Eng aner Aktioun </a></li> 
      <li><a href = "#" > Soss eppes hei </a></li> 
      <li class = "divider" ></li> 
      <li><a href = "#" > Getrennte Link </a></li> 
    </ul>
  </li>
  ...
</ul>

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

<ul class = "nav nav-pillen" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html"> _    
      Fale loossen
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Methoden

$().dropdown()

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

De ScrollSpy Plugin ass fir automatesch Aktualiséierung vun Nav Ziler baséiert op Scroll Positioun.

Beispill navbar mat scrollspy

Scroll d'Géigend hei drënner a kuckt d'Navigatiounsupdate. D'Dropdown Ënnerartikele ginn och markéiert. Versich et!

Benotzt bootstrap-scrollspy.js

Rufft de Scrollspy iwwer Javascript un:

$ ( '#navbar' ). scrollspy ()

Markup

Fir einfach scrollspy Verhalen op Är Topbar Navigatioun ze addéieren, füügt just data-spy="scroll"un d'Element un op déi Dir wëllt spionéieren (meeschtens wier dëst de Kierper).

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

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

Evenementer

Dëse Plugin füügt séier, dynamesch Tab a Pille Funktionalitéit fir den Iwwergank duerch lokalen Inhalt.

Beispill Tabs

Klickt op d'Tabs hei drënner fir tëscht verstoppte Panelen ze wiesselen, och iwwer Dropdown-Menüen.

• Doheem
• Profil
• Fale loossen
  • @fat
  • @mdo

Benotzt bootstrap-tab.js

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

Iwwer Tooltips

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.

Beispill Benotzung vun Tooltips

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

Benotzt bootstrap-tooltip.js

Ausléiser den Tooltip iwwer Javascript:

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

Optiounen

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.

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

Iwwer Popovers

Füügt kleng Iwwerlagerunge vum Inhalt, wéi déi um iPad, un all Element fir sekundär Informatioun ze wunnen.

* Verlaangt Tooltip abegraff ze sinn

Beispill Hover Popover

Hover iwwer de Knäppchen fir de Popover auszeléisen.

Benotzt bootstrap-popover.js

Aktivéiert Popovers iwwer Javascript:

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

Optiounen

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

Iwwer Alarmer

Den Alarm Plugin ass eng kleng Klass fir eng enk Funktionalitéit un Alarmer ze addéieren.

Beispill Alarmer

Den Alarm Plugin funktionnéiert op regelméisseg Alarmmeldungen, a blockéiert Messagen.

Benotzt bootstrap-alert.js

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

Iwwer

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

Beispill benotzt

Benotzen d'Knäppercher Plugin fir Staaten an toggles.

Benotzt bootstrap-button.js

Aktivéiert Knäppchen iwwer Javascript:

$ ( '.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.

<!-- Füügt data-toggle="Button" derbäi fir den Toggling op engem eenzege Knäppchen ze aktivéieren -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Füügt data-toggle="buttons-checkbox" fir d'Checkbox-Stil ze wiesselen op btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Lénks </button> 
  <button class = "btn" > Mëtt </button> 
  <button class = "btn" > Richteg </button> 
</div>
 
<!-- Füügt data-toggle="buttons-radio" fir de Radiostil ze wiesselen op btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Lénks </button> 
  <button class = "btn" > Mëtt </button> 
  <button class = "btn" > Richteg </button> 
</div>

Methoden

$().button('toggle')

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

<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 class = "btn" data-loading-text = "Saachen 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 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:

Benotzt bootstrap-collapse.js

Aktivéiert iwwer Javascript:

$ ( ".collapse" ). kollapsen ()

Optiounen

Markup

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.

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

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

Iwwer

E generesche Plugin fir Vëlo duerch Elementer. Eng lëschteg-go-round.

Beispill Karussell

Kuckt d'Diashow hei ënnen.

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

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

Drëtt 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.

‹ ›

Benotzt bootstrap-carousel.js

Uruff iwwer Javascript:

$ ( '.carousel' ). Karussell ()

Optiounen

Markup

Dateattributer gi fir déi virdrun an déi nächst Kontrolle benotzt. Kuckt d'Beispill Markup hei drënner.

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

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.

Iwwer

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

Beispill

Fänkt un am Feld hei drënner ze tippen fir d'Typahead Resultater ze weisen.

Benotzt bootstrap-typeahead.js

Rufft den Typahead iwwer Javascript un:

$ ( '.typeahead' ). typeahead ()

Optiounen

Markup

Füügt Donnéeën Attributer fir en Element mat Typeahead Funktionalitéit ze registréieren.

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

Methoden

.typeahead(Optiounen)

Initialiséiert en Input mat engem Typahead.