O modálech

Efektivní, ale flexibilní, převzít tradiční javascript modální plugin pouze s minimální požadovanou funkčností a inteligentními výchozími nastaveními.

Statický příklad

Níže je staticky vykreslený modal.

Živé demo

Přepněte modal pomocí javascriptu kliknutím na tlačítko níže. Posune se dolů a zmizí z horní části stránky.

Použití bootstrap-modal

Zavolejte modal pomocí javascriptu:

$ ( '#myModal' ). modální ( možnosti )

Možnosti

Označení

Modály na své stránce můžete snadno aktivovat, aniž byste museli psát jediný řádek javascriptu. Stačí nastavit data-toggle="modal"prvek ovladače s data-target="#foo"nebo href="#foo", který odpovídá ID modálního prvku, a po kliknutí spustí váš modal.

Chcete-li také přidat možnosti do své modální instance, stačí je zahrnout jako další datové atributy buď do ovládacího prvku, nebo do samotného modálního označení.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modální záhlaví </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné tělo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Zavřít </a>   
    <a href = "#" class = "btn btn-primary" > Uložit změny </a>  
  </div>
</div>

Metody

.modal(options)

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

$ ( '#myModal' ). modální ({
  klávesnice : false 
})

.modal('toggle')

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

$ ( '#myModal' ). modální ( 'přepnout' )

.modal('show')

Ručně otevře modal.

$ ( '#myModal' ). modální ( 'ukázat' )

.modal('hide')

Ručně skryje modal.

$ ( '#myModal' ). modální ( 'skrýt' )

Události

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

$ ( '#myModal' ). on ( 'hidden' , function () {   
  // dělej něco…
})

O rozbalovacích seznamech

Pomocí tohoto jednoduchého pluginu přidejte rozbalovací nabídky téměř ke všemu v Bootstrapu. Bootstrap nabízí plnou podporu rozevírací nabídky na navigační liště, kartách a pilulkách.

Příklady

Kliknutím na rozbalovací navigační odkazy v navigační liště a pilulky níže otestujte rozevírací seznamy.

• Běžný odkaz
• Rozbalovací nabídka
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozbalovací nabídka 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozbalovací seznam 3
  • Action
  • Another action
  • Something else here
  • Separated link

Pomocí bootstrap-dropdown.js

Vyvolejte rozevírací seznamy pomocí javascriptu:

$ ( '.dropdown-toggle' ). rozbalovací nabídka ()

Označení

Chcete-li rychle přidat funkci rozevíracího seznamu k libovolnému prvku, stačí přidat data-toggle="dropdown"a jakýkoli platný rozevírací seznam bootstrap se automaticky aktivuje.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Běžný odkaz </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Rozbalovací nabídka
      <b class = "caret" ></b> 
    </a>
    <ul class = "rozbalovací nabídka" > 
      <li><a href = "#" > Akce </a></li> 
      <li><a href = "#" > Další akce </a></li> 
      <li><a href = "#" > Tady je něco jiného </a></li> 
      <li class = "rozdělovač" ></li> 
      <li><a href = "#" > Oddělený odkaz </a></li> 
    </ul>
  </li>
  ...
</ul>

Chcete-li adresy URL zachovat nedotčené, použijte data-targetnamísto atributu atribut href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Rozbalovací nabídka
      <b class = "caret" ></b> 
    </a>
    <ul class = "rozbalovací nabídka" > 
      ...
    </ul>
  </li>
</ul>

Metody

$().rozbalovací nabídka()

Programové rozhraní API pro aktivaci nabídek pro daný navigační panel nebo navigaci s kartami.

Zásuvný modul ScrollSpy slouží k automatické aktualizaci cílů navigace na základě pozice posouvání.

Příklad navigační lišty s scrollspy

Procházejte oblast níže a sledujte aktualizaci navigace. Rozbalovací podpoložky budou také zvýrazněny. Zkus to!

Pomocí bootstrap-scrollspy.js

Zavolejte scrollspy přes javascript:

$ ( '#navbar' ). scrollspy ()

Označení

Chcete-li snadno přidat scrollspy chování do vaší navigace na horní liště, stačí přidat data-spy="scroll"prvek, který chcete špehovat (nejčastěji by to bylo tělo).

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

Metody

.scrollspy('refresh')

Když používáte scrollspy ve spojení s přidáváním nebo odebíráním prvků z DOM, budete muset volat metodu refresh takto:

$ ( '[data-spy="scroll"]' ). každý ( function () {  
  var $spy = $ ( toto ). scrollspy ( 'obnovit' )
});

Možnosti

Události

Tento plugin přidává funkci rychlých, dynamických karet a pilulek pro přechod přes místní obsah.

Příklady karet

Klepnutím na níže uvedené karty můžete přepínat mezi skrytými panely, a to i prostřednictvím rozbalovacích nabídek.

• Domov
• Profil
• Rozbalovací nabídka
  • @fat
  • @mdo

Pomocí bootstrap-tab.js

Povolit záložky pomocí javascriptu (každou kartu je třeba aktivovat samostatně):

$ ( '#myTab a' ). klikni ( funkce ( e ) {  
  e . preventDefault ();
  $ ( toto ). karta ( 'zobrazit' );
})

Jednotlivé karty můžete aktivovat několika způsoby:

$ ( '#myTab a[href="#profile"]' ). karta ( 'zobrazit' ); // Vyberte kartu podle názvu 
$ ( '#myTab a:first' ). karta ( 'zobrazit' ); // Vyberte první kartu 
$ ( '#myTab a:last' ). karta ( 'zobrazit' ); // Vyberte poslední kartu 
$ ( '#myTab li:eq(2) a' ). karta ( 'zobrazit' ); // Vyberte třetí kartu (indexováno 0) 

Označení

Můžete aktivovat navigaci pomocí karty nebo pilulky bez psaní jakéhokoli javascriptu pouhým zadáním prvku data-toggle="tab"nebo data-toggle="pill"na prvek. Přidáním tříd nava nav-tabsna kartu ulse použije styl karty bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domovská stránka </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Zprávy </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavení </a></li>  
</ul>

Metody

$().tab

Aktivuje prvek karty a kontejner obsahu. Karta by měla mít buď a data-targetnebo hrefcílící na uzel kontejneru v modelu DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <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 = "tab-content" > 
  <div class = "tab-pane active" id = "home" > ... </div>  
  <div class = "tab-pane" id = "profile" > ... </div>  
  <div class = "tab-pane" id = "messages" > ... </div>  
  <div class = "tab-pane" id = "settings" > ... </div>  
</div>
 
<script>
  $ ( function () {  
    $ ( '#myTab a:last' ). karta ( 'zobrazit' );
  })
</script>

Události

$ ( 'a[data-toggle="tab"]' ). on ( 'show' , function ( e ) {   
  e . target // aktivovaná karta
  e . relatedTarget // předchozí záložka
})

O nástrojových nápovědách

Inspirováno vynikajícím pluginem jQuery.tipsy, který napsal Jason Frame; Popisky jsou aktualizovanou verzí, která se nespoléhá na obrázky, používá css3 pro animace a datové atributy pro místní úložiště titulů.

Příklad použití Tooltips

Umístěním kurzoru na níže uvedené odkazy zobrazíte popisky:

Pomocí bootstrap-tooltip.js

Spusťte popis pomocí javascriptu:

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

Možnosti

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

<a href = "#" rel = "tooltip" title = "first tooltip" > najeďte na mě </a>   

Metody

$().tooltip(options)

Připojí obslužný program popisku ke kolekci prvků.

.tooltip('show')

Zobrazí popisek prvku.

$ ( '#element' ). popis ( 'zobrazit' )

.tooltip('hide')

Skryje popisek prvku.

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

.tooltip('toggle')

Přepíná popisek prvku.

$ ( '#element' ). popis ( 'přepnout' )

O popovers

Přidejte malé překryvné vrstvy obsahu, jako jsou ty na iPadu, k libovolnému prvku pro uložení sekundárních informací.

* Vyžaduje zahrnutí popisku

Příklad vyskakovacího okna po najetí myší

Vyskakovací okno spustíte najetím na tlačítko.

Pomocí bootstrap-popover.js

Povolit vyskakovací okna pomocí javascriptu:

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

Možnosti

Označení

Z důvodů výkonu jsou povolena data-apis Tooltip a Popover. Pokud je chcete používat, zadejte možnost výběru.

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

.popover('toggle')

Přepíná vyskakovací okno prvků.

$ ( '#element' ). vyskakovací okno ( 'přepnout' )

O upozorněních

Výstražný plugin je malá třída pro přidávání blízkých funkcí k výstrahám.

Příklad upozornění

Zásuvný modul pro výstrahy funguje na běžných výstražných zprávách a blokuje zprávy.

Pomocí bootstrap-alert.js

Povolit odmítnutí upozornění pomocí javascriptu:

$ ( ".upozornění" ). upozornění ()

Označení

Stačí přidat data-dismiss="alert"k vašemu tlačítku zavřít a automaticky poskytnout funkci uzavření upozornění.

<a class = "zavřít" data-dismiss = "alert" href = "#" > × </a>   

Metody

$().alert()

Zabalí všechny výstrahy s funkcí zavření. Chcete-li, aby se vaše upozornění po zavření animovala, ujistěte se, že na ně již byla použita třída .fadea ..in

.alert('zavřít')

Zavře upozornění.

$ ( ".upozornění" ). upozornění ( 'zavřít' )

Události

Výstražná třída Bootstrapu odhaluje několik událostí pro zapojení do funkce výstrah.

$ ( '#my-upozornění' ). bind ( 'closed' , function () {   
  // dělej něco…
})

O

Udělejte více s tlačítky. Stavy ovládacích tlačítek nebo vytváření skupin tlačítek pro více komponent, jako jsou panely nástrojů.

Příklady použití

Pro stavy a přepínače použijte plugin tlačítek.

Pomocí bootstrap-button.js

Povolit tlačítka pomocí javascriptu:

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

Označení

Atributy dat jsou nedílnou součástí pluginu tlačítka. Podívejte se na níže uvedený příklad kódu pro různé typy označení.

<!-- Add data-toggle="button" pro aktivaci přepínání na jednom tlačítku -->
<button class = "btn" data-toggle = "button" > Single Toggle </button>  
 
<!-- Přidat data-toggle="buttons-checkbox" pro přepínání stylu zaškrtávacího políčka ve skupině btn -->
<div class = "btn-group" data-toggle = "buttons-checkbox" >  
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Vpravo </button> 
</div>
 
<!-- Přidat data-toggle="buttons-radio" pro přepínání stylu rádia na btn-group -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Vpravo </button> 
</div>

Metody

$().button('toggle')

Přepíná stav push. Dává tlačítku dojem, že bylo aktivováno.

<button class = "btn" data-toggle = "button" > … </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' ). tlačítko ( 'kompletní' )
</script>

O

Získejte základní styly a flexibilní podporu pro skládací komponenty, jako jsou akordeony a navigace.

* Vyžaduje zahrnutí pluginu Transitions.

Příklad akordeonu

Pomocí pluginu pro sbalení jsme vytvořili jednoduchý widget ve stylu akordeonu:

Pomocí bootstrap-collapse.js

Povolit pomocí javascriptu:

$ ( ".collapse" ). kolaps ()

Možnosti

Označení

Stačí přidat data-toggle="collapse"a data-targetk prvku a automaticky přiřadit ovládání skládacího prvku. Atribut data-targetpřijímá selektor css, na který se má použít sbalení. Nezapomeňte přidat třídu collapsedo skládacího prvku. Pokud chcete, aby se ve výchozím nastavení otevřela, přidejte další třídu in.

<button class = "btn btn-danger" data-toggle = "collapse" data-target = "#demo" >   
  jednoduchý skládací
</button>
 
<div id = "demo" class = "collapse in" > … </div>  

Metody

.collapse(options)

Aktivuje váš obsah jako sbalitelný prvek. Přijímá volitelné možnosti object.

$ ( '#myCollapsible' ). kolaps ({
  přepnout : nepravda 
})

.collapse('toggle')

Přepne sbalitelný prvek na zobrazený nebo skrytý.

.collapse('show')

Zobrazuje skládací prvek.

.collapse('skrýt')

Skrývá skládací prvek.

Události

Třída sbalení Bootstrapu odhaluje několik událostí pro zapojení do funkce sbalení.

$ ( '#myCollapsible' ). on ( 'hidden' , function () {   
  // dělej něco…
})

O

Obecný plugin pro procházení prvků. Kolotoč.

Příklad kolotoče

Podívejte se na prezentaci níže.

První štítek miniatury

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.

Druhý štítek miniatury

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.

Třetí štítek miniatury

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.

‹ ›

Pomocí bootstrap-carousel.js

Volejte přes javascript:

$ ( '.carousel' ). kolotoč ()

Možnosti

Označení

Atributy dat se používají pro předchozí a další ovládací prvky. Podívejte se na níže uvedený příklad označení.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Položky karuselu -->
  <div class = "carousel-inner" > 
    <div class = "aktivní položka" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "předchozí" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "další" > › </a>   
</div>

Metody

.carousel(options)

Inicializuje karusel s volitelnými možnostmi objecta začne procházet položky.

$ ( '.carousel' ). kolotoč ({
  interval : 2000 
})

.carousel('cyklus')

Prochází položky karuselu zleva doprava.

.carousel('pauza')

Zastaví kolotoč v procházení položek.

.carousel(číslo)

Cykluje karusel na konkrétní rámec (na základě 0, podobně jako pole).

.carousel('předchozí')

Přejde na předchozí položku.

.carousel('další')

Přejde na další položku.

Události

Třída karuselu Bootstrap odhaluje dvě události pro připojení k funkci karuselu.

O

Základní, snadno rozšířený plugin pro rychlé vytváření elegantních textových předloh s libovolným textovým vstupem z formuláře.

Příklad

Začněte psát do pole níže, aby se zobrazily výsledky přepisu.

Pomocí bootstrap-typeahead.js

Zavolejte typeahead přes javascript:

$ ( '.typeahead' ). překlep ()

Možnosti

Označení

Přidejte datové atributy pro registraci prvku s funkcí typu ahead.

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

Metody

.typeahead(options)

Inicializuje vstup s přepisem.