Komponenty

Desítky opakovaně použitelných komponent vytvořených tak, aby poskytovaly navigaci, upozornění, vyskakovací okna a další.

Příklady

Dvě základní možnosti spolu se dvěma konkrétnějšími variantami.

Skupina s jedním tlačítkem

Zabalte řadu tlačítek .btns .btn-group.

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

Více skupin tlačítek

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>

Vertikální skupiny tlačítek

Zajistěte, aby se sada tlačítek jevila svisle, nikoli vodorovně.

  1. <div class = "btn-group btn-group-vertical" >
  2. ...
  3. </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. Prohlédněte si k tomu dokumenty 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

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.

  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: .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

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.

  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>

Velikosti

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

  1. <div class = "btn-group" >
  2. <button class = "btn btn-mini" > Akce </button>
  3. <button class = "btn btn-mini 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>

Standardní stránkování

Jednoduché stránkování 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.

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

Možnosti

Deaktivované a aktivní stavy

Odkazy lze přizpůsobit různým okolnostem. Použijte .disabledpro odkazy, na které nelze kliknout, a .activepro označení aktuální stránky.

  1. <div class = "stránkování" >
  2. <ul>
  3. <li class = "zakázáno" ><a href = "#" > « </a></li>
  4. <li class = "active" ><a href = "#" > 1 </a></li>
  5. ...
  6. </ul>
  7. </div>

Volitelně můžete vyměnit aktivní nebo zakázané kotvy za rozpětí, abyste odstranili funkci kliknutí při zachování zamýšlených stylů.

  1. <div class = "stránkování" >
  2. <ul>
  3. <li class = "zakázáno" ><span> « </span></li>
  4. <li class = "active" ><span> 1 </span></li>
  5. ...
  6. </ul>
  7. </div>

Velikosti

Máte chuť na větší nebo menší stránkování? Přidejte .pagination-large, .pagination-small, nebo .pagination-minipro další velikosti.

  1. <div class = "pagination pagination-large" >
  2. <ul>
  3. ...
  4. </ul>
  5. </div>
  6. <div class = "stránkování" >
  7. <ul>
  8. ...
  9. </ul>
  10. </div>
  11. <div class = "pagination pagination-small" >
  12. <ul>
  13. ...
  14. </ul>
  15. </div>
  16. <div class = "pagination pagination-mini" >
  17. <ul>
  18. ...
  19. </ul>
  20. </div>

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.

  1. <div class = "pagination pagination-centered" >
  2. ...
  3. </div>
  1. <div class = "pagination pagination-right" >
  2. ...
  3. </div>

Pager

Rychlé předchozí a následující odkazy pro jednoduché implementace stránkování s lehkým značením a styly. Je to skvělé pro jednoduché weby, jako jsou blogy nebo časopisy.

Výchozí příklad

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

  1. <ul class = "pager" >
  2. <li><a href = "#" > Předchozí </a></li>
  3. <li><a href = "#" > Další </a></li>
  4. </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>

Volitelný deaktivovaný stav

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

  1. <ul class = "pager" >
  2. <li class = "předchozí zakázáno" >
  3. <a href = "#" > Starší </a>
  4. </li>
  5. ...
  6. </ul>

Štítky

Š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>

Odznaky

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>

Snadno skládací

Pro snadnou implementaci se štítky a odznaky jednoduše sbalí (prostřednictvím :emptyselektoru CSS), když uvnitř neexistuje žádný obsah.

Jednotka hrdiny

Lehká a flexibilní součást pro prezentaci klíčového obsahu na vašem webu. Funguje dobře na marketingových a obsahově náročných webech.

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

  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>

Záhlaví stránky

Jednoduchý shell pro h1náležité 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 <small> Podtext pro záhlaví </small></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.

  • 300x200

    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

  • 300x200

    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

  • 300x200

    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 = "span4" >
  3. <a href = "#" class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" 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 = "span4" >
  3. <div class = "thumbnail" >
  4. <img data-src = "holder.js/300x200" alt = "" >
  5. <h3> Štítek miniatury </h3>
  6. <p> Popisek miniatur... </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.

Výchozí upozornění

Zabalte libovolný text a volitelné tlačítko pro zavírání .alertpro základní varovnou zprávu.

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

Zavřít tlačítka

Prohlížeče Mobile Safari a Mobile Opera kromě data-dismiss="alert"atributu vyžadují href="#"pro odmítnutí upozornění při použití <a>značky.

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

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.

  1. < typ tlačítka = "button" class = "zavřít" data-dismiss = "upozornění" > × </button>

Zavřít upozornění prostřednictvím JavaScriptu

Použijte plugin pro upozornění jQuery pro rychlé a snadné zrušení upozornění.


Možnosti

U delších zpráv zvyšte odsazení v horní a spodní části obálky výstrahy přidáním .alert-block.

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. < typ tlačítka = "button" class = "zavřít" data-dismiss = "upozornění" > × </button>
  3. <h4> Upozornění! </h4>
  4. Raději se přesvědčte sami, nejste...
  5. </div>

Kontextové alternativy

Chcete-li změnit konotaci výstrahy, přidejte volitelné třídy.

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" style = " šířka : 60 %; " ></div>
  3. </div>

Pruhovaný

Používá přechod k vytvoření pruhovaného efektu. Není k dispozici v IE7-8.

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

Animovaný

Přidat .activek .progress-stripedanimaci pruhů zprava doleva. Není k dispozici ve všech verzích IE.

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

Naskládané

Umístěte více tyčí do stejné .progressa stohujte je.

  1. <div class = "progress" >
  2. <div class = "bar bar-success" style = " width : 35 %; " ></div>
  3. <div class = "bar bar-warning" style = " width : 20 %; " ></div>
  4. <div class = "bar bar-danger" style = " width : 10 %; " ></div>
  5. </div>

Možnosti

Další barvy

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

  1. <div class = "progress progress-info" >
  2. <div class = "bar" style = " šířka : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success" >
  5. <div class = "bar" style = " šířka : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning" >
  8. <div class = "bar" style = " šířka : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger" >
  11. <div class = "bar" style = " šířka : 80 % " ></div>
  12. </div>

Pruhované pruhy

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

  1. <div class = "progress progress-info progress-striped" >
  2. <div class = "bar" style = " šířka : 20 % " ></div>
  3. </div>
  4. <div class = "progress progress-success progress-striped" >
  5. <div class = "bar" style = " šířka : 40 % " ></div>
  6. </div>
  7. <div class = "progress progress-warning progress-stripped" >
  8. <div class = "bar" style = " šířka : 60 % " ></div>
  9. </div>
  10. <div class = "progress progress-danger progress-striped" >
  11. <div class = "bar" style = " šířka : 80 % " ></div>
  12. </div>

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.

Verze starší než Internet Explorer 10 a Opera 12 nepodporují animace.

Styly abstraktních objektů pro vytváření různých typů komponent (jako jsou komentáře blogu, tweety atd.), které obsahují vedle textového obsahu obrázek zarovnaný doleva nebo doprava.

Výchozí příklad

Výchozí média umožňují vznášet mediální objekt (obrázky, video, zvuk) vlevo nebo vpravo od bloku obsahu.

64x64

Mediální nadpis

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Mediální nadpis

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
64x64

Mediální nadpis

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  1. <div class = "media" >
  2. <a class = "pull-left" href = "#" >
  3. <img class = "media-object" data-src = "holder.js/64x64" >
  4. </a>
  5. <div class = "media-body" >
  6. <h4 class = "media-heading" > Media title </h4>
  7. ...
  8.  
  9. <!-- Vnořený mediální objekt -->
  10. <div class = "media" >
  11. ...
  12. </div>
  13. </div>
  14. </div>

Seznam médií

S trochou zvláštního označení můžete použít média uvnitř seznamu (užitečné pro vlákna komentářů nebo seznamy článků).

  • 64x64

    Mediální nadpis

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    64x64

    Vnořený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Vnořený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    64x64

    Vnořený nadpis média

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • 64x64

    Mediální nadpis

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  1. <ul class = "media-list" >
  2. <li class = "media" >
  3. <a class = "pull-left" href = "#" >
  4. <img class = "media-object" data-src = "holder.js/64x64" >
  5. </a>
  6. <div class = "media-body" >
  7. <h4 class = "media-heading" > Media title </h4>
  8. ...
  9.  
  10. <!-- Vnořený mediální objekt -->
  11. <div class = "media" >
  12. ...
  13. </div>
  14. </div>
  15. </li>
  16. </ul>

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>

Volitelné třídy

Ovládejte výplň a zaoblené rohy pomocí dvou volitelných tříd modifikátorů.

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

Zavřít ikonu

Pomocí obecné ikony zavřít můžete odmítnout obsah, jako jsou modály a upozornění.

  1. <button class = "zavřít" > × </button>

Zařízení iOS vyžadují href="#"události pro kliknutí, pokud byste raději použili kotvu.

  1. <a class = "close" href = "#" > × </a>

Pomocné třídy

Jednoduché, zaměřené třídy pro malé úpravy zobrazení nebo chování.

.táhnout-vlevo

Posuňte prvek doleva

  1. třída = "vytáhnout doleva"
  1. . vytáhnout - vlevo {
  2. plovák : levý ;
  3. }

.tah-vpravo

Uveďte prvek doprava

  1. třída = "tah vpravo"
  1. . vytáhnout - vpravo {
  2. plovák : pravý ;
  3. }

.tlumený

Změňte barvu prvku na#999

  1. třída = "utlumený"
  1. . ztlumený {
  2. barva : #999;
  3. }

.clearfix

Vymažte floatna libovolném prvku

  1. class = "clearfix"
  1. . clearfix {
  2. * zoom : 1 ;
  3. &: před ,
  4. &: po {
  5. displej : tabulka ;
  6. obsah : "" ;
  7. }
  8. &: po {
  9. jasný : oba ;
  10. }
  11. }