Příklad

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>

Označení

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>

Možnosti

Zarovnejte nabídky doprava a přidejte další úrovně rozbalovacích nabídek.

Zarovnání nabídek

Přidat .pull-rightdo a .dropdown-menuzarovnat rozbalovací nabídku doprava.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >   
  ...
</ul>

Podnabídky v rozevíracích seznamech

Přidejte další úroveň rozbalovací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 upravit, přidejte .dropdown-submenuk libovolnému liv existující rozevírací nabídce.

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

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.

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

Více skupin tlačítek

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

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Svislé skupiny tlačítek

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

<div class = "btn-group btn-group-vertical" > 
  ...
</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.

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akce
    <span class = "caret" ></span> 
  </a>
  <ul class = "rozbalovací nabídka" > 
    <!-- odkazy na rozbalovací nabídku -->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Akce </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbalovací nabídka" > 
    <!-- odkazy na rozbalovací nabídku -->
  </ul>
</div>

Velikosti

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

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Akce </button> 
  <button class = "btn btn-mini dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbalovací nabídka" > 
    <!-- odkazy na rozbalovací nabídku -->
  </ul>
</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ů.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbalovací nabídka" > 
    <!-- odkazy na rozbalovací nabídku -->
  </ul>
</div>

Odlehčené výchozí hodnoty Stejné označení, různé třídy

Všechny komponenty navigace zde – karty, pilulky a seznamy – sdílejí stejné základní označení a styly v rámci .navtřídy.

Základní karty

Vezměte pravidelné <ul>odkazy a přidejte .nav-tabs:

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Domovská stránka </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Základní pilulky

Vezměte stejný HTML, ale použijte .nav-pillsmísto něj:

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#" > Domovská stránka </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Deaktivovaný stav

.disabledPro jakoukoli komponentu navigace (karty, pilulky nebo seznam) přidejte šedé odkazy a žádné efekty přechodu . Na odkazy však bude možné kliknout, pokud však nebude implementován vlastní javascript, který těmto kliknutím zabrání.

<ul class = "nav nav-pills" > 
  ...
  <li class = "disabled" ><a href = "#" > Domovská stránka </a></li>  
  ...
</ul>

Zarovnání součástí

Chcete-li zarovnat navigační odkazy, použijte pomocné třídy .pull-leftnebo . .pull-rightObě třídy přidají CSS float v určeném směru.

Stohovatelné

Protože jsou záložky a pilulky ve výchozím nastavení vodorovné, stačí přidat druhou třídu, .nav-stacked, aby vypadaly svisle naskládané.

Skládané karty

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Naskládané prášky

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

Rozbalovací seznamy

Přidejte rozevírací nabídky s trochou kódu HTML navíc a rozbalovacím javascriptovým pluginem .

Karty s rozevíracími seznamy

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbalovací nabídka"
       href = "#" >
        Rozbalovací nabídka
        <b class = "caret" ></b> 
      </a>
    <ul class = "rozbalovací nabídka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Pilulky s rozevíracími seznamy

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbalovací nabídka"
       href = "#" >
        Rozbalovací nabídka
        <b class = "caret" ></b> 
      </a>
    <ul class = "rozbalovací nabídka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Navigační seznamy

Jednoduchý a snadný způsob, jak vytvořit skupiny navigačních odkazů s volitelnými záhlavími. Nejlépe se používají v postranních panelech, jako je Finder v OS X.

Příklad navigačního seznamu

Vezměte si seznam odkazů a přidejte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > Záhlaví seznamu </li> 
  <li class = "active" ><a href = "#" > Domovská stránka </a></li>  
  <li><a href = "#" > Knihovna </a></li> 
  ...
</ul>

Poznámka Pro vnoření do navigačního seznamu zahrňte class="nav nav-list"do libovolného vnořeného <ul>.

Horizontální přepážky

Přidejte vodorovný oddělovač vytvořením prázdné položky seznamu s třídou .divider, například:

<ul class = "nav nav-list" > 
  ...
  <li class = "rozdělovač" ></li> 
  ...
</ul>

Tabbable nav

Oživte své karty pomocí jednoduchého pluginu pro přepínání mezi obsahem prostřednictvím karet. Bootstrap integruje záložky ve čtyřech stylech: horní (výchozí), pravý, dolní a levý.

Tabulární příklad

Chcete-li, aby karty mohly být tabelovatelné, vytvořte .tab-panepro každou kartu jedinečné ID a zabalte je do .tab-content.

<div class = "tabbable" > <!-- Vyžaduje se pouze pro levé/pravé karty -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Část 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Část 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Jsem v sekci 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Dobrý den, jsem v sekci 2. </p>
    </div>
  </div>
</div>

Slábnout v kartách

Chcete-li, aby karty vybledly, přidejte .fadeke každému .tab-pane.

Vyžaduje plugin jQuery

Všechny záložky jsou poháněny naším lehkým pluginem jQuery. Přečtěte si více o tom, jak oživit karty s kartami na stránce javascriptových dokumentů .

Tabulovatelné v libovolném směru

Záložky na spodní straně

Otočte pořadí HTML a přidejte třídu, aby se tabulátory umístily dole.

<div class = "tabbable tabs-below" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Karty na levé straně

Vyměňte třídu a umístěte karty vlevo.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Karty vpravo

Vyměňte třídu a umístěte karty vpravo.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Základní navigační lišta

Chcete-li začít, navigační panely jsou statické (nejsou připevněny k horní části) a zahrnují podporu pro název projektu a základní navigaci. Umístěte jeden kamkoli do .container, který nastavuje šířku vašeho webu a obsahu.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#" > Název </a>  
    <ul class = "nav" > 
      <li class = "active" ><a href = "#" > Domovská stránka </a></li>  
      <li><a href = "#" > Odkaz </a></li> 
      <li><a href = "#" > Odkaz </a></li> 
    </ul>
  </div>
</div>

Komponenty navigační lišty

Značka

Jednoduchý odkaz pro zobrazení názvu vaší značky nebo projektu vyžaduje pouze značku ukotvení.

<a class = "brand" href = "#" > Název projektu </a>  

Nav odkazy

Položky navigace lze snadno přidávat prostřednictvím neuspořádaných seznamů.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Domovská stránka </a> 
  </li>
  <li><a href = "#" > Odkaz </a></li> 
  <li><a href = "#" > Odkaz </a></li> 
</ul>

K navigačním odkazům můžete snadno přidat oddělovače pomocí prázdné položky seznamu a jednoduché třídy. Stačí přidat toto mezi odkazy:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

formuláře

Pro správný styl a umístění formuláře v navigační liště přidejte příslušné třídy, jak je znázorněno níže. U výchozího formuláře zahrňte .navbar-forma buď .pull-leftnebo .pull-right, abyste jej správně zarovnali.

<form class = "navbar-form pull-left" > 
  < typ vstupu = "text" class = "span2" >  
  <button type = "submit" class = "btn" > Submit </button>  
</form>

Vyhledávací formulář

Pro více přizpůsobený vyhledávací formulář přidejte .navbar-searchdo forma .search-querydo vstupu pro specializované styly v navigační liště.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" zástupný symbol = "Search" >   
</form>

Zarovnání součástí

Zarovnejte navigační odkazy, vyhledávací formulář nebo text, použijte pomocné třídy .pull-leftnebo . .pull-rightObě třídy přidají CSS float v určeném směru.

Pomocí rozbalovacích nabídek

Přidejte rozevírací seznamy a rozbalovací seznamy do navigace s trochou značek a rozbalovacího javascriptového pluginu .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" >   
      Účet
      <b class = "caret" ></b> 
    </a>
    <ul class = "rozbalovací nabídka" > 
      ...
    </ul>
  </li>
</ul>

Navštivte dokumentaci k rozevíracím seznamům javascriptu , kde najdete další označení a informace o rozevíracích seznamech volání.

Text

Zabalte řetězce textu do prvku s .navbar-text, obvykle na <p>značku pro správné prokládání a barvu.

Volitelné varianty zobrazení

Připevněte navigační panel k horní nebo spodní části výřezu pomocí další třídy na nejvzdálenějším div, .navbar.

Pevně ​​nahoře

Přidejte .navbar-fixed-topa nezapomeňte zohlednit skrytou oblast pod ní přidáním alespoň 40 pixelů paddingdo souboru <body>. Nezapomeňte to přidat za základní CSS Bootstrap a před volitelný responzivní CSS.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

Pevně ​​dole

Místo toho přidejte .navbar-fixed-bottom.

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Statická horní navigační lišta

Vytvořte navigační panel s plnou šířkou, který se posune se stránkou, přidáním .navbar-static-top. Na rozdíl od .navbar-fixed-toptřídy nemusíte měnit žádné odsazení na body.

<div class = "navbar navbar-static-top" > 
  ...
</div>

Responzivní navigační lišta

Chcete-li implementovat sbalitelný responzivní navigační panel, zabalte obsah navigačního panelu do obsahujícího div, .nav-collapse.collapsea přidejte přepínací tlačítko navbar, .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar se používá jako přepínač pro obsah sbaleného navigačního panelu -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- Pokud chcete, aby byla značka zobrazena, nezapomeňte ji tam nechat -->
      <a class = "brand" href = "#" > Název projektu </a>  
 
      <!-- Vše, co chcete skrýt v rozlišení 940 pixelů nebo méně, umístěte sem -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form atd -->
      </div>
 
    </div>
  </div>
</div>

Obrácená variace

Upravte vzhled navigační lišty přidáním .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

Příklady

Jeden příklad zobrazený tak, jak by mohl být zobrazen na více stránkách.

<ul class = "breadcrumb" > 
  <li><a href = "#" > Domovská stránka </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > Knihovna </a> <span class = "divider" > / </span></li>   
  <li class = "active" > Data </li> 
</ul>

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.

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

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.

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

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.

<div class = "pagination pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</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.

<ul class = "pager" > 
  <li><a href = "#" > Předchozí </a></li> 
  <li><a href = "#" > Další </a></li> 
</ul>

Zarovnané odkazy

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>

Volitelný deaktivovaný stav

Odkazy na pager také používají .disabledtří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

Odznaky

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.

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

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

<div class = "page-header" > 
  <h1> Příklad záhlaví stránky </h1>
</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.

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 :

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

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 .alertpro zrušení, abyste získali 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>

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.

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

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>   

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.

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

Kontextové alternativy

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

Chyba nebo nebezpečí

<div class = "alert alert-error" > 
  ...
</div>

Úspěch

<div class = "alert alert-success" > 
  ...
</div>

Informace

<div class = "alert alert-info" > 
  ...
</div>

Příklady a značení

Základní

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

<div class = "progress" > 
  <div class = "bar" style = " šířka : 60 %; " ></div>   
</div>

Pruhovaný

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

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

Animovaný

Přidat .activek .progress-stripedanimaci 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>

Skládaný

Umístěte více tyčí do stejné .progressa 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>

Možnosti

Další barvy

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="width: 60%"></div>
</div>
<div class="progress progress-danger">
  <div class="bar" style="width: 80%"></div>
</div>

Striped bars

Similar to the solid colors, we have varied striped progress bars.

<div class="progress progress-info progress-striped">
  <div class="bar" style="width: 20%"></div>
</div>
<div class="progress progress-success progress-striped">
  <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning progress-striped">
  <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger progress-striped">
  <div class="bar" style="width: 80%"></div>
</div>

Browser support

Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.

Versions earlier than Internet Explorer 10 and Opera 12 do not support animations.

Wells

Use the well as a simple effect on an element to give it an inset effect.

<div class="well">
  ...
</div>

Optional classes

Control padding and rounded corners with two optional modifier classes.

<div class="well well-large">
  ...
</div>

<div class="well well-small">
  ...
</div>

Close icon

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

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

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

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

Helper classes

Simple, focused classes for small display or behavior tweaks.

.pull-left

Float an element left

class="pull-left"

.pull-left {
  float: left;
}

.pull-right

Float an element right

class="pull-right"

.pull-right {
  float: right;
}

.muted

Change an element's color to #999

class="muted"

.muted {
  color: #999;
}

.clearfix

Clear the float on any element

class="clearfix"

.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}