Om modaler

En strömlinjeformad, men flexibel, version av det traditionella javascript-modala plugin-programmet med endast den minsta nödvändiga funktionaliteten och smarta standardinställningar.

Statiskt exempel

Nedan är en statiskt renderad modal.

Live-demo

Växla en modal via javascript genom att klicka på knappen nedan. Den kommer att glida ned och tona in från toppen av sidan.

Använder bootstrap-modal

Ring modalen via javascript:

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

alternativ

Pålägg

Du kan enkelt aktivera modaler på din sida utan att behöva skriva en enda rad med javascript. Ställ bara in data-toggle="modal"på ett kontrollelement med ett data-target="#foo"eller href="#foo"som motsvarar ett modalt element-id, och när du klickar på det kommer det att starta din modal.

För att lägga till alternativ till din modala instans, inkludera dem bara som ytterligare dataattribut på antingen kontrollelementet eller själva modala markeringen.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "stäng" data-dismiss = "modal" > × </button>   
    <h3> Modal rubrik </h3>
  </div>
  <div class = "modal-body" > 
    <p> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Stäng </a>   
    <a href = "#" class = "btn btn-primary" > Spara ändringar </a>  
  </div>
</div>

Metoder

.modal(alternativ)

Aktiverar ditt innehåll som en modal. Accepterar ett valfritt alternativ object.

$ ( '#myModal' ). modal ({
  tangentbord : falskt 
})

.modal('toggle')

Växlar manuellt en modal.

$ ( '#myModal' ). modal ( 'växla' )

.modal('show')

Öppnar en modal manuellt.

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

.modal('hide')

Döljer en modal manuellt.

$ ( '#myModal' ). modal ( 'gömma' )

evenemang

Bootstraps modalklass avslöjar några händelser för att koppla in modal funktionalitet.

$ ( '#myModal' ). on ( 'dold' , function () {   
  // göra någonting…
})

Om dropdowns

Lägg till rullgardinsmenyer till nästan vad som helst i Bootstrap med denna enkla plugin. Bootstrap har fullständigt stöd för rullgardinsmenyn i navigeringsfältet, flikarna och pillren.

Exempel

Klicka på rullgardinsmenyn nav-länkar i navigeringsfältet och piller nedan för att testa rullgardinsmenyn.

• Vanlig länk
• Falla ner
  • 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

Använder bootstrap-dropdown.js

Ring rullgardinsmenyn via javascript:

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

Pålägg

För att snabbt lägga till rullgardinsfunktioner till ett element, lägg bara till data-toggle="dropdown"och valfri giltig bootstrap-rullgardinsmeny kommer automatiskt att aktiveras.

<ul class = "nav nav-piller" > 
  <li class = "active" ><a href = "#" > Vanlig länk </a></li>  
  <li class = "dropdown" id = "meny1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Falla ner
      <b class = "caret" ></b> 
    </a>
    <ul class = "rullgardinsmeny" > 
      <li><a href = "#" > Åtgärd </a></li> 
      <li><a href = "#" > En annan åtgärd </a></li> 
      <li><a href = "#" > Något annat här </a></li> 
      <li class = "avdelare" ></li> 
      <li><a href = "#" > Separerad länk </a></li> 
    </ul>
  </li>
  ...
</ul>

För att hålla webbadresser intakta, använd data-targetattributet istället för href="#".

<ul class = "nav nav-piller" > 
  <li class = "rullgardinsmeny" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Falla ner
      <b class = "caret" ></b> 
    </a>
    <ul class = "rullgardinsmeny" > 
      ...
    </ul>
  </li>
</ul>

Metoder

$().dropdown()

Ett programmerat api för att aktivera menyer för ett givet navigeringsfält eller navigering med flikar.

ScrollSpy-pluginen är till för att automatiskt uppdatera navigeringsmål baserat på rullningsposition.

Exempel på navigeringsfält med scrollspy

Bläddra i området nedan och se navigeringsuppdateringen. Underposterna i rullgardinsmenyn kommer också att markeras. Försök!

Använder bootstrap-scrollspy.js

Ring scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Pålägg

För att enkelt lägga till scrollspy-beteende till din toppfältsnavigering, lägg bara data-spy="scroll"till elementet du vill spionera på (oftast är detta kroppen).

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

Metoder

.scrollspy('refresh')

När du använder scrollspy i kombination med att lägga till eller ta bort element från DOM, måste du anropa uppdateringsmetoden så här:

$ ( '[data-spy="scroll"]' ). varje ( funktion () {  
  var $spy = $ ( detta ). scrollspy ( 'uppdatera' )
});

alternativ

evenemang

Denna plugin lägger till snabb, dynamisk flik- och pillerfunktion för övergång genom lokalt innehåll.

Exempel flikar

Klicka på flikarna nedan för att växla mellan dolda rutor, även via rullgardinsmenyer.

• Hem
• Profil
• Falla ner
  • @fat
  • @mdo

