Desítky opakovaně použitelných komponent vytvořených tak, aby poskytovaly navigaci, upozornění, vyskakovací okna a další.
Přepínatelné, kontextové menu pro zobrazení seznamů odkazů. Vytvořeno interaktivní pomocí rozbalovacího javascriptového pluginu .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Akce </a></li>
- <li><a tabindex = "-1" href = "#" > Další akce </a></li>
- <li><a tabindex = "-1" href = "#" > Zde je něco jiného </a></li>
- <li class = "rozdělovač" ></li>
- <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>
- </ul>
Podíváte-li se pouze na rozbalovací nabídku, zde je požadovaný kód HTML. Musíte zabalit spouštěč rozbalovací nabídky a rozbalovací nabídku do .dropdown
, nebo jiného prvku, který deklaruje position: relative;
. Poté stačí vytvořit menu.
- <div class = "dropdown" >
- <!-- Odkaz nebo tlačítko pro přepínání rozevírací nabídky -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Akce </a></li>
- <li><a tabindex = "-1" href = "#" > Další akce </a></li>
- <li><a tabindex = "-1" href = "#" > Zde je něco jiného </a></li>
- <li class = "rozdělovač" ></li>
- <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>
- </ul>
- </div>
Zarovnejte nabídky doprava a přidejte další úrovně rozbalovacích nabídek.
Přidat .pull-right
do a .dropdown-menu
zarovnat rozbalovací nabídku doprava.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Přidejte další úroveň rozevíracích nabídek, které se zobrazují při umístění kurzoru myši jako v OS X, s několika jednoduchými doplňky. Chcete-li automatický styl upravovat, přidejte .dropdown-submenu
do li
existující rozbalovací nabídky.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "rozbalovací-podnabídka" >
- <a tabindex = "-1" href = "#" > Další možnosti </a>
- <ul class = "rozbalovací nabídka" >
- ...
- </ul>
- </li>
- </ul>
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.
- <div class = "stránkování" >
- <ul>
- <li><a href = "#" > Předchozí </a></li>
- <li><a href = "#" > 1 </a></li>
- <li><a href = "#" > 2 </a></li>
- <li><a href = "#" > 3 </a></li>
- <li><a href = "#" > 4 </a></li>
- <li><a href = "#" > Další </a></li>
- </ul>
- </div>
Odkazy lze přizpůsobit různým okolnostem. Použijte .disabled
pro odkazy, na které nelze kliknout, a .active
pro označení aktuální stránky.
- <div class = "stránkování" >
- <ul>
- <li class = "disabled" ><a href = "#" > Předchozí </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </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ů.
- <div class = "stránkování" >
- <ul>
- <li class = "disabled" ><span> Předchozí </span></li>
- <li class = "active" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Chcete-li změnit zarovnání stránkovacích odkazů, přidejte jednu ze dvou volitelných tříd: .pagination-centered
a .pagination-right
.
- <div class = "pagination pagination-centered" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
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.
Ve výchozím nastavení pager vycentruje odkazy.
- <ul class = "pager" >
- <li><a href = "#" > Předchozí </a></li>
- <li><a href = "#" > Další </a></li>
- </ul>
Případně můžete každý odkaz zarovnat ke stranám:
- <ul class = "pager" >
- <li class = "předchozí" >
- <a href = "#" > ← Starší </a>
- </li>
- <li class = "další" >
- <a href = "#" > Novější → </a>
- </li>
- </ul>
Odkazy na pager také používají .disabled
třídu obecného nástroje ze stránkování.
- <ul class = "pager" >
- <li class = "předchozí zakázáno" >
- <a href = "#" > ← Starší </a>
- </li>
- ...
- </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> |
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> |
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.
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.
- <div class = "hero-unit" >
- <h1> Nadpis </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Zjistěte více
- </a>
- </p>
- </div>
Jednoduchý shell pro h1
náležité rozmístění a segmentaci částí obsahu na stránce. Může využívat h1
výchozí small
prvek , stejně jako většinu ostatních komponent (s dalšími styly).
- <div class = "page-header" >
- <h1> Příklad záhlaví stránky <small> Podtext pro záhlaví </small></h1>
- </div>
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.
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.
Miniatury (dříve .media-grid
až 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.
Označení miniatur je jednoduché – stačí ul
pouze libovolný počet li
prvků. Je také velmi flexibilní a umožňuje jakýkoli typ obsahu s o něco větším označením pro zabalení obsahu.
A konečně, komponenta miniatur používá existující třídy systému mřížky – jako .span2
nebo .span3
– pro ovládání rozměrů miniatur.
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 :
- <ul class = "thumbnails" >
- <li class = "span4" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </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é:
- <ul class = "thumbnails" >
- <li class = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Štítek miniatury </h3>
- <p> Popisek miniatur... </p>
- </div>
- </li>
- ...
- </ul>
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.
Zabalte libovolný text a volitelné tlačítko pro zavírání .alert
pro základní varovnou zprávu.
- <div class = "alert" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Upozornění! </strong> Nejlépe se přesvědčte, že nevypadáte příliš dobře.
- </div>
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.
- <a href = "#" class = "close" 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.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Použijte plugin pro upozornění jQuery pro rychlé a snadné zrušení upozornění.
U delších zpráv zvyšte odsazení v horní a spodní části obálky výstrahy přidáním .alert-block
.
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.
- <div class = "alert alert-block" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Upozornění! </h4>
- Raději se přesvědčte sami, nejste...
- </div>
Chcete-li změnit konotaci výstrahy, přidejte volitelné třídy.
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Výchozí ukazatel průběhu se svislým přechodem.
- <div class = "progress" >
- <div class = "bar" style = " šířka : 60 %; " ></div>
- </div>
Používá přechod k vytvoření pruhovaného efektu. Není k dispozici v IE7-8.
- <div class = "progress progress-stripped" >
- <div class = "bar" style = " šířka : 20 %; " ></div>
- </div>
Přidat .active
k .progress-striped
animaci pruhů zprava doleva. Není k dispozici ve všech verzích IE.
- <div class = "progress progress-stripped active" >
- <div class = "bar" style = " šířka : 40 %; " ></div>
- </div>
Umístěte více tyčí do stejné .progress
a stohujte je.
- <div class = "progress" >
- <div class = "bar bar-success" style = " width : 35 %; " ></div>
- <div class = "bar bar-warning" style = " width : 20 %; " ></div>
- <div class = "bar bar-danger" style = " width : 10 %; " ></div>
- </div>
Ukazatele průběhu používají některé stejné třídy tlačítek a výstrah pro konzistentní styly.
- <div class = "progress progress-info" >
- <div class = "bar" style = " šířka : 20 % " ></div>
- </div>
- <div class = "progress progress-success" >
- <div class = "bar" style = " šířka : 40 % " ></div>
- </div>
- <div class = "progress progress-warning" >
- <div class = "bar" style = " šířka : 60 % " ></div>
- </div>
- <div class = "progress progress-danger" >
- <div class = "bar" style = " šířka : 80 % " ></div>
- </div>
Podobně jako u plných barev máme různé pruhované ukazatele průběhu.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " šířka : 20 % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" style = " šířka : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-stripped" >
- <div class = "bar" style = " šířka : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " šířka : 80 % " ></div>
- </div>
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.
Použijte studnu jako jednoduchý efekt na prvek, abyste získali vložený efekt.
- <div class = "well" >
- ...
- </div>
Ovládejte výplň a zaoblené rohy pomocí dvou volitelných tříd modifikátorů.
- <div class = "well well-large" >
- ...
- </div>
- <div class = "well well-small" >
- ...
- </div>
Pomocí obecné ikony zavřít můžete odmítnout obsah, jako jsou modály a upozornění.
- <button class = "zavřít" > × </button>
Zařízení iOS vyžadují pro události kliknutí href="#", pokud raději používáte kotvu.
- <a class = "close" href = "#" > × </a>
Jednoduché, zaměřené třídy pro malé úpravy zobrazení nebo chování.
Posuňte prvek doleva
- třída = "vytáhnout doleva"
- . vytáhnout - vlevo {
- plovák : levý ;
- }
Uveďte prvek doprava
- třída = "tah vpravo"
- . vytáhnout - vpravo {
- plovák : pravý ;
- }
Změňte barvu prvku na#999
- třída = "utlumený"
- . ztlumený {
- barva : #999;
- }
Vymažte float
na libovolném prvku
- class = "clearfix"
- . clearfix {
- * zoom : 1 ;
- &: před ,
- &: po {
- displej : tabulka ;
- obsah : "" ;
- }
- &: po {
- jasný : oba ;
- }
- }