Vårt Modal-plugin är en supertunn version av det traditionella modal js-pluginet, och är särskilt noga med att bara inkludera den nakna funktionalitet som vi behöver här på twitter.

Ladda ner

Använder bootstrap-modal

$ ( '#my-modal' ). modal ( alternativ )

alternativ

namn	typ	standard	beskrivning
bakgrund	boolean, sträng	falsk	Inkluderar ett modal-bakgrundselement. Ställ in bakgrunden till "static"om du inte vill att modalen ska stängas när du klickar på bakgrunden.
tangentbord	booleskt	falsk	Stänger modalen när escape-tangenten trycks ned
show	booleskt	falsk	Öppnar modal vid klassinitiering

Pålägg

Du kan enkelt aktivera modaler på din sida utan att behöva skriva en enda rad med javascript. Ge bara ett element ett data-controls-modalattribut 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 modala alternativ, inkludera dem bara som dataattribut också.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "static" > Starta Modal </a>    

Observera Om du vill att din modal ska animeras in och ut, lägg bara till en .fadeklass till ditt .modalelement (se demon för att se detta i aktion).

Metoder

.modal(alternativ)

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

$ ( '#my-modal' ). modal ({
  tangentbord : sant 
})

.modal('toggle')

Växlar manuellt en modal.

$ ( '#my-modal' ). modal ( 'växla' )

.modal('show')

Öppnar en modal manuellt.

$ ( '#my-modal' ). modal ( 'visa' )

.modal('hide')

Döljer en modal manuellt.

$ ( '#my-modal' ). modal ( 'gömma' )

.modal(true)

Returnerar en elements modal klassinstans.

$ ( '#my-modal' ). modal ( sant )

Notis Alternativt kan detta hämtas med $().data('modal').

evenemang

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

Händelse	Beskrivning
show	Denna händelse aktiveras omedelbart när showinstansmetoden anropas.
visad	Den här händelsen aktiveras när modalen har gjorts synlig för användaren (väntar på att css-övergångar ska slutföras).
Dölj	Denna händelse aktiveras omedelbart när hideinstansmetoden har anropats.
dold	Den här händelsen aktiveras när modalen har döljts för användaren (väntar på att css-övergångar ska slutföras).

$ ( '#my-modal' ). bind ( 'dold' , function () {   
  // göra någonting ...
})

Demo

Starta Modal

Denna plugin är till för att lägga till dropdown-interaktion till bootstraps toppfält eller navigering med flikar.

Ladda ner

Använder bootstrap-dropdown.js

$ ( '#topbar' ). dropdown ()

Pålägg

Använd attributet för att snabbt lägga till rullgardinsfunktioner till valfritt nav-element data-dropdown. Alla giltiga bootstrap-rullgardinsmenyer kommer automatiskt att aktiveras.

<ul class = "flikar" > 
  <li class = "active" ><a href = "#" > Hem </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Dropdown </a>  
    <ul class = "rullgardinsmeny" > 
      <li><a href = "#" > Sekundär länk </a></li> 
      <li><a href = "#" > Något annat här </a></li> 
      <li class = "avdelare" ></li> 
      <li><a href = "#" > Ytterligare en länk </a></li> 
    </ul>
  </li>
</ul>

Observera Om ditt användargränssnitt har flera rullgardinsmenyer, överväg att lägga till data-dropdownattributet till ett mer betydande containerelement som .tabseller .topbar.

Metoder

$().dropdown()

Ett programmerat api för att aktivera menyer för en given topplist eller navigering med flikar.

Demo

Denna plugin är till för att lägga till scrollspy-interaktionen (automatisk uppdatering av nav) till bootstraps övre fält.

Ladda ner

Använder bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

Pålägg

För att enkelt lägga till scrollspy-beteende till din nav, lägg bara till data-scrollspyattributet till .topbar.

<div class = "topbar" data-scrollspy = "scrollspy" > ... </div>   

Metoder

$().scrollSpy()

Autoaktiverar navigeringsknapparna efter användarens rullningsposition.

$ ( 'kropp > .topbar' ). scrollSpy ()

Observera Topbar-ankartaggar måste ha lösbara id-mål. Till exempel måste ett <a href="#home">home</a>måste motsvara något i dom som <div id="home"></div>.

.scrollSpy('refresh')

Scrollspy cachar navigeringsknappar och sektionskoordinater för prestanda. Om du behöver uppdatera denna cache (troligtvis om du har dynamiskt innehåll) ring bara den här uppdateringsmetoden. Om du använde dataattributet för att definiera din scrollspy, ring bara refresh på kroppen.

$ ( 'kropp' ). scrollSpy ( 'uppdatera' )

Demo

Kolla in navigeringen i toppfältet på den här sidan.

Denna plugin erbjuder ytterligare funktionalitet för att hantera knappstatus.

Ladda ner

Använder bootstrap-buttons.js

$ ( '.tabs' ). knapp ()

Metoder

$().button('toggle')

Växlar push-tillstånd. Ger btn utseendet att den har aktiverats.

Observera Du kan aktivera automatisk växling av en knapp genom att använda data-toggleattributet.

<button class = "btn" data-toggle = "toggle" > ... </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').button('complete')
</script>

Demo

Laddar demo Växla Demo