Använder bootstrap-tab.js

Aktivera flikar med flikar via javascript (varje flik måste aktiveras individuellt):

$ ( '#myTab a' ). klicka ( funktion ( e ) {  
  e . preventDefault ();
  $ ( detta ). tab ( 'visa' );
})

Du kan aktivera enskilda flikar på flera sätt:

$ ( '#myTab a[href="#profile"]' ). tab ( 'visa' ); // Välj flik efter namn 
$ ( '#myTab a:first' ). tab ( 'visa' ); // Välj första fliken 
$ ( '#myTab a:last' ). tab ( 'visa' ); // Välj sista fliken 
$ ( '#myTab li:eq(2) a' ). tab ( 'visa' ); // Välj tredje flik (0-indexerad) 

Pålägg

Du kan aktivera en navigering med flikar eller piller utan att skriva något javascript genom att helt enkelt ange data-toggle="tab"eller data-toggle="pill"på ett element. Om du lägger till navklasserna nav-tabsoch på fliken ultillämpas bootstrap-flikens stil.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hem </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Meddelanden </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Inställningar </a></li>  
</ul>

Metoder

$().tab

Aktiverar ett flikelement och innehållsbehållare. Tab ska ha antingen en data-targeteller en hrefinriktning på en containernod i DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Hem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Meddelanden </a></li> 
  <li><a href = "#settings" > Inställningar </a></li> 
</ul>
 
<div class = "tab-innehåll" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meddelanden" > ... </div>  
  <div class = "tab-pane" id = "inställningar" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). tab ( 'visa' );
  })
</script>

evenemang

$ ( 'a[data-toggle="tab"]' ). on ( 'visas' , funktion ( e ) {   
  e . mål // aktiverad flik
  e . relatedTarget // föregående flik
})

Om verktygstips

Inspirerad av det utmärkta plugin-programmet jQuery.tipsy skrivet av Jason Frame; Verktygstips är en uppdaterad version som inte förlitar sig på bilder, använder css3 för animationer och dataattribut för lokal titellagring.

Exempel på användning av Tooltips

Håll muspekaren över länkarna nedan för att se verktygstips:

Använder bootstrap-tooltip.js

Aktivera verktygstipset via javascript:

$ ( '#exempel' ). verktygstips ( alternativ )

alternativ

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

<a href = "#" rel = "tooltip" title = "första verktygstips" > håll muspekaren över mig </a>   

Metoder

$().tooltip(options)

Bifogar en verktygstipshanterare till en elementsamling.

.tooltip('show')

Visar ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'visa' )

.tooltip('hide')

Döljer ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'dölj' )

.tooltip('toggle')

Växlar ett elements verktygstips.

$ ( '#element' ). verktygstips ( 'växla' )

Om popovers

Lägg till små överlagringar av innehåll, som de på iPad, till valfritt element för att hysa sekundär information.

* Kräver verktygstips för att vara med

Exempel svävande popover

Håll muspekaren över knappen för att utlösa popover.

Använder bootstrap-popover.js

Aktivera popovers via javascript:

$ ( '#exempel' ). popover ( alternativ )

alternativ

Pålägg

Av prestandaskäl är verktygstips och Popover-data-apis aktiverade. Om du vill använda dem anger du bara ett väljaralternativ.

Metoder

$().popover(alternativ)

Initierar popovers för en elementsamling.

.popover('show')

Avslöjar en popover för element.

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

.popover('hide')

Döljer en popover för element.

$ ( '#element' ). popover ( 'gömma' )

.popover('toggle')

Växlar en popover för element.

$ ( '#element' ). popover ( 'växla' )

Om varningar

Alert-pluginet är en liten klass för att lägga till nära funktionalitet till varningar.

Exempel på varningar

Varningspluginet fungerar på vanliga varningsmeddelanden och blockerar meddelanden.

Använder bootstrap-alert.js

Aktivera avvisande av en varning via javascript:

$ ( ".alert" ). varning ()

Pålägg

Lägg bara data-dismiss="alert"till i din stängningsknapp för att automatiskt ge en varningsfunktionalitet för stängning.

<a class = "stäng" data-dismiss = "alert" href = "#" > × </a>   

Metoder

$().alert()

Omsluter alla varningar med nära funktionalitet. För att få dina varningar att animeras när de är stängda, se till att de har klassen .fadeoch .inredan tillämpade på dem.

.alert('stäng')

Stänger en varning.

$ ( ".alert" ). varning ( 'stäng' )

evenemang

Bootstraps varningsklass avslöjar några händelser för att koppla in varningsfunktioner.

$ ( '#my-alert' ). bind ( 'stängd' , funktion () {   
  // göra någonting…
})

Handla om

Gör mer med knappar. Kontrollera knapptillstånd eller skapa grupper av knappar för fler komponenter som verktygsfält.

Exempel på användningar

Använd knapparnas plugin för tillstånd och växlar.

