Příklad

Přepínatelné, kontextové menu pro zobrazení seznamů odkazů. Vytvořeno interaktivní pomocí rozbalovacího pluginu JavaScript .

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

Zakázané možnosti nabídky

Přidejte .disableddo <li>rozevíracího seznamu a deaktivujte odkaz.

<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >   
  <li><a tabindex = "-1" href = "#" > Běžný odkaz </a></li>  
  <li class = "disabled" ><a tabindex = "-1" href = "#" > Deaktivovaný odkaz </a></li>   
  <li><a tabindex = "-1" href = "#" > Další odkaz </a></li>  
</ul>

Podnabídky v rozevíracích seznamech

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-submenudo liexistují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>

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" > Vlevo </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Vpravo </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>

Vertikální 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. 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.

<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 hrefatribut neodstraníte. Případně můžete implementovat vlastní JavaScript, abyste těmto kliknutím zabránili.

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

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ámkaPro 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 dokumentů JavaScript .

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 jej kamkoli do .container, čímž nastavíte šíř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>

Součásti 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" >  
  < typ tlačítka = "submit" class = "btn" > Odeslat   </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 .pull-leftnebo.pull-right pomocné třídyObě třídy přidají CSS float v určeném směru.

Pomocí rozbalovacích nabídek

Přidejte do navigace rozevírací seznamy a rozbalovací nabídky s trochou značek a rozbalovacím JavaScriptovým pluginem .

<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 JavaScript , 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í lištu 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 žádnou výplň 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 kolaps" > 
        <!-- .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 = "#" > 5 </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 = "zakázáno" ><a href = "#" > « </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 = "zakázáno" ><span> « </span></li> 
    <li class = "active" ><span> 1 </span></li> 
    ...
  </ul>
</div>

Velikosti

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

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "stránkování" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </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

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.

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

<div class = "page-header" > 
  <h1> Příklad záhlaví stránky <small> Podtext pro záhlaví </small></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 mřížkového systému – 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 data-src = "holder.js/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 data-src = "holder.js/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 pro zavírání .alertpro základní varovnou zprávu.

<div class = "alert" > 
  < typ tlačítka = "button" class = "zavřít" data-dismiss = "upozornění" > × </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 = "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.

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

<div class = "alert alert-block" > 
  < typ tlačítka = "button" class = "zavřít" data-dismiss = "upozornění" > × </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>

Nasklá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 = " šířka : 60 % " ></div>   
</div>
<div class = "progress progress-danger" > 
  <div class = "bar" style = " šířka : 80 % " ></div>   
</div>

Pruhované pruhy

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>

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.

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.

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.

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.

<div class = "media" > 
  <a class = "pull-left" href = "#" >  
    <img class = "media-object" data-src = "holder.js/64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-heading" > Media title </h4> 
    ...
 
    <!-- Vnořený mediální objekt -->
    <div class = "media" > 
      ...
    </div>
  </div>
</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ů).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#" >  
      <img class = "media-object" data-src = "holder.js/64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-heading" > Media title </h4> 
      ...
 
      <!-- Vnořený mediální objekt -->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

Wells

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

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

Volitelné třídy

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>

Zavřít ikonu

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í href="#"události pro kliknutí, pokud byste raději použili kotvu.

<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

třída = "vytáhnout doleva"

. vytáhnout - vlevo {
  plovák : levý ;
}

.tah-vpravo

Uveďte prvek doprava

třída = "tah vpravo"

. vytáhnout - vpravo {
  plovák : pravý ;
}

.tlumený

Změňte barvu prvku na#999

třída = "utlumený"

. ztlumený {
  barva : #999; 
}

.clearfix

Vymažte floatna libovolném prvku

class = "clearfix"

. clearfix {
  * zoom : 1 ; 
  &: před ,
  &: po {
    displej : tabulka ;
    obsah : "" ; 
  }
  &: po {
    jasný : oba ;
  }
}