Om modaler

Et strømlinet, men fleksibelt, tag på det traditionelle javascript modale plugin med kun den minimalt nødvendige funktionalitet og smarte standardindstillinger.

Statisk eksempel

Nedenfor er en statisk gengivet modal.

Live demo

Skift en modal via javascript ved at klikke på knappen nedenfor. Det vil glide ned og fade ind fra toppen af ​​siden.

Bruger bootstrap-modal

Ring til modalen via javascript:

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

Muligheder

Markup

Du kan nemt aktivere modals på din side uden at skulle skrive en eneste linje med javascript. Indstil blot data-toggle="modal"på et controller-element med et data-target="#foo"eller href="#foo"som svarer til et modalt element-id, og når der klikkes på det, vil det starte din modal.

For også at tilføje indstillinger til din modale forekomst, skal du blot inkludere dem som yderligere dataattributter på enten kontrolelementet eller selve modale markup.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modal overskrift </h3>
  </div>
  <div class = "modal-body" > 
    <p> Én fin krop... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Luk </a>   
    <a href = "#" class = "btn btn-primary" > Gem ændringer </a>  
  </div>
</div>

Metoder

.modal(valgmuligheder)

Aktiverer dit indhold som en modal. Accepterer en valgfri indstilling object.

$ ( '#myModal' ). modal ({
  tastatur : falsk 
})

.modal('toggle')

Skifter manuelt en modal.

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

.modal('show')

Åbner manuelt en modal.

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

.modal('skjul')

Skjuler manuelt en modal.

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

Begivenheder

Bootstraps modal-klasse afslører nogle få hændelser for tilslutning til modal funktionalitet.

$ ( '#myModal' ). on ( 'skjult' , funktion () {   
  // gør noget…
})

Om dropdowns

Tilføj rullemenuer til næsten alt i Bootstrap med dette enkle plugin. Bootstrap har fuld rullemenuunderstøttelse i navigeringslinjen, fanerne og pillerne.

Eksempler

Klik på dropdown nav-links i navbaren og pillerne nedenfor for at teste dropdowns.

• Almindelig link
• Dropdown
  • 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

Brug af bootstrap-dropdown.js

Ring til rullemenuerne via javascript:

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

Markup

For hurtigt at tilføje dropdown-funktionalitet til ethvert element, skal du blot tilføje data-toggle="dropdown", og enhver gyldig bootstrap-dropdown vil automatisk blive aktiveret.

<ul class = "nav nav-piller" > 
  <li class = "active" ><a href = "#" > Almindelig link </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      <li><a href = "#" > Handling </a></li> 
      <li><a href = "#" > Endnu en handling </a></li> 
      <li><a href = "#" > Noget andet her </a></li> 
      <li klasse = "deler" ></li> 
      <li><a href = "#" > Separeret link </a></li> 
    </ul>
  </li>
  ...
</ul>

For at holde webadresser intakte skal du bruge data-targetattributten i stedet for href="#".

<ul class = "nav nav-piller" > 
  <li klasse = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "sti/til/side.html" >    
      Dropdown
      <b class = "caret" ></b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Metoder

$().dropdown()

Et programatisk api til aktivering af menuer for en given navbar eller fane-navigation.

ScrollSpy-plugin'et er til automatisk opdatering af nav-mål baseret på rulleposition.

Eksempel på navbar med scrollspy

Rul ned i området og se navigationsopdateringen. Underelementerne i rullemenuen vil også blive fremhævet. Prøv det!

Brug af bootstrap-scrollspy.js

Ring til scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Markup

For nemt at tilføje scrollspy-adfærd til din topbjælke-navigation, skal du blot tilføje data-spy="scroll"til det element, du vil spionere på (det vil typisk være kroppen).

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

Metoder

.scrollspy('refresh')

Når du bruger scrollspy i forbindelse med tilføjelse eller fjernelse af elementer fra DOM, skal du kalde opdateringsmetoden sådan:

$ ( '[data-spy="scroll"]' ). hver ( funktion () {  
  var $spy = $ ( dette ). scrollspy ( 'opdater' )
});

Muligheder

Begivenheder

Dette plugin tilføjer hurtig, dynamisk fane- og pillefunktionalitet til overgang gennem lokalt indhold.

Eksempler på faner

Klik på fanerne nedenfor for at skifte mellem skjulte ruder, selv via rullemenuer.

• Hjem
• Profil
• Dropdown
  • @fat
  • @mdo

Brug af bootstrap-tab.js

Aktiver faneblade med faner via javascript (hver fane skal aktiveres individuelt):

$ ( '#myTab a' ). klik ( funktion ( e ) {  
  e . forhindreDefault ();
  $ ( dette ). faneblad ( 'vis' );
})

Du kan aktivere individuelle faner på flere måder:

$ ( '#myTab a[href="#profile"]' ). faneblad ( 'vis' ); // Vælg fane efter navn 
$ ( '#myTab a:first' ). faneblad ( 'vis' ); // Vælg den første fane 
$ ( '#myTab a:sidste' ). faneblad ( 'vis' ); // Vælg sidste fane 
$ ( '#myTab li:eq(2) a' ). faneblad ( 'vis' ); // Vælg tredje fane (0-indekseret) 

Markup

Du kan aktivere en fane- eller pillenavigation uden at skrive noget javascript ved blot at angive data-toggle="tab"eller data-toggle="pill"på et element. Tilføjelse af klasserne og til fanen navvil anvende bootstrap-fanens styling.nav-tabsul

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Startside </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Beskeder </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Indstillinger </a></li>  
</ul>

Metoder

$().tab

Aktiverer et faneelement og indholdsbeholder. Tab skal have enten en data-targeteller en hrefmålretning mod en containernode i DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Hjem </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Beskeder </a></li> 
  <li><a href = "#settings" > Indstillinger </a></li> 
</ul>
 
<div class = "tab-indhold" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meddelelser" > ... </div>  
  <div class = "tab-pane" id = "indstillinger" > ... </div>  
</div>
 
<script>
  $ ( funktion () {  
    $ ( '#myTab a:sidste' ). faneblad ( 'vis' );
  })
</script>

Begivenheder

$ ( 'a[data-toggle="tab"]' ). on ( 'vist' , funktion ( e ) {   
  e . mål // aktiveret fane
  e . relateret mål // forrige fane
})

Om Værktøjstip

Inspireret af det fremragende jQuery.tipsy plugin skrevet af Jason Frame; Værktøjstip er en opdateret version, som ikke er afhængig af billeder, bruger css3 til animationer og dataattributter til lokal titellagring.

Eksempel på brug af Tooltips

Hold markøren over nedenstående links for at se værktøjstip:

Brug af bootstrap-tooltip.js

Udløs værktøjstip via javascript:

$ ( '#eksempel' ). værktøjstip ( muligheder )

Muligheder

Markup

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgt. Hvis du gerne vil bruge dem, skal du blot angive en valgmulighed.

<a href = "#" rel = "værktøjstip" title = "første værktøjstip" > hold markøren over mig </a>   

Metoder

$().værktøjstip(indstillinger)

Vedhæfter en værktøjstip-handler til en elementsamling.

.tooltip('vis')

Viser et elements værktøjstip.

$ ( '#element' ). værktøjstip ( 'vis' )

.tooltip('skjul')

Skjuler et elements værktøjstip.

$ ( '#element' ). værktøjstip ( 'skjul' )

.tooltip('toggle')

Skifter et elements værktøjstip.

$ ( '#element' ). værktøjstip ( 'skift' )

Om popovers

Tilføj små overlejringer af indhold, som dem på iPad, til ethvert element for at rumme sekundær information.

* Kræver værktøjstip for at være inkluderet

Eksempel på svævepopover

Hold markøren over knappen for at udløse popover.

Brug af bootstrap-popover.js

Aktiver popovers via javascript:

$ ( '#eksempel' ). popover ( valgmuligheder )

Muligheder

Markup

Af præstationsmæssige årsager er Tooltip og Popover data-api'erne tilvalgt. Hvis du gerne vil bruge dem, skal du blot angive en valgmulighed.

Metoder

$().popover(indstillinger)

Initialiserer popovers for en elementsamling.

.popover('vis')

Afslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Skifter en popover for elementer.

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

Om alarmer

Advarselsplugin'et er en lillebitte klasse til at tilføje tæt funktionalitet til advarsler.

Eksempler på advarsler

Advarsler-pluginnet fungerer på almindelige advarselsmeddelelser og blokerer meddelelser.

Brug af bootstrap-alert.js

Aktiver afvisning af en advarsel via javascript:

$ ( ".alert" ). advarsel ()

Markup

Du skal bare tilføje data-dismiss="alert"til din lukkeknap for automatisk at give en alarmlukningsfunktionalitet.

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

Metoder

$().alert()

Omslutter alle advarsler med tæt funktionalitet. For at få dine underretninger til at animere, når de er lukket, skal du sørge for, at klassen .fadeog .inklassen allerede er anvendt på dem.

.alert('close')

Lukker en alarm.

$ ( ".alert" ). alarm ( 'luk' )

Begivenheder

Bootstraps advarselsklasse afslører nogle få hændelser for tilslutning til advarselsfunktionalitet.

$ ( '#my-alert' ). bind ( 'lukket' , funktion () {   
  // gør noget…
})

Om

Gør mere med knapper. Styr knaptilstande eller opret grupper af knapper til flere komponenter som værktøjslinjer.

Eksempler på anvendelser

Brug knappens plugin til tilstande og skifter.

Brug af bootstrap-button.js

Aktiver knapper via javascript:

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

Markup

Dataattributter er integrerede i knap-plugin'et. Tjek eksempelkoden nedenfor for de forskellige opmærkningstyper.

<!-- Tilføj data-toggle="button" for at aktivere skift på en enkelt knap -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Tilføj data-toggle="buttons-checkbox" for at skifte afkrydsningsfeltstil på btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Mellem </button> 
  <button class = "btn" > Højre </button> 
</div>
 
<!-- Tilføj data-toggle="buttons-radio" for at skifte til radiostil på btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Mellem </button> 
  <button class = "btn" > Højre </button> 
</div>

Metoder

$().button('toggle')

Skifter push-tilstand. Giver knappen det udseende, at den er blevet aktiveret.

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

$().button('indlæser')

Indstiller knaptilstand til indlæsning - deaktiverer knap og bytter tekst til indlæsning af tekst. Indlæsningstekst skal defineres på knapelementet ved hjælp af dataattributten data-loading-text.

<button class = "btn" data-loading-text = "indlæser ting..." > ... </button>   

$().button('reset')

Nulstiller knaptilstand - bytter tekst til original tekst.

$().knap(streng)

Nulstiller knaptilstand - skifter tekst til enhver datadefineret teksttilstand.

<button class = "btn" data-complete-text = "færdig!" > ... </knap>   
<script>
  $ ( '.btn' ). knap ( 'fuldført' )
</script>

Om

Få basisstile og fleksibel støtte til sammenklappelige komponenter som harmonikaer og navigation.

* Kræver, at Transitions-pluginnet er inkluderet.

Eksempel på harmonika

Ved at bruge kollaps-pluginet byggede vi en simpel harmonikastil-widget:

Brug af bootstrap-collapse.js

Aktiver via javascript:

$ ( ".kollapse" ). kollapse ()

Muligheder

Markup

Bare tilføj data-toggle="collapse"og et data-targettil element for automatisk at tildele kontrol over et sammenklappeligt element. Attributten data-targetaccepterer en css-vælger at anvende sammenbruddet på. Sørg for at tilføje klassen collapsetil det sammenklappelige element. Hvis du vil have den til at åbne som standard, skal du tilføje den ekstra klasse in.

<button class = "btn btn-danger" data-toggle = "kollapse" data-target = "#demo" >   
  enkel sammenklappelig
</button>
 
<div id = "demo" class = "kollaps ind" > … </div>  

Metoder

.collapse(indstillinger)

Aktiverer dit indhold som et sammenklappeligt element. Accepterer en valgfri indstilling object.

$ ( '#myCollapsible' ). kollaps ({
  skifte : falsk 
})

.collapse('toggle')

Skifter et sammenklappeligt element til at blive vist eller skjult.

.collapse('vis')

Viser et sammenklappeligt element.

.collapse('skjul')

Skjuler et sammenklappeligt element.

Begivenheder

Bootstraps kollapsklasse afslører nogle få hændelser for at tilslutte sig sammenbrudsfunktionalitet.

$ ( '#myCollapsible' ). on ( 'skjult' , funktion () {   
  // gør noget…
})

Om

Et generisk plugin til at cykle gennem elementer. En karusell.

Eksempel karrusel

Se diasshowet herunder.

Første miniaturelabel

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.

‹ ›

Brug af bootstrap-carousel.js

Ring via javascript:

$ ( '.karrusel' ). karrusel ()

Muligheder

Markup

Dataattributter bruges til den forrige og næste kontrol. Se eksempelmarkeringen nedenfor.

<div id = "myCarousel" class = "karrusel dias" >  
  <!-- Karruselartikler -->
  <div class = "karrusel-indre" > 
    <div class = "aktivt element" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Karrusel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "næste" > › </a>   
</div>

Metoder

.carousel(valgmuligheder)

Initialiserer karrusellen med valgfrie muligheder objectog begynder at cykle gennem genstande.

$ ( '.karrusel' ). karrusel ({
  interval : 2000 
})

.carousel('cyklus')

Cykler gennem karruselelementerne fra venstre mod højre.

.carousel('pause')

Stopper karrusellen i at cykle gennem genstande.

.carousel(nummer)

Cykler karrusellen til en bestemt ramme (0-baseret, svarende til et array).

.carousel('prev')

Skifter til det forrige element.

.carousel('næste')

Skifter til næste punkt.

Begivenheder

Bootstraps karruselklasse afslører to hændelser for tilslutning til karruselfunktionalitet.

Om

Et grundlæggende, let udvidet plugin til hurtigt at skabe elegante skrivehoveder med enhver form for tekstinput.

Eksempel

Begynd at skrive i feltet nedenfor for at få vist typeahead-resultaterne.

Brug af bootstrap-typeahead.js

Ring til typeahead via javascript:

$ ( '.typeahead' ). typeforud ()

Muligheder

Markup

Tilføj dataattributter for at registrere et element med typeahead-funktionalitet.

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

Metoder

.typeahead(indstillinger)

Initialiserer et input med en typeahead.