Använder bootstrap-button.js

Aktivera knappar via javascript:

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

Pålägg

Dataattribut är integrerade i knappens plugin. Kolla in exempelkoden nedan för de olika uppmärkningstyperna.

<!-- Lägg till data-toggle="button" för att aktivera växling på en enda knapp -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Lägg till data-toggle="buttons-checkbox" för växling av kryssrutestil på btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Vänster </button> 
  <button class = "btn" > Mellan </button> 
  <button class = "btn" > Höger </button> 
</div>
 
<!-- Lägg till data-toggle="buttons-radio" för att växla radiostil på btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Vänster </button> 
  <button class = "btn" > Mellan </button> 
  <button class = "btn" > Höger </button> 
</div>

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger knappen intrycket att den har aktiverats.

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

$().button('laddar in')

Ställer in knappstatus till laddning - inaktiverar knapp och byter text till laddningstext. Laddande text ska definieras på knappelementet med hjälp av dataattributet data-loading-text.

<button class = "btn" data-loading-text = "laddar in saker..." > ... </button>   

$().button('reset')

Återställer knappstatus - byter text till originaltext.

$().button(sträng)

Återställer knappstatus - byter text till valfritt datadefinierat textläge.

<button class = "btn" data-complete-text = "finished!" > ... </knapp>   
<script>
  $ ( '.btn' ). knapp ( 'komplett' )
</script>

Handla om

Få basstilar och flexibelt stöd för hopfällbara komponenter som dragspel och navigering.

* Kräver att Transitions-pluginet ingår.

Exempel på dragspel

Med hjälp av kollaps-pluginen byggde vi en enkel dragspelstil-widget:

Använder bootstrap-collapse.js

Aktivera via javascript:

$ ( ".kollapse" ). kollapsa ()

alternativ

Pålägg

Lägg bara till data-toggle="collapse"och ett data-targettill-element för att automatiskt tilldela kontroll över ett hopfällbart element. Attributet data-targetaccepterar en css-väljare att tillämpa komprimeringen på. Se till att lägga till klassen collapsei det hopfällbara elementet. Om du vill att den ska öppnas som standard lägger du till den extra klassen in.

<button class = "btn btn-danger" data-toggle = "kollaps" data-target = "#demo" >   
  enkel hopfällbar
</button>
 
<div id = "demo" class = "kollaps in" > … </div>  

Metoder

.collapse(alternativ)

Aktiverar ditt innehåll som ett hopfällbart element. Accepterar ett valfritt alternativ object.

$ ( '#myCollapsible' ). kollapsa ({
  växla : falskt 
})

.collapse('toggle')

Växlar ett hopfällbart element till att visas eller döljas.

.collapse('show')

Visar ett hopfällbart element.

.collapse('hide')

Döljer ett hopfällbart element.

evenemang

Bootstraps kollapsklass avslöjar några händelser för att koppla in kollapsfunktionalitet.

$ ( '#myCollapsible' ). on ( 'dold' , function () {   
  // göra någonting…
})

Handla om

Ett generiskt plugin för att cykla genom element. En karusell.

Exempel karusell

Se bildspelet nedan.

Första miniatyretiketten

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.

Andra miniatyretiketten

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.

Tredje miniatyretiketten

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.

‹ ›

Använder bootstrap-carousel.js

Ring via javascript:

$ ( '.carousel' ). karusell ()

alternativ

Pålägg

Dataattribut används för föregående och nästa kontroll. Kolla in exempelmarkeringen nedan.

<div id = "myCarousel" class = "karusellbild" >  
  <!-- Karusellartiklar -->
  <div class = "karusell-inner" > 
    <div class = "aktivt objekt" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karusell nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "nästa" > › </a>   
</div>

Metoder

.carousel(alternativ)

Initierar karusellen med ett valfritt alternativ objectoch börjar cykla igenom föremål.

$ ( '.carousel' ). karusell ({
  intervall : 2000 
})

.carousel('cykel')

Cyklar genom karusellföremålen från vänster till höger.

.carousel('paus')

Stoppar karusellen från att cykla genom föremål.

.carousel(nummer)

Cyklar karusellen till en viss bildruta (0-baserad, liknande en array).

.carousel('prev')

Går till föregående post.

.carousel('next')

Går till nästa objekt.

evenemang

Bootstraps karusellklass avslöjar två händelser för att koppla in karusellfunktionalitet.

Handla om

Ett enkelt, enkelt utökat plugin för att snabbt skapa eleganta skrivhuvuden med vilken form som helst.

Exempel

Börja skriva i fältet nedan för att visa skrivresultaten.

Använder bootstrap-typeahead.js

Ring typahead via javascript:

$ ( '.typeahead' ). typahead ()

alternativ

Pålägg

Lägg till dataattribut för att registrera ett element med typahead-funktionalitet.

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

Metoder

.typeahead(alternativ)

Initierar en inmatning med ett skrivhuvud.