O spôsoboch

Efektívne, ale flexibilné, prevezme tradičný modálny doplnok javascript len ​​s minimálnou požadovanou funkčnosťou a inteligentnými predvolenými nastaveniami.

Statický príklad

Nižšie je staticky vykreslený modál.

Živá ukážka

Prepnite modal cez javascript kliknutím na tlačidlo nižšie. Posunie sa nadol a bude miznúť z hornej časti stránky.

Použitie bootstrap-modal

Zavolajte modal cez javascript:

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

možnosti

Označenie

Modály na svojej stránke môžete jednoducho aktivovať bez toho, aby ste museli napísať jediný riadok javascriptu. Stačí nastaviť data-toggle="modal"prvok ovládača s data-target="#foo"alebo href="#foo", ktorý zodpovedá ID modálneho prvku a po kliknutí sa spustí váš modal.

Ak chcete pridať možnosti do svojej modálnej inštancie, stačí ich zahrnúť ako ďalšie atribúty údajov buď do ovládacieho prvku alebo do samotného modálneho označenia.

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

<div class = "modal hide" id = "myModal" >  
  <div class = "modal-header" > 
    <button type = "button" class = "close" data-dismiss = "modal" > × </button>   
    <h3> Modálna hlavička </h3>
  </div>
  <div class = "modal-body" > 
    <p> Jedno jemné telo… </p>
  </div>
  <div class = "modal-footer" > 
    <a href = "#" class = "btn" data-dismiss = "modal" > Zavrieť </a>   
    <a href = "#" class = "btn btn-primary" > Uložiť zmeny </a>  
  </div>
</div>

Metódy

.modal(options)

Aktivuje váš obsah ako modálny. Prijíma voliteľné možnosti object.

$ ( '#myModal' ). modálny ({
  klávesnica : nepravda 
})

.modal('toggle')

Manuálne prepína modal.

$ ( '#myModal' ). modálny ( 'prepnúť' )

.modal('show')

Manuálne otvorí modál.

$ ( '#myModal' ). modálny ( 'zobraziť' )

.modal('hide')

Manuálne skryje modal.

$ ( '#myModal' ). modálny ( 'skryť' )

Diania

Modálna trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k modálnej funkcii.

$ ( '#myModal' ). on ( 'skryté' , funkcia () {   
  // urob niečo…
})

O rozbaľovacích zoznamoch

Pomocou tohto jednoduchého doplnku pridajte rozbaľovacie ponuky takmer ku všetkému v Bootstrape. Bootstrap obsahuje plnú podporu rozbaľovacej ponuky na navigačnom paneli, kartách a tabletkách.

Príklady

Kliknutím na rozbaľovacie navigačné odkazy v navigačnom paneli a tabletky nižšie otestujte rozbaľovacie zoznamy.

• Bežný odkaz
• Rozbaľovacia ponuka
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozbaľovacia ponuka 2
  • Action
  • Another action
  • Something else here
  • Separated link
• Rozbaľovacia ponuka 3
  • Action
  • Another action
  • Something else here
  • Separated link

Pomocou bootstrap-dropdown.js

Zavolajte rozbaľovacie zoznamy pomocou javascriptu:

$ ( '.dropdown-toggle' ). rozbaľovacia ponuka ()

Označenie

Ak chcete rýchlo pridať rozbaľovaciu funkciu k akémukoľvek prvku, stačí pridať data-toggle="dropdown"a každá platná rozbaľovacia ponuka bootstrap sa automaticky aktivuje.

<ul class = "nav nav-pills" > 
  <li class = "active" ><a href = "#" > Bežný odkaz </a></li>  
  <li class = "dropdown" id = "menu1" >  
    <a class = "dropdown-toggle" data-toggle = "dropdown" href = "#menu1" >   
      Rozbaľovacia ponuka
      <b class = "caret" </b> 
    </a>
    <ul class = "rozbaľovacia ponuka" > 
      <li><a href = "#" > Akcia </a></li> 
      <li><a href = "#" > Ďalšia akcia </a></li> 
      <li><a href = "#" > Tu je niečo iné </a></li> 
      <li class = "delider" ></li> 
      <li><a href = "#" > Samostatný odkaz </a></li> 
    </ul>
  </li>
  ...
</ul>

Ak chcete zachovať adresy URL nedotknuté, použite data-targetatribút namiesto atribútu href="#".

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" data-toggle = "dropdown" data-target = "#" href = "path/to/page.html" >    
      Rozbaľovacia ponuka
      <b class = "caret" </b> 
    </a>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </li>
</ul>

Metódy

$().rozbaľovacia ponuka()

Programové rozhranie API na aktiváciu ponúk pre danú navigačnú lištu alebo navigáciu s kartami.

Doplnok ScrollSpy slúži na automatickú aktualizáciu cieľov navigácie na základe pozície posúvania.

Príklad navigačného panela so scrollspy

Prejdite oblasťou nižšie a sledujte aktualizáciu navigácie. Rozbaľovacie podpoložky budú tiež zvýraznené. Skús to!

Pomocou bootstrap-scrollspy.js

Zavolajte scrollspy cez javascript:

$ ( '#navbar' ). scrollspy ()

Označenie

Ak chcete jednoducho pridať rolovacie správanie do navigácie v hornej lište, jednoducho pridajte data-spy="scroll"prvok, ktorý chcete špehovať (najčastejšie by to bolo telo).

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

Metódy

.scrollspy('refresh')

Keď používate scrollspy v spojení s pridávaním alebo odstraňovaním prvkov z DOM, budete musieť zavolať metódu refresh takto:

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

možnosti

Diania

Tento doplnok pridáva rýchlu, dynamickú funkciu kariet a tabletiek na prechod cez miestny obsah.

Príklady kariet

Kliknutím na karty nižšie môžete prepínať medzi skrytými panelmi, a to aj prostredníctvom rozbaľovacích ponúk.

• Domov
• Profil
• Rozbaľovacia ponuka
  • @fat
  • @mdo

Pomocou bootstrap-tab.js

Povoliť karty s tabuľkami prostredníctvom javascriptu (každá karta musí byť aktivovaná samostatne):

$ ( '#myTab a' ). klikni ( funkcia ( e ) {  
  e . zabrániťPredvolené ();
  $ ( toto ). tab ( 'zobraziť' );
})

Jednotlivé karty môžete aktivovať niekoľkými spôsobmi:

$ ( '#myTab a[href="#profile"]' ). tab ( 'zobraziť' ); // Vyberte kartu podľa názvu 
$ ( '#myTab a:first' ). tab ( 'zobraziť' ); // Vyberte prvú kartu 
$ ( '#myTab a:last' ). tab ( 'zobraziť' ); // Vyberte poslednú kartu 
$ ( '#myTab li:eq(2) a' ). tab ( 'zobraziť' ); // Vyberte tretiu kartu (indexovaná 0) 

Označenie

Môžete aktivovať navigáciu na karte alebo tablete bez písania akéhokoľvek javascriptu jednoduchým zadaním data-toggle="tab"alebo data-toggle="pill"na prvku. Pridaním tried nava nav-tabsna kartu ulsa použije štýl karty bootstrap.

<ul class = "nav nav-tabs" > 
  <li><a href = "#home" data-toggle = "tab" > Domov </a></li>  
  <li><a href = "#profile" data-toggle = "tab" > Profil </a></li>  
  <li><a href = "#messages" data-toggle = "tab" > Správy </a></li>  
  <li><a href = "#settings" data-toggle = "tab" > Nastavenia </a></li>  
</ul>

Metódy

$().tab

Aktivuje prvok karty a kontajner obsahu. Karta by mala mať buď a data-targetalebo hrefzacielenie na kontajnerový uzol v DOM.

<ul class = "nav nav-tabs" id = "myTab" >  
  <li class = "active" ><a href = "#home" > Domov </a></li>  
  <li><a href = "#profile" > Profil </a></li> 
  <li><a href = "#messages" > Správy </a></li> 
  <li><a href = "#settings" > Nastavenia </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>
  $ ( funkcia () {  
    $ ( '#myTab a:last' ). tab ( 'zobraziť' );
  })
</script>

Diania

$ ( 'a[data-toggle="tab"]' ). on ( 'zobrazené' , funkcia ( e ) {   
  e . target // aktivovaná tab
  e . relatedTarget // predchádzajúca karta
})

Informácie o popisoch

Inšpirované vynikajúcim doplnkom jQuery.tipsy, ktorý napísal Jason Frame; Popisy sú aktualizovanou verziou, ktorá sa nespolieha na obrázky, používa css3 na animácie a dátové atribúty na lokálne ukladanie titulov.

Príklad použitia Tooltipov

Umiestnením kurzora myši na odkazy nižšie zobrazíte popisy:

Pomocou bootstrap-tooltip.js

Spustite popis pomocou javascriptu:

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

možnosti

Označenie

Z výkonnostných dôvodov sú povolené Tooltip a Popover data-apis. Ak ich chcete použiť, stačí zadať možnosť výberu.

<a href = "#" rel = "tooltip" title = "first tooltip" > umiestnite kurzor myši na mňa </a>   

Metódy

$().tooltip(options)

Ku kolekcii prvkov pripojí popisovač.

.tooltip('show')

Zobrazí popis prvku.

$ ( '#element' ). popis ( 'zobraziť' )

.tooltip('hide')

Skryje popis prvku.

$ ( '#element' ). popis ( 'skryť' )

.tooltip('toggle')

Prepína popis prvku.

$ ( '#element' ). popis ( 'prepnúť' )

O popoveroch

Pridajte malé prekryvné vrstvy obsahu, ako sú tie na iPade, do ľubovoľného prvku, aby ste mohli umiestniť sekundárne informácie.

* Vyžaduje , aby bol zahrnutý popis

Príklad vyskakovacieho okna po umiestnení kurzora myši

Ak chcete spustiť kontextové okno, umiestnite kurzor myši na tlačidlo.

Pomocou bootstrap-popover.js

Povoliť vyskakovacie okná cez javascript:

$ ( '#príklad' ). vyskakovacie okno ( možnosti )

možnosti

Označenie

Z výkonnostných dôvodov sú povolené Tooltip a Popover data-apis. Ak ich chcete použiť, stačí zadať možnosť výberu.

Metódy

$().popover(options)

Inicializuje vyskakovacie okná pre kolekciu prvkov.

.popover('show')

Odhaľuje kontextové okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'zobraziť' )

.popover('hide')

Skryje vyskakovacie okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'skryť' )

.popover('toggle')

Prepína vyskakovacie okno prvkov.

$ ( '#element' ). vyskakovacie okno ( 'prepnúť' )

O upozorneniach

Výstražný doplnok je malá trieda na pridávanie blízkych funkcií k výstrahám.

Príklady upozornení

Doplnok výstrah funguje na bežných výstražných správach a blokuje správy.

Pomocou bootstrap-alert.js

Povoliť zrušenie upozornenia prostredníctvom javascriptu:

$ ( ".upozornenie" ). upozornenie ()

Označenie

Stačí pridať data-dismiss="alert"tlačidlo na zatvorenie, aby sa automaticky aktivovala funkcia zatvorenia upozornenia.

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

Metódy

$().alert()

Zabalí všetky upozornenia do funkcie blízkej. Ak chcete, aby sa vaše upozornenia po zatvorení animovali, uistite sa, že už majú aplikovanú triedu .fadea ..in

.alert('zavrieť')

Zatvorí upozornenie.

$ ( ".upozornenie" ). upozornenie ( 'zavrieť' )

Diania

Výstražná trieda Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii výstrahy.

$ ( '#my-upozornenie' ). bind ( 'zatvorené' , funkcia () {   
  // urob niečo…
})

O

Urobte viac s tlačidlami. Stavy ovládacích tlačidiel alebo vytváranie skupín tlačidiel pre viac komponentov, ako sú panely s nástrojmi.

Príklady použitia

Na stavy a prepínače použite doplnok tlačidiel.

Pomocou bootstrap-button.js

Povoliť tlačidlá cez javascript:

$ ( '.nav-tabs' ). tlačidlo ()

Označenie

Atribúty údajov sú neoddeliteľnou súčasťou doplnku tlačidiel. Pozrite si príklad kódu nižšie pre rôzne typy značiek.

<!-- Pridať data-toggle="button" na aktiváciu prepínania na jednom tlačidle -->
<button class = "btn" data-toggle = "button" > Jeden prepínač </button>  
 
<!-- Pridať data-toggle="buttons-checkbox" na prepínanie štýlu začiarkavacieho políčka v skupine 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>
 
<!-- Pridať data-toggle="buttons-radio" na prepínanie štýlu rádia v skupine btn -->
<div class = "btn-group" data-toggle = "buttons-radio" >  
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Vpravo </button> 
</div>

Metódy

$().button('toggle')

Prepína stav push. Dodáva tlačidlu vzhľad, že bolo aktivované.

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

$().button('načítava sa')

Nastaví stav tlačidla na načítanie - deaktivuje tlačidlo a zamení text za načítaný text. Načítavaný text by mal byť definovaný na prvku button pomocou atribútu data data-loading-text.

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

$().button('reset')

Resetuje stav tlačidla - zamení text na pôvodný text.

$().tlačidlo(reťazec)

Resetuje stav tlačidla - prepne text do ľubovoľného stavu textu definovaného údajmi.

<button class = "btn" data-complete-text = "dokončené!" > ... </button>   
<script>
  $ ( '.btn' ). tlačidlo ( 'kompletné' )
</script>

O

Získajte základné štýly a flexibilnú podporu pre skladacie komponenty, ako sú akordeóny a navigácia.

* Vyžaduje, aby bol zahrnutý doplnok Transitions.

Príklad akordeónu

Pomocou doplnku na zbalenie sme vytvorili jednoduchý widget v štýle akordeónu:

Pomocou bootstrap-collapse.js

Povoliť cez javascript:

$ ( ".collapse" ). kolaps ()

možnosti

Označenie

Stačí pridať data-toggle="collapse"a data-targetdo prvku, aby sa automaticky priradilo ovládanie skladacieho prvku. Atribút data-targetakceptuje selektor css, na ktorý sa má použiť zbalenie. Nezabudnite pridať triedu collapsedo skladacieho prvku. Ak chcete, aby bola predvolene otvorená, pridajte ďalšiu triedu in.

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

Metódy

.collapse(možnosti)

Aktivuje váš obsah ako skladací prvok. Prijíma voliteľné možnosti object.

$ ( '#myCollapsible' ). kolaps ({
  prepnúť : nepravda 
})

.collapse('toggle')

Prepne zbaliteľný prvok na zobrazený alebo skrytý.

.collapse('show')

Zobrazuje skladací prvok.

.collapse('skryť')

Skryje skladací prvok.

Diania

Trieda zbalenia Bootstrapu odhaľuje niekoľko udalostí na pripojenie k funkcii zbalenia.

$ ( '#myCollapsible' ). on ( 'skryté' , funkcia () {   
  // urob niečo…
})

O

Všeobecný doplnok na prepínanie medzi prvkami. Kolotoč.

Príklad kolotoča

Pozrite si prezentáciu nižšie.

Prvý štítok s miniatúrou

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.

Second Thumbnail label

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.

Third Thumbnail label

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.

‹ ›

Pomocou bootstrap-carousel.js

Zavolajte cez javascript:

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

možnosti

Označenie

Atribúty údajov sa používajú pre predchádzajúci a nasledujúci ovládací prvok. Pozrite si príklad označenia nižšie.

<div id = "myCarousel" class = "carousel slide" >  
  <!-- Položky karuselu -->
  <div class = "carousel-inner" > 
    <div class = "active item" > … </div> 
    <div class = "item" > … </div> 
    <div class = "item" > … </div> 
  </div>
  <!-- Carousel nav -->
  <a class = "carousel-control left" href = "#myCarousel" data-slide = "prev" > ‹ </a>   
  <a class = "carousel-control right" href = "#myCarousel" data-slide = "next" > › </a>   
</div>

Metódy

.kolotoč(možnosti)

Inicializuje kolotoč s voliteľnými možnosťami objecta začne cyklicky prechádzať položkami.

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

.carousel('cyklus')

Prechádza položkami kolotoča zľava doprava.

.carousel('pauza')

Zastaví kolotoč prechádzať položkami.

.carousel(číslo)

Cyklizuje karusel na konkrétny rámec (na základe 0, podobne ako pole).

.carousel('prev')

Prejde na predchádzajúcu položku.

.carousel('next')

Prejde na ďalšiu položku.

Diania

Trieda karuselu Bootstrap odhaľuje dve udalosti na pripojenie k funkcii karuselu.

O

Základný, jednoducho rozšírený plugin na rýchle vytváranie elegantných hlások s ľubovoľným zadávaním textu z formulára.

Príklad

Ak chcete zobraziť výsledky prepisovania, začnite písať do poľa nižšie.

Pomocou bootstrap-typeahead.js

Zavolajte typahead cez javascript:

$ ( '.typeahead' ). písať dopredu ()

možnosti

Označenie

Pridajte atribúty údajov na registráciu prvku s funkciou prepisovania.

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

Metódy

.typeahead(options)

Inicializuje vstup písaním dopredu.