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í	boolean, řetězec	Nepravdivé	Zahrnuje prvek modálního pozadí. Nastavte pozadí na, "static"pokud nechcete, aby se modal po kliknutí na pozadí zavřel.
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 = "static" > 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í ({
  klávesnice : 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í bootstrap-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í bootstrap-scrollspy.js

$ ( '#topbar' ). scrollSpy ()

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 nabízí další funkce pro správu stavu tlačítka.

Stažení

Pomocí bootstrap-buttons.js

$ ( '.tabs' ). tlačítko ()

Metody

$().button('toggle')

Přepíná stav push. Dává btn vzhled, že byl aktivován.

Upozornění Automatické přepínání tlačítka můžete povolit pomocí data-toggleatributu.

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

$().button('načítání')

Nastaví stav tlačítka na načítání - deaktivuje tlačítko a zamění text za načítání textu. Text načítání by měl být definován na prvku tlačítka pomocí atributu data data-loading-text.

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

$().button('reset')

Resetuje stav tlačítka - zamění text za původní text.

$().tlačítko(řetězec)

Resetuje stav tlačítka – přepne text do libovolného datově definovaného textového stavu.

<button class = "btn" data-complete-text = "dokončeno!" > ... </button>   
<script>
  $('.btn').button('complete')
</scrip>

Demo

Načítání ukázky Přepnout ukázku

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

Stažení

Pomocí bootstrap-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> 
</div>
 
<script>
  $ ( function () {  
    $ ( '.tabs' ). karty ()
  })
</script>

Události

událost	Popis
změna	Tato událost se spustí při změně karty. Pomocí event.targeta event.relatedTargetmůžete cílit na aktivní kartu a na předchozí aktivní kartu.

$ ( '#.tabs' ). bind ( 'změnit' , funkce ( e ) {   
  e . target // aktivovaná karta
  e . relatedTarget // předchozí záložka
})

Demo

• Domov
• Profil
• Zprávy
• Nastavení
• Rozbalovací nabídka
  • @Tlustý
  • @mdo

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
šablona	tětiva	[výchozí označení]	Šablona html použitá pro vykreslení twipsy.

Upozornění Jednotlivé volby twipsy instance lze alternativně zadat pomocí datových atributů.

<a href = "#" data-placement = "below" rel = 'twipsy' title = 'Nějaký text nadpisu' > text </a>    

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 bootstrap-twipsy.js , takže při začleňování vyskakovacích oken do svého projektu nezapomeňte vzít tento soubor také!

Upozornění Před bootstrap-popover.js musíte zahrnout soubor bootstrap-twipsy.js.

Stažení

Pomocí bootstrap-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	pixelový posun popisku od cílového prvku
titul	řetězec, funkce	'titul'	atribut nebo metoda pro načtení textu titulku
obsah	řetězec, funkce	'data-content'	řetězec nebo metoda pro načtení textu obsahu. nejsou-li poskytnuty žádné, obsah bude získáván z atributu obsahu dat.
spoušť	tětiva	'vznášet se'	jak se spouští nápověda - umístěte kurzor | zaměření | manuál
šablona	tětiva	[výchozí označení]	Šablona html použitá pro vykreslení vyskakovacího okna.

Upozornění Jednotlivé volby instance popover lze alternativně specifikovat pomocí datových atributů.

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

Metody

$().popover(options)

Inicializuje vyskakovací okna pro kolekci prvků.

.popover('show')

Odhalí vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'ukázat' )

.popover('hide')

Skryje vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'skrýt' )

Demo

najetím myší na vyskakovací okno

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.

Options

Name	type	default	description
selector	string	'.close'	What selector to target for closing an alert.

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