Náš modální plugin je super tenký pohled na tradiční modal js plugin, který věnuje zvláštní pozornost tomu, aby zahrnoval pouze holé funkce, které zde na Twitteru požadujeme.

Stažení

Použití bootstrap-modal

$ ( '#my-modal' ). modální ( možnosti )

Možnosti

název	typ	výchozí	popis
pozadí	booleovský	Nepravdivé	Zahrnuje prvek modálního pozadí
klávesnice	booleovský	Nepravdivé	Zavře modal po stisknutí klávesy Escape
ukázat	booleovský	Nepravdivé	Otevře modální při inicializaci třídy

Označení

Modály na své stránce můžete snadno aktivovat, aniž byste museli psát jediný řádek javascriptu. Stačí dát prvku data-controls-modalatribut, který odpovídá id modálního prvku, a po kliknutí se spustí váš modal. Chcete-li přidat modální možnosti, jednoduše je zahrňte také jako atributy dat.

<a class = "btn" data-controls-modal = "my-modal" data-backdrop = "true" > Spustit modal </a>    

Upozornění Pokud chcete, aby se váš modal animoval dovnitř a ven, přidejte .fadedo svého prvku třídu .modal(viz ukázka, abyste viděli, jak to funguje).

Metody

.modal(options)

Aktivuje váš obsah jako modální. Přijímá volitelné možnosti object.

$ ( '#my-modal' ). modální ({
  closeOnEscape : pravda 
})

.modal('toggle')

Ručně přepíná modal.

$ ( '#my-modal' ). modální ( 'přepnout' )

.modal('show')

Ručně otevře modal.

$ ( '#my-modal' ). modální ( 'ukázat' )

.modal('hide')

Ručně skryje modal.

$ ( '#my-modal' ). modální ( 'skrýt' )

.modal(true)

Vrátí instanci modální třídy prvků.

$ ( '#my-modal' ). modální ( pravda )

Upozornění Alternativně to lze získat pomocí $().data('modal').

Události

Modální třída Bootstrapu odhaluje několik událostí pro zapojení do modální funkčnosti.

událost	Popis
ukázat	Tato událost se spustí okamžitě při showvolání metody instance.
zobrazeno	Tato událost se spustí, když bude modal zviditelněn pro uživatele (bude čekat na dokončení přechodů css).
skrýt	Tato událost se spustí okamžitě po hidezavolání metody instance.
skrytý	Tato událost se spustí, když modal skončí skrytí před uživatelem (bude čekat na dokončení přechodů css).

$ ( '#my-modal' ). bind ( 'hidden' , function () {   
  // dělej něco ...
})

Demo

Spusťte Modal

Tento plugin slouží k přidání rozevíracího seznamu na horní lištu bootstrap nebo navigaci v záložkách.

Stažení

Pomocí boostrap-dropdown.js

$ ( '#topbar' ). rozbalovací nabídka ()

Označení

Chcete-li rychle přidat funkci rozevíracího seznamu k libovolnému prvku navigace, použijte data-dropdownatribut. Jakákoli platná rozevírací nabídka bootstrapu se automaticky aktivuje.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#" > Domovská stránka </a></li>  
  <li class = "dropdown" data-dropdown = "dropdown" >   
    <a href = "#" class = "dropdown-toggle" > Rozbalovací nabídka </a>  
    <ul class = "rozbalovací nabídka" > 
      <li><a href = "#" > Sekundární odkaz </a></li> 
      <li><a href = "#" > Tady je něco jiného </a></li> 
      <li class = "rozdělovač" ></li> 
      <li><a href = "#" > Další odkaz </a></li> 
    </ul>
  </li>
</ul>

Upozornění Pokud má vaše uživatelské rozhraní několik rozevíracích seznamů, zvažte přidání data-dropdownatributu do významnějšího prvku kontejneru, jako je .tabsnebo .topbar.

Metody

$().rozbalovací nabídka()

Programové rozhraní API pro aktivaci nabídek pro danou horní lištu nebo navigaci s kartami.

Demo

Tento plugin slouží k přidání interakce scrollspy (automatická aktualizace navigace) do horní lišty bootstrapu.

Stažení

Pomocí boostrap-scrollspy.js

$ ( '#topbar' ). rozbalovací nabídka ()

Označení

Chcete-li do navigace snadno přidat scrollspy chování, stačí přidat data-scrollspyatribut do .topbar.

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

Metody

$().scrollspy()

Automaticky aktivuje navigační tlačítka podle polohy posouvání uživatelů.

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

Všimněte si , že kotevní značky horní lišty musí mít rozlišitelné cíle id. Například <a href="#home">home</a>musí odpovídat něčemu v domku, jako je <div id="home"></div>.

.scrollspy('refresh')

Scrollspy ukládá navigační tlačítka a souřadnice sekcí pro výkon. Pokud potřebujete aktualizovat tuto mezipaměť (pravděpodobně pokud máte dynamický obsah), stačí zavolat tuto metodu aktualizace. Pokud jste použili atribut data k definování vašeho scrollspy, stačí zavolat refresh na tělo.

$ ( 'tělo' ). scrollspy ( 'obnovit' )

Demo

Podívejte se na navigaci v horní liště na této stránce.

Tento plugin přidává rychlé, dynamické funkce karet a pilulek.

Stažení

Pomocí boostrap-tabs.js

$ ( '.tabs' ). karty ()

Označení

Můžete aktivovat navigaci pomocí karty nebo pilulky bez psaní jakéhokoli javascriptu tím, že jim jednoduše přiřadíte atribut data-tabsnebo .data-pills

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

Metody

$().tabs nebo $().pilulky

Aktivuje funkci karty a pilulky pro daný kontejner. Odkazy na karty by měly odkazovat na ID v dokumentu.

<ul class = "tabs" > 
  <li class = "active" ><a href = "#home" > Home </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Zprávy </a></li> 
  <li><a href = "#settings" > Nastavení </a></li> 
</ul>
 
<div class = "pilul-content" > 
  <div class = "active" id = "home" > ... </div>  
  <div id = "profile" > ... </div> 
  <div id = "messages" > ... </div> 
  <div id = "nastavení" > ... </div> 
</ul>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). karty ()
  })
</script>

Demo

• Domov
• Profil
• Zprávy
• Nastavení

Založeno na vynikajícím pluginu jQuery.tipsy, který napsal Jason Frame; twipsy je aktualizovaná verze, která se nespoléhá na obrázky, používá css3 pro animace a datové atributy pro ukládání titulů!

Stažení

Pomocí bootstrap-twipsy.js

$ ( '#příklad' ). twipsy ( možnosti )

Možnosti

název	typ	výchozí	popis
animovat	booleovský	skutečný	použijte přechod css fade na popisek
Zpoždění	číslo	0	zpoždění před zobrazením popisku (ms)
zpoždění	číslo	0	zpoždění před skrytím popisku (ms)
ustoupit	tětiva	''	text, který se má použít, když není přítomen žádný nadpis popisku
umístění	tětiva	'výše'	jak umístit nápovědu – výše | níže | vlevo | že jo
html	booleovský	Nepravdivé	umožňuje html obsah v popisku
žít	booleovský	Nepravdivé	použijte delegování událostí místo jednotlivých obslužných rutin událostí
offset	číslo	0	pixelový posun popisku od cílového prvku
titul	řetězec | funkce	'titul'	atribut nebo metoda pro načtení textu titulku
spoušť	tětiva	'vznášet se'	jak se spouští nápověda - umístěte kurzor | zaměření | manuál

Metody

$().twipsy(options)

Připojí obslužnou rutinu twipsy ke kolekci prvků.

.twipsy('show')

Odhaluje prvky twipsy.

$ ( '#element' ). twipsy ( 'ukázat' )

.twipsy('skrýt')

Skryje prvky twipsy.

$ ( '#element' ). twipsy ( 'skrýt' )

.twipsy (pravda)

Vrátí instanci třídy elementů twipsy.

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

Upozornění Alternativně to lze získat pomocí $().data('twipsy').

Demo

Popover plugin poskytuje jednoduché rozhraní pro přidávání popoverů do vaší aplikace. Rozšiřuje plugin boostrap-twipsy.js , takže při začleňování vyskakovacích oken do svého projektu nezapomeňte vzít tento soubor také!

Stažení

Pomocí boostrap-popover.js

$ ( '#příklad' ). vyskakovací okno ( možnosti )

Možnosti

název	typ	výchozí	popis
animovat	booleovský	skutečný	použijte přechod css fade na popisek
Zpoždění	číslo	0	zpoždění před zobrazením popisku (ms)
zpoždění	číslo	0	zpoždění před skrytím popisku (ms)
ustoupit	tětiva	''	text, který se má použít, když není přítomen žádný nadpis popisku
umístění	tětiva	'že jo'	jak umístit nápovědu – výše | níže | vlevo | že jo
html	booleovský	Nepravdivé	umožňuje html obsah v popisku
žít	booleovský	Nepravdivé	použijte delegování událostí místo jednotlivých obslužných rutin událostí
offset	číslo	0	pixel offset of tooltip from target element
title	string | function	'title'	attribute or method for retrieving title text
content	string | function	'data-content'	attribute or method for retrieving content text
trigger	string	'hover'	how tooltip is triggered - hover | focus | manual

Methods

$().popover(options)

Initializes popovers for an element collection.

.popover('show')

Reveals an elements popover.

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

.popover('hide')

Hides an elements popover.

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

Demo

hover for popover

The alert plugin is a super tiny class for adding close functionality to alerts.

Download

Using bootstrap-alerts.js

$(".alert-message").alert()

Markup

Just add a data-alert attribute to your alert messages to automatically give them close functionality.

Methods

$().alert()

Wraps all alerts with close functionality. To have your alerts animate out when closed, make sure they have the .fade and .in class already applied to them.

.alert('close')

Closes an alert.

$(".alert-message").alert('close')

Demo