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:

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

Příklad lišty nástrojů

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>

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

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.

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

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.

<div class = "btn-group" > 
  ...
  <ul class = "rozbalovací nabídka pull-right" > 
    <!-- odkazy na rozbalovací nabídku -->
  </ul>
</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ěč.

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

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>

Výkonná základní třída

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

Kdy použít

Karty a pilulky jsou skvělé pro sekce obsahu nebo pro navigaci mezi stránkami se souvisejícím obsahem.

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.

Základní karty

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

• Domov
• Profil
• Zprávy

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

• Domov
• Profil
• Zprávy

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

Jak je naskládat

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

• Domov
• Profil
• Zprávy

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

Naskládané prášky

• Domov
• Profil
• Zprávy

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

Snadné bohaté menu

Rozbalovací nabídky na kartách a pilulkách Bootstrap jsou super snadné a vyžadují jen trochu HTML navíc a lehký plugin jQuery.

Přejděte na stránku Javascript a přečtěte si dokumenty o rozbalovacích seznamech inicializace v Bootstrapu.

Karty s rozevíracími seznamy

• Domov
• Pomoc
• Rozbalovací nabídka
  • Akce
  • Další akce
  • Tady je něco jiného
  • Oddělený odkaz

<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

• Domov
• Pomoc
• Rozbalovací nabídka
  • Akce
  • Další akce
  • Tady je něco jiného
  • Oddělený odkaz

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

Navigace ve stylu aplikace

Navigační seznamy poskytují jednoduchý a snadný způsob vytváření skupin 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.

Strukturálně jsou postaveny na stejných základních stylech navigace jako karty a pilulky, takže použití a přizpůsobení jsou jednoduché.

S ikonami

Navigační seznamy lze také snadno vybavit ikonami. Přidejte správnou <i>značku s třídou a máte hotovo.

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>

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>

Příklad s ikonami

Stejný příklad, ale se <i>značkami pro ikony.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "kniha ikon" ></i> 
      Knihovna
    </a>
  </li>
  ...
</ul>

Co je zahrnuto

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

Změna mezi nimi je snadná a vyžaduje jen velmi malé změny značek.

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

Získejte javascript →

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.

U tabulátorů zarovnaných vpravo nebo vlevo zabalte .nav-tabsa .tab-contentdo .tabbable.

Přímé značení

Použití tabulátorů vyžaduje obtékání div, sadu tabulátorů a sadu tabulátorových panelů obsahu.

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

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>

Navbar lešení

Navigační lišta vyžaduje pouze několik divů, aby byla dobře strukturována pro statické nebo pevné zobrazení.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Opravená navigační lišta

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

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

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

Když připojíte navigační panel, nezapomeňte vzít v úvahu skrytou oblast pod ním. Přidejte 40 pixelů nebo více výplně do <body>. Nezapomeňte to přidat za základní CSS Bootstrap a před volitelný responzivní CSS.

Jméno značky

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>

Formuláře v navigační liště

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" >  
</form>

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>

Volitelná responzivní variace

V závislosti na množství obsahu ve vaší horní liště možná budete chtít implementovat responzivní možnosti. Chcete-li to provést, zabalte obsah navigace do obsahujícího prvku div .nav-collapse.collapsea přidejte přepínací tlačítko navigační lišty .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>

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>

Zarovnání součástí

Chcete-li zarovnat navigaci, 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.

Přidávání rozbalovacích nabídek

Přidání rozevíracích a rozevíracích seznamů do navigace je velmi jednoduché, ale vyžaduje použití našeho pluginu pro javascript .

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

Získejte javascript →

Text v navigační liště

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

Proč je používat

Drobečková navigace se používá jako způsob, jak uživatelům ukázat, kde se v aplikaci nebo na webu nacházejí, ale ne pro primární navigaci. Udržujte jejich použití řídké a stručné, aby bylo co nejúčinnější.

Příklady

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

• Domov

• Domů /
• Knihovna

• Domů /
• Knihovna /
• Data

Označení

HTML je váš standardní neuspořádaný seznam s odkazy.

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

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

<div class = "stránkování" > 
  <ul>
    <li><a href = "#" > Předchozí </a></li> 
    <li class = "active" > 
      <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>

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.

• Předchozí
• další

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

• ← Starší
• Novější →

<ul class = "pager" > 
  <li class = "předchozí" > 
    <a href = "#" > ← Starší </a> 
  </li>
  <li class = "další" > 
    <a href = "#" > Novější → </a> 
  </li>
</ul>

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

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:

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

• 

  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 :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" 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 = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Štítek miniatury </h5>
      <p> Popisek miniatur zde... </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.

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.

<div class = "alert" > 
  <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>

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.

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

Chyba nebo nebezpečí

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

Úspěch

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

Informace

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

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 (bez IE).

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

Animovaný

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

<div class = "progress progress-stripped 
     aktivní" >
  <div class = "bar" 
       style = " šířka : 40 %; " ></div> 
</div>

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.

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

Zavřít ikonu

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>