Detta plugin lägger till snabb, dynamisk flik- och pillerfunktionalitet.

Ladda ner

Använder bootstrap-tabs.js

$ ( '.tabs' ). flikar ()

Pålägg

Du kan aktivera en flik- eller tablettnavigering utan att skriva något javascript genom att helt enkelt ge dem ett data-tabseller data-pillsattribut.

 <ul class = "tabs" data-tabs = "tabs" > ... </ul>   

Metoder

$().tabs eller $().pills

Aktiverar flik- och pillerfunktionalitet för en given behållare. Fliklänkar bör referera till ID i dokumentet.

<ul class = "flikar" > 
  <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 = "piller-innehåll" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profil" > ... </div> 
  <div id = "meddelanden" > ... </div> 
  <div id = "inställningar" > ... </div> 
</div>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). flikar ()
  })
</script>

evenemang

Händelse	Beskrivning
förändra	Denna händelse utlöses vid flikbyte. Använd event.targetoch event.relatedTargetför att rikta in den aktiva fliken respektive den föregående aktiva fliken.

$ ( '#.tabs' ). bind ( 'ändra' , funktion ( e ) {   
  e . mål // aktiverad flik
  e . relatedTarget // föregående flik
})

Demo

• Hem
• Profil
• Meddelanden
• inställningar
• Falla ner
  • @fett
  • @mdo

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

Ladda ner

Använder bootstrap-twipsy.js

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

alternativ

namn	typ	standard	beskrivning
animera	booleskt	Sann	tillämpa en css-fade-övergång på verktygstipset
försening i	siffra	0	fördröjning innan verktygstips visas (ms)
delayOut	siffra	0	fördröjning innan verktygstips döljs (ms)
Retirera	sträng	''	text som ska användas när ingen verktygstipstitel finns
placering	sträng	'ovan'	hur man placerar verktygstipset - ovan | nedan | vänster | höger
html	booleskt	falsk	tillåter html-innehåll i verktygstips
leva	booleskt	falsk	använd händelsedelegering istället för individuella händelsehanterare
offset	siffra	0	pixelförskjutning av verktygstips från målelement
titel	sträng, funktion	'titel'	attribut eller metod för att hämta titeltext
utlösare	sträng	'sväva'	hur verktygstips triggas - håll muspekaren | fokus | manuell
mall	sträng	[standarduppmärkning]	HTML-mallen som används för att rendera en twipsy.

Observera Individuella twipsy-instansalternativ kan alternativt specificeras genom att använda dataattribut.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Någon titeltext' > text </a>    

Metoder

$().twipsy(options)

Bifogar en twipsy-hanterare till en elementsamling.

.twipsy('show')

Avslöjar en twipsy element.

$ ( '#element' ). twipsy ( 'show' )

.twipsy('hide')

Döljer ett element twipsy.

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

.twipsy(true)

Returnerar en elements twipsy-klassinstans.

$ ( '#element' ). twipsy ( sant )

Notis Alternativt kan detta hämtas med $().data('twipsy').

Demo

Popover-pluginet ger ett enkelt gränssnitt för att lägga till popovers till din applikation. Det utökar plugin-programmet bootstrap-twipsy.js , så se till att ta tag i den filen också när du inkluderar popovers i ditt projekt!

Observera Du måste inkludera filen bootstrap-twipsy.js före bootstrap-popover.js.

Ladda ner

Använder bootstrap-popover.js

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

alternativ

namn	typ	standard	beskrivning
animera	booleskt	Sann	tillämpa en css-fade-övergång på verktygstipset
försening i	siffra	0	fördröjning innan verktygstips visas (ms)
delayOut	siffra	0	fördröjning innan verktygstips döljs (ms)
Retirera	sträng	''	text som ska användas när ingen verktygstipstitel finns
placering	sträng	'höger'	hur man placerar verktygstipset - ovan | nedan | vänster | höger
html	booleskt	falsk	tillåter html-innehåll i verktygstips
leva	booleskt	falsk	använd händelsedelegering istället för individuella händelsehanterare
offset	siffra	0	pixelförskjutning av verktygstips från målelement
titel	sträng, funktion	'titel'	attribut eller metod för att hämta titeltext
innehåll	sträng, funktion	"data-innehåll"	en sträng eller metod för att hämta innehållstext. om inget tillhandahålls kommer innehållet hämtas från ett datainnehållsattribut.
utlösare	sträng	'sväva'	hur verktygstips triggas - håll muspekaren | fokus | manuell
mall	sträng	[standarduppmärkning]	HTML-mallen som används för att rendera en popover.

Observera Individuella popover-instansalternativ kan alternativt specificeras genom att använda dataattribut.

<a data-placement = "below" href = "#" class = "btn danger" rel = "popover" > text </a>    

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

Demo

sväva för popover

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

Ladda ner

Använder bootstrap-alerts.js

$ ( ".alert-meddelande" ). varning ()

Pålägg

Lägg bara till ett data-alertattribut till dina varningsmeddelanden för att automatiskt ge dem nära funktionalitet.

alternativ

namn	typ	standard	beskrivning
väljare	sträng	'.stänga'	Vilken väljare du ska rikta in dig på för att stänga en varning.

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-meddelande" ). varning ( 'stäng' )

Demo