Komponenty

Do Bootstrapu jsou zabudovány desítky opakovaně použitelných komponent, které poskytují navigaci, upozornění, vyskakovací okna a mnoho dalšího.

Skupiny tlačítek

Pomocí skupin tlačítek můžete spojit více tlačítek dohromady jako jednu složenou komponentu. Sestavte je pomocí řady prvků <a>nebo <button>prvků.

Osvědčené postupy

Pro používání skupin tlačítek a panelů nástrojů doporučujeme následující pokyny:

  • Vždy používejte stejný prvek v jedné skupině tlačítek <a>nebo <button>.
  • Nemíchejte tlačítka různých barev ve stejné skupině tlačítek.
  • Kromě textu nebo místo něj používejte ikony, ale nezapomeňte tam, kde je to vhodné, uvést alternativní text a text nadpisu.

Související skupiny tlačítek s rozevíracími seznamy (viz níže) by měly být vyvolány samostatně a vždy by měly obsahovat rozbalovací stříšku označující zamýšlené chování.

Výchozí příklad

Zde je návod, jak HTML hledá standardní skupinu tlačítek vytvořenou s tlačítky kotevní značky:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Příklad lišty nástrojů

Kombinujte sady <div class="btn-group">do <div class="btn-toolbar">pro složitější komponenty.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Příchutě zaškrtávacího políčka a rádia

Skupiny tlačítek mohou také fungovat jako rádia, kde může být aktivní pouze jedno tlačítko, nebo zaškrtávací políčka, kde může být aktivní libovolný počet tlačítek. Podívejte se na dokumenty Javascript k tomu.

Získejte javascript »

Rozbalovací seznamy ve skupinách tlačítek

Hlavy vzhůru! Tlačítka s rozevíracími seznamy musí být pro správné vykreslení jednotlivě zabalena .btn-groupdo sebe..btn-toolbar

Rozbalovací seznamy tlačítek

Přehled a příklady

Pomocí libovolného tlačítka spustíte rozevírací nabídku tak, že ji umístíte do a .btn-groupa poskytnete správnou značku nabídky.

Příklad označení

Podobně jako skupina tlačítek používá naše značkování běžné značkování tlačítek, ale s několika doplňky pro upřesnění stylu a podporu rozbalovacího pluginu jQuery Bootstrapu.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >
  3. Akce
  4. <span class = "caret" ></span>
  5. </a>
  6. <ul class = "rozbalovací nabídka" >
  7. <!-- odkazy na rozbalovací nabídku -->
  8. </ul>
  9. </div>

Funguje se všemi velikostmi tlačítek

Rozbalovací seznamy tlačítek fungují v jakékoli velikosti. velikost vašich tlačítek je .btn-large, .btn-small, nebo .btn-mini.

Vyžaduje javascript

Rozbalovací seznamy tlačítek vyžadují, aby fungoval rozbalovací plugin Bootstrap .

V některých případech – například na mobilních zařízeních – se rozbalovací nabídky rozšíří mimo výřez. Zarovnání musíte vyřešit ručně nebo pomocí vlastního javascriptu.


Rozbalovací seznamy tlačítka Rozdělit

Přehled a příklady

Na základě stylů a označení skupiny tlačítek můžeme snadno vytvořit rozdělené tlačítko. Rozdělit tlačítka mají standardní akci vlevo a rozbalovací přepínač vpravo s kontextovými odkazy.

Velikosti

Pro změnu velikosti použijte další třídy tlačítek .btn-mini, .btn-smallnebo .btn-large.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "rozbalovací nabídka pull-right" >
  4. <!-- odkazy na rozbalovací nabídku -->
  5. </ul>
  6. </div>

Příklad označení

Rozšířili jsme rozbalovací seznamy normálních tlačítek, abychom poskytli akci druhého tlačítka, která funguje jako samostatný rozbalovací spouštěč.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Akce </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rozbalovací nabídka" >
  7. <!-- odkazy na rozbalovací nabídku -->
  8. </ul>
  9. </div>

Rozbalovací nabídky

Rozbalovací nabídky lze také přepínat zdola nahoru přidáním jedné třídy k bezprostřednímu nadřazenému prvku .dropdown-menu. Obrátí směr .careta přemístí samotnou nabídku tak, aby se pohybovala zdola nahoru místo shora dolů.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" ></span>
  5. </button>
  6. <ul class = "rozbalovací nabídka" >
  7. <!-- odkazy na rozbalovací nabídku -->
  8. </ul>
  9. </div>

Stránkování s více stránkami

Kdy použít

Ultra zjednodušené stránkování v minimálním stylu inspirované Rdio, skvělé pro aplikace a výsledky vyhledávání. Velký blok je těžké přehlédnout, je snadno škálovatelný a poskytuje velké klikací plochy.

Stavové odkazy na stránky

Odkazy jsou přizpůsobitelné a fungují za mnoha okolností se správnou třídou. .disabledpro neklikatelné odkazy a .activepro aktuální stránku.

Flexibilní zarovnání

Chcete-li změnit zarovnání stránkovacích odkazů, přidejte jednu ze dvou volitelných tříd: .pagination-centereda .pagination-right.

Příklady

Výchozí komponenta stránkování je flexibilní a funguje v mnoha variantách.

Označení

Stránkování, zabalené v <div>, je jen <ul>.

  1. <div class = "stránkování" >
  2. <ul>
  3. <li><a href = "#" > Předchozí </a></li>
  4. <li class = "active" >
  5. <a href = "#" > 1 </a>
  6. </li>
  7. <li><a href = "#" > 2 </a></li>
  8. <li><a href = "#" > 3 </a></li>
  9. <li><a href = "#" > 4 ​​</a></li>
  10. <li><a href = "#" > Další </a></li>
  11. </ul>
  12. </div>

Pager Pro rychlé předchozí a následující odkazy

O pageru

Komponenta pageru je sada odkazů pro jednoduché implementace stránkování s lehkým značením a ještě lehčími styly. Je to skvělé pro jednoduché weby, jako jsou blogy nebo časopisy.

Volitelný deaktivovaný stav

Odkazy na pager také používají obecnou .disabledtřídu ze stránkování.

Výchozí příklad

Ve výchozím nastavení pager vycentruje odkazy.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#" > Předchozí </a>
  4. </li>
  5. <li>
  6. <a href = "#" > Další </a>
  7. </li>
  8. </ul>

Zarovnané odkazy

Případně můžete každý odkaz zarovnat ke stranám:

  1. <ul class = "pager" >
  2. <li class = "předchozí" >
  3. <a href = "#" > Starší </a>
  4. </li>
  5. <li class = "další" >
  6. <a href = "#" > Novější → </a>
  7. </li>
  8. </ul>
Štítky Označení
Výchozí <span class="label">Default</span>
Úspěch <span class="label label-success">Success</span>
Varování <span class="label label-warning">Warning</span>
Důležité <span class="label label-important">Important</span>
Info <span class="label label-info">Info</span>
Inverzní <span class="label label-inverse">Inverse</span>

O

Odznaky jsou malé, jednoduché součásti pro zobrazení ukazatele nebo počtu určitého druhu. Běžně se vyskytují v e-mailových klientech, jako je Mail.app, nebo v mobilních aplikacích pro oznámení push.

Dostupné třídy

název Příklad Označení
Výchozí 1 <span class="badge">1</span>
Úspěch 2 <span class="badge badge-success">2</span>
Varování 4 <span class="badge badge-warning">4</span>
Důležité 6 <span class="badge badge-important">6</span>
Info 8 <span class="badge badge-info">8</span>
Inverzní 10 <span class="badge badge-inverse">10</span>

Jednotka hrdiny

Bootstrap poskytuje lehkou a flexibilní komponentu zvanou hrdina, která předvádí obsah na vašem webu. Funguje dobře na marketingových a obsahově náročných webech.

Označení

Zabalte svůj obsah divtakto:

  1. <div class = "hero-unit" >
  2. <h1> Nadpis </h1>
  3. <p> Slogan </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large" >
  6. Zjistěte více
  7. </a>
  8. </p>
  9. </div>

Ahoj světe!

Jedná se o jednoduchou jednotku hrdiny, jednoduchou komponentu ve stylu jumbotronu, která přitahuje zvláštní pozornost k doporučenému obsahu nebo informacím.

Zjistěte více

Záhlaví stránky

Jednoduchý shell pro h1vhodné rozmístění a segmentaci částí obsahu na stránce. Může využívat h1výchozí smallprvek , stejně jako většinu ostatních komponent (s dalšími styly).

  1. <div class = "page-header" >
  2. <h1> Příklad záhlaví stránky </h1>
  3. </div>

Výchozí miniatury

Ve výchozím nastavení jsou miniatury Bootstrapu navrženy tak, aby zobrazovaly připojené obrázky s minimálním požadovaným označením.

Vysoce přizpůsobitelné

S trochou zvláštního označení je možné do miniatur přidat jakýkoli druh obsahu HTML, jako jsou nadpisy, odstavce nebo tlačítka.

  • Miniatura štítku

    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.

    Akce Akce

  • Miniatura štítku

    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.

    Akce Akce

Proč používat miniatury

Miniatury (dříve .media-gridaž do verze 1.4) jsou skvělé pro mřížky fotografií nebo videí, výsledky vyhledávání obrázků, maloobchodní produkty, portfolia a mnoho dalšího. Mohou to být odkazy nebo statický obsah.

Jednoduché, flexibilní značení

Označení miniatur je jednoduché – stačí ulpouze libovolný počet liprvků. Je také velmi flexibilní a umožňuje jakýkoli typ obsahu s o něco větším označením pro zabalení obsahu.

Používá velikosti sloupců mřížky

A konečně, komponenta miniatur používá existující třídy systému mřížky – jako .span2nebo .span3– pro ovládání rozměrů miniatur.

Označení

Jak již bylo zmíněno dříve, požadované označení pro miniatury je lehké a přímočaré. Zde je pohled na výchozí nastavení pro propojené obrázky :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

U vlastního obsahu HTML v miniaturách se označení mírně změní. Abychom povolili obsah na úrovni blokování kdekoli, vyměníme <a>za <div>podobné:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Štítek miniatury </h5>
  6. <p> Popisek miniatur zde... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Další příklady

Prozkoumejte všechny své možnosti s různými třídami mřížky, které máte k dispozici. Můžete také kombinovat různé velikosti.

Lehké výchozí nastavení

Přepsaná základní třída

S Bootstrap 2 jsme zjednodušili základní třídu: .alertnamísto .alert-message. Také jsme snížili minimální požadované označení – <p>ve výchozím nastavení není vyžadováno žádné, pouze vnější <div>.

Jediná výstražná zpráva

Aby byla komponenta odolnější s menším množstvím kódu, odstranili jsme rozlišující vzhled upozornění na blokování, zpráv, které přicházejí s větším odsazením a obvykle více textu. Třída se také změnila na .alert-block.


Skvěle to jde s javascriptem

Bootstrap přichází se skvělým zásuvným modulem jQuery, který podporuje výstražné zprávy, takže je lze rychle a snadno zrušit.

Získat plugin »

Příklad upozornění

Zabalte svou zprávu a volitelnou ikonu zavřít do prvku div s jednoduchou třídou.

Varování! Raději se přesvědčte, že nevypadáte příliš dobře.
  1. <div class = "alert" >
  2. <button class = "close" data-dismiss = "alert" > × </button>
  3. <strong> Upozornění! </strong> Nejlépe se přesvědčte, že nevypadáte příliš dobře.
  4. </div>

Hlavy vzhůru! Zařízení iOS vyžadují href="#"pro zrušení výstrah. Nezapomeňte jej uvést a datový atribut pro ikony zavírání kotvy. Alternativně můžete použít <button>prvek s atributem data, který jsme se rozhodli použít pro naše dokumenty. Při použití <button>musíte zahrnout, type="button"jinak se vaše formuláře nemusí odeslat.

Snadno rozšiřte standardní výstražnou zprávu o dvě volitelné třídy: .alert-blockpro více odsazení a ovládacích prvků textu a .alert-headingpro odpovídající nadpis.

Varování!

Raději se přesvědčte, že nevypadáte příliš dobře. Nulla vitae elitní libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#" > × </a>
  3. <h4 class = "alert-heading" > Varování! </h4>
  4. Raději se přesvědčte sami, nejste...
  5. </div>

Kontextové alternativy Přidejte volitelné třídy, abyste změnili konotaci výstrahy

Chyba nebo nebezpečí

Kruci! Změňte pár věcí a zkuste odeslání znovu.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Úspěch

Výborně! Úspěšně jste si přečetli tuto důležitou výstražnou zprávu.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Informace

Hlavy vzhůru! Toto upozornění vyžaduje vaši pozornost, ale není příliš důležité.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Příklady a značení

Základní

Výchozí ukazatel průběhu se svislým přechodem.

  1. <div class = "progress" >
  2. <div class = "bar"
  3. style = " šířka : 60 %; " ></div>
  4. </div>

Pruhovaný

Používá přechod k vytvoření pruhovaného efektu (bez IE).

  1. <div class = "progress progress-striped" >
  2. <div class = "bar"
  3. style = " šířka : 20 %; " ></div>
  4. </div>

Animovaný

Vezme pruhovaný příklad a animuje ho (bez IE).

  1. <div class = "progress progress-stripped
  2. aktivní" >
  3. <div class = "bar"
  4. style = " šířka : 40 %; " ></div>
  5. </div>

Možnosti a podpora prohlížeče

Další barvy

Ukazatele průběhu používají některé stejné třídy tlačítek a výstrah pro konzistentní styly.

Pruhované pruhy

Podobně jako u plných barev máme různé pruhované ukazatele průběhu.

Chování

Progress bary používají přechody CSS3, takže pokud dynamicky upravíte šířku pomocí javascriptu, plynule se změní velikost.

Pokud použijete .activetřídu, vaše .progress-stripedukazatele průběhu budou animovat pruhy zleva doprava.

Podpora prohlížeče

Ukazatele průběhu používají přechody, přechody a animace CSS3 k dosažení všech svých efektů. Tyto funkce nejsou podporovány v IE7-9 nebo starších verzích Firefoxu.

Opera a IE v tuto chvíli nepodporují animace.

Wells

Použijte studnu jako jednoduchý efekt na prvek, abyste získali vložený efekt.

Podívej, jsem ve studni!
  1. <div class = "well" >
  2. ...
  3. </div>

Zavřít ikonu

Use the generic close icon for dismissing content like modals and alerts.

  1. <button class="close">&times;</button>

iOS devices require an href="#" for click events if you rather use an anchor.

  1. <a class="close" href="#">&times;</a>