Om modaler

En strømlinjeformet, men fleksibel versjon av den tradisjonelle javascript-modale plugin-modulen med bare minimumskravene til funksjonalitet og smarte standardinnstillinger.

Statisk eksempel

Nedenfor er en statisk gjengitt modal.

Live demo

Bytt en modal via javascript ved å klikke på knappen nedenfor. Den vil gli ned og tone inn fra toppen av siden.

Bruker bootstrap-modal

Ring modalen via javascript:

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

Alternativer

Markup

Du kan enkelt aktivere modaler på siden din uten å måtte skrive en eneste linje med javascript. Bare sett data-toggle="modal"på et kontrollerelement med en data-target="#foo"eller href="#foo"som tilsvarer en modal element-ID, og ​​når du klikker, vil den starte din modal.

For å legge til alternativer til din modale forekomst, inkluderer du dem som ekstra dataattributter på enten kontrollelementet eller selve modale markeringen.

<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> En fin kropp... </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Lukk </a>   
    <a href = "#" class = "btn btn-primary" > Lagre endringer </a>  
  </div>
</div>

Metoder

.modal(alternativer)

Aktiverer innholdet ditt som en modal. Godtar et valgfritt alternativ object.

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

.modal('toggle')

Bytter en modal manuelt.

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

.modal('show')

Åpner en modal manuelt.

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

.modal('skjul')

Skjuler en modal manuelt.

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

arrangementer

Bootstraps modalklasse avslører noen få hendelser for å koble til modal funksjonalitet.

$ ( '#myModal' ). på ( 'skjult' , funksjon () {   
  // gjør noe…
})

Om dropdowns

Legg til rullegardinmenyer til nesten alt i Bootstrap med denne enkle plugin. Bootstrap har full rullegardinmenystøtte i navigasjonslinjen, fanene og pillene.

Eksempler

Klikk på rullegardinmenyene i navigasjonslinjen og pillene nedenfor for å teste rullegardinmenyene.

• Vanlig lenke
• Fall ned
  • 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

Bruker bootstrap-dropdown.js

Ring rullegardinmenyene via javascript:

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

Markup

For raskt å legge til rullegardinfunksjonalitet til ethvert element, legg til data-toggle="dropdown", og enhver gyldig rullegardin for bootstrap vil automatisk bli aktivert.

<ul class = "nav nav-piller" > 
  <li class = "active" ><a href = "#" > Vanlig lenke </a></li>  
  <li class = "dropdown" id = "meny1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Fall ned
      <b class = "caret" ></b> 
    </a>
    <ul class = "rullegardinmeny" > 
      <li><a href = "#" > Handling </a></li> 
      <li><a href = "#" > En annen handling </a></li> 
      <li><a href = "#" > Noe annet her </a></li> 
      <li class = "deler" ></li> 
      <li><a href = "#" > Separert lenke </a></li> 
    </ul>
  </li>
  ...
</ul>

For å beholde nettadresser intakte, bruk data-targetattributtet i stedet for href="#".

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

Metoder

$().dropdown()

Et programatisk API for å aktivere menyer for en gitt navigasjonslinje eller navigering med faner.

ScrollSpy-pluginen er for automatisk oppdatering av nav-mål basert på rulleposisjon.

Eksempel navbar med scrollspy

Bla gjennom området nedenfor og se navigasjonsoppdateringen. Underelementene i rullegardinmenyen vil også bli uthevet. Prøv det!

Bruker bootstrap-scrollspy.js

Ring scrollspy via javascript:

$ ( '#navbar' ). scrollspy ()

Markup

For enkelt å legge til scrollspy-adferd til topplinjenavigasjonen, legg data-spy="scroll"til elementet du vil spionere på (som oftest vil dette være kroppen).

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

Metoder

.scrollspy('refresh')

Når du bruker scrollspy i forbindelse med å legge til eller fjerne elementer fra DOM, må du kalle oppdateringsmetoden slik:

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

Alternativer

arrangementer

Dette pluginet legger til rask, dynamisk fane- og pillefunksjonalitet for overgang gjennom lokalt innhold.

Eksempelfaner

Klikk på fanene nedenfor for å veksle mellom skjulte ruter, selv via rullegardinmenyer.

• Hjem
• Profil
• Fall ned
  • @fat
  • @mdo

Bruker bootstrap-tab.js

Aktiver tabbare faner via javascript (hver fane må aktiveres individuelt):

$ ( '#myTab a' ). klikk ( funksjon ( e ) {  
  e . preventDefault ();
  $ ( dette ). tab ( 'vis' );
})

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

$ ( '#myTab a[href="#profile"]' ). tab ( 'vis' ); // Velg fane etter navn 
$ ( '#myTab a:first' ). tab ( 'vis' ); // Velg første fane 
$ ( '#myTab a:last' ). tab ( 'vis' ); // Velg siste fane 
$ ( '#myTab li:eq(2) a' ). tab ( 'vis' ); // Velg tredje fane (0-indeksert) 

Markup

Du kan aktivere en fane- eller pillenavigasjon uten å skrive noe javascript ved å spesifisere data-toggle="tab"eller data-toggle="pill"på et element. Hvis du legger til navog - nav-tabsklassene i fanen ul, brukes bootstrap-fanestilen.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Hjem </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Meldinger </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Innstillinger </a></li>  
</ul>

Metoder

$().tab

Aktiverer et faneelement og innholdsbeholder. Tab skal ha enten en data-targeteller en hrefmålrettet beholdernode 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" > Meldinger </a></li> 
  <li><a href = "#settings" > Innstillinger </a></li> 
</ul>
 
<div class = "tab-innhold" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "meldinger" > ... </div>  
  <div class = "tab-pane" id = "innstillinger" > ... </div>  
</div>
 
<script>
  $ ( funksjon () {  
    $ ( '#myTab a:last' ). tab ( 'vis' );
  })
</script>

arrangementer

$ ( 'a[data-toggle="tab"]' ). på ( 'vist' , funksjon ( e ) {   
  e . mål // aktivert fane
  e . relatedTarget // forrige fane
})

Om verktøytips

Inspirert av den utmerkede jQuery.tipsy-pluginen skrevet av Jason Frame; Verktøytips er en oppdatert versjon som ikke er avhengig av bilder, bruker css3 for animasjoner og dataattributter for lokal tittellagring.

Eksempel på bruk av Tooltips

Hold markøren over koblingene nedenfor for å se verktøytips:

Bruker bootstrap-tooltip.js

Utløs verktøytipset via javascript:

$ ( '#eksempel' ). verktøytips ( alternativer )

Alternativer

Markup

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene valgt inn. Hvis du vil bruke dem, spesifiser bare et velgeralternativ.

<a href = "#" rel = "verktøytips" title = "første verktøytips" > hold musepekeren over meg </a>   

Metoder

$().tooltip(opsjoner)

Legger en verktøytipsbehandler til en elementsamling.

.tooltip('vis')

Viser et elements verktøytips.

$ ( '#element' ). verktøytips ( 'vis' )

.tooltip('skjul')

Skjuler et elements verktøytips.

$ ( '#element' ). verktøytips ( 'skjul' )

.tooltip('toggle')

Veksler på verktøytipset til et element.

$ ( '#element' ). verktøytips ( 'veksle' )

Om popovers

Legg til små overlegg av innhold, som de på iPad, til et hvilket som helst element for å inneholde sekundær informasjon.

* Krever at verktøytips er inkludert

Eksempel på hover popover

Hold musepekeren over knappen for å utløse popover.

Bruker bootstrap-popover.js

Aktiver popovers via javascript:

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

Alternativer

Markup

Av ytelsesgrunner er Tooltip og Popover-dataapi-ene valgt inn. Hvis du vil bruke dem, spesifiser bare et velgeralternativ.

Metoder

$().popover(alternativer)

Initialiserer popovers for en elementsamling.

.popover('show')

Avslører en popover for elementer.

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

.popover('skjul')

Skjuler en popover for elementer.

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

.popover('toggle')

Slår av på en elementer-popover.

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

Om varsler

Varslingspluginen er en liten klasse for å legge til nærfunksjonalitet til varsler.

Eksempler på varsler

Varslingspluginen fungerer på vanlige varslingsmeldinger, og blokkerer meldinger.

Bruker bootstrap-alert.js

Aktiver avvisning av et varsel via javascript:

$ ( ".alert" ). varsel ()

Markup

Bare legg data-dismiss="alert"til lukkeknappen for automatisk å gi et varsel om lukkefunksjonalitet.

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

Metoder

$().alert()

Dekker alle varsler med nærfunksjonalitet. For å få varslene dine til å animere når de er lukket, sørg for at de har .fadeog .inklassen allerede brukt på dem.

.alert('close')

Lukker et varsel.

$ ( ".alert" ). varsel ( 'lukke' )

arrangementer

Bootstraps varslingsklasse avslører noen få hendelser for å koble til varslingsfunksjonalitet.

$ ( '#my-alert' ). bind ( 'lukket' , funksjon () {   
  // gjør noe…
})

Om

Gjør mer med knapper. Kontroller knappstatuser eller lag grupper med knapper for flere komponenter som verktøylinjer.

Eksempelbruk

Bruk knappene plugin for tilstander og veksler.

Bruker bootstrap-button.js

Aktiver knapper via javascript:

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

Markup

Dataattributter er integrert i knappen-plugin. Sjekk ut eksempelkoden nedenfor for de ulike markup-typene.

<!-- Legg til data-toggle="button" for å aktivere veksling på en enkelt knapp -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Legg til data-toggle="buttons-checkbox" for veksling av avkrysningsboksstil på btn-group -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Midt </button> 
  <button class = "btn" > Høyre </button> 
</div>
 
<!-- Legg til data-toggle="buttons-radio" for radiostil veksling på btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Venstre </button> 
  <button class = "btn" > Midt </button> 
  <button class = "btn" > Høyre </button> 
</div>

Metoder

$().button('toggle')

Bytter push-tilstand. Gir knappen det utseendet at den er aktivert.

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

$().button('laster')

Angir knappstatus til lasting - deaktiverer knapp og bytter tekst til lasting av tekst. Lastetekst skal defineres på knappeelementet ved hjelp av dataattributtet data-loading-text.

<button class = "btn" data-loading-text = "laster ting..." > ... </button>   

$().button('reset')

Tilbakestiller knappens tilstand - bytter tekst til originaltekst.

$().knapp(streng)

Tilbakestiller knappens tilstand - bytter tekst til hvilken som helst datadefinert teksttilstand.

<button class = "btn" data-complete-text = "ferdig!" > ... </knapp>   
<script>
  $ ( '.btn' ). knapp ( 'fullfør' )
</script>

Om

Få basisstiler og fleksibel støtte for sammenleggbare komponenter som trekkspill og navigasjon.

* Krever at Transitions-pluginen er inkludert.

Eksempel trekkspill

Ved å bruke kollaps-pluginen bygde vi en enkel trekkspillstil-widget:

Bruker bootstrap-collapse.js

Aktiver via javascript:

$ ( ".kollapse" ). kollapse ()

Alternativer

Markup

Bare legg til data-toggle="collapse"og et data-targettil-element for å automatisk tildele kontroll over et sammenleggbart element. Attributtet data-targetgodtar en css-velger å bruke sammenbruddet på. Sørg for å legge klassen collapsetil det sammenleggbare elementet. Hvis du vil at den skal åpnes som standard, legger du til den ekstra klassen in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  enkel sammenleggbar
</button>
 
<div id = "demo" class = "kollaps inn" > … </div>  

Metoder

.collapse(alternativer)

Aktiverer innholdet ditt som et sammenleggbart element. Godtar et valgfritt alternativ object.

$ ( '#myCollapsible' ). kollaps ({
  veksle : usant 
})

.collapse('toggle')

Bytter et sammenleggbart element til vist eller skjult.

.collapse('show')

Viser et sammenleggbart element.

.collapse('hide')

Skjuler et sammenleggbart element.

arrangementer

Bootstraps kollapsklasse avslører noen få hendelser for å koble seg til kollapsfunksjonalitet.

$ ( '#myCollapsible' ). på ( 'skjult' , funksjon () {   
  // gjør noe…
})

Om

En generisk plugin for å sykle gjennom elementer. En karusell.

Eksempel karusell

Se lysbildefremvisningen nedenfor.

Første miniatyrbildeetikett

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.

Andre miniatyrbildeetikett

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 miniatyrbildeetikett

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.

‹ ›

Bruker bootstrap-carousel.js

Ring via javascript:

$ ( '.carousel' ). karusell ()

Alternativer

Markup

Dataattributter brukes for forrige og neste kontroll. Sjekk ut eksempelmarkeringen nedenfor.

<div id = "myCarousel" class = "karusell lysbilde" >  
  <!-- Karusellartikler -->
  <div class = "karusell-inner" > 
    <div class = "aktivt element" > … </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 = "neste" > › </a>   
</div>

Metoder

.carousel(alternativer)

Initialiserer karusellen med valgfrie alternativer objectog begynner å sykle gjennom gjenstander.

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

.carousel('syklus')

Bla gjennom karusellelementene fra venstre til høyre.

.carousel('pause')

Stopper karusellen fra å sykle gjennom gjenstander.

.carousel(nummer)

Sykler karusellen til en bestemt ramme (0-basert, ligner på en matrise).

.carousel('prev')

Går til forrige element.

.carousel('neste')

Går til neste element.

arrangementer

Bootstraps karusellklasse avslører to hendelser for å koble til karusellfunksjonalitet.

Om

En enkel, enkelt utvidet plugin for raskt å lage elegante skrivehoder med hvilken som helst form for tekstinndata.

Eksempel

Begynn å skrive i feltet nedenfor for å vise fremskrivingsresultatene.

Bruker bootstrap-typeahead.js

Ring typeahead via javascript:

$ ( '.typeahead' ). typeahead ()

Alternativer

Markup

Legg til dataattributter for å registrere et element med typeahead-funksjonalitet.

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

Metoder

.typeahead(alternativer)

Initialiserer en inndata med en skriving.