Skupiny tlačidiel

Použite skupiny tlačidiel na spojenie viacerých tlačidiel do jedného kompozitného komponentu. Zostavte ich pomocou série prvkov <a>alebo <button>prvkov.

Osvedčené postupy

Na používanie skupín tlačidiel a panelov s nástrojmi odporúčame nasledujúce pokyny:

• Vždy používajte rovnaký prvok v jednej skupine tlačidiel <a>alebo <button>.
• Nemiešajte tlačidlá rôznych farieb v rovnakej skupine tlačidiel.
• Okrem textu alebo namiesto neho použite ikony, ale uistite sa, že tam, kde je to vhodné, uveďte aj alternatívny text a text nadpisu.

Súvisiace skupiny tlačidiel s rozbaľovacími ponukami (pozri nižšie) by sa mali vyvolať samostatne a vždy by mali obsahovať rozbaľovaciu vsuvku na označenie zamýšľaného správania.

Predvolený príklad

Tu je návod, ako HTML hľadá štandardnú skupinu tlačidiel vytvorenú pomocou tlačidiel kotviacich značiek:

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

Príklad panela s nástrojmi

Kombinujte sady <div class="btn-group">do <div class="btn-toolbar">pre zložitejšie komponenty.

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

Príchute začiarkavacieho políčka a rádia

Skupiny tlačidiel môžu fungovať aj ako rádiá, kde môže byť aktívne iba jedno tlačidlo, alebo zaškrtávacie políčka, kde môže byť aktívny ľubovoľný počet tlačidiel. Pozrite si na to dokumenty Javascript .

Získať javascript »

Rozbaľovacie zoznamy v skupinách tlačidiel

Hlavy hore! Tlačidlá s rozbaľovacími ponukami musia byť v .btn-grouprámci .btn-toolbarsprávneho vykreslenia jednotlivo zabalené.

Prehľad a príklady

Použite ľubovoľné tlačidlo na spustenie rozbaľovacej ponuky umiestnením do .btn-groupa poskytnutím správnej značky ponuky.

Príklad značenia

Podobne ako skupina tlačidiel, naše značenie používa bežné značenie tlačidiel, ale s niekoľkými doplnkami na vylepšenie štýlu a podporu rozbaľovacieho doplnku jQuery Bootstrap.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#" >   
    Akcia
    <span class = "caret" ></span> 
  </a>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Funguje so všetkými veľkosťami tlačidiel

Rozbaľovacie zoznamy tlačidiel fungujú pri akejkoľvek veľkosti. veľkosť vašich tlačidiel je .btn-large, .btn-small, alebo .btn-mini.

Vyžaduje javascript

Rozbaľovacie zoznamy tlačidiel vyžadujú, aby fungoval rozbaľovací doplnok Bootstrap .

V niektorých prípadoch – napríklad v mobilných zariadeniach – sa rozbaľovacie ponuky rozšíria mimo zobrazovanú oblasť. Zarovnanie musíte vyriešiť manuálne alebo pomocou vlastného javascriptu.

Prehľad a príklady

Na základe štýlov a značiek skupiny tlačidiel môžeme ľahko vytvoriť rozdelené tlačidlo. Rozdeliť tlačidlá obsahujú štandardnú akciu na ľavej strane a rozbaľovací prepínač na pravej strane s kontextovými odkazmi.

Veľkosti

Na nastavenie veľkosti použite ďalšie triedy tlačidiel .btn-mini, .btn-smallalebo ..btn-large

<div class = "btn-group" > 
  ...
  <ul class = "rozbaľovacia ponuka pull-right" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Príklad značenia

Rozbaľujeme bežné rozbaľovacie zoznamy tlačidiel, aby sme poskytli druhú akciu tlačidla, ktorá funguje ako samostatný spúšťač rozbaľovacej ponuky.

<div class = "btn-group" > 
  <button class = "btn" > Akcia </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" ></span> 
  </button>
  <ul class = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Rozbaľovacie ponuky

Rozbaľovacie ponuky možno tiež prepínať zdola nahor pridaním jednej triedy k priamemu rodičovi .dropdown-menu. Obráti smer .careta zmení polohu samotnej ponuky tak, aby sa pohybovala zdola nahor namiesto zhora nadol.

<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 = "rozbaľovacia ponuka" > 
    <!-- odkazy na rozbaľovaciu ponuku -->
  </ul>
</div>

Výkonná základná trieda

Všetky komponenty navigácie – karty, pilulky a zoznamy – zdieľajú v triede rovnaké základné označenie a štýly.nav .

Kedy použiť

Karty a tabletky sú skvelé pre sekcie obsahu alebo navigáciu medzi stránkami so súvisiacim obsahom.

Zarovnanie komponentov

Na zarovnanie navigačných odkazov použite pomocné triedy .pull-leftalebo . .pull-rightObe triedy pridajú CSS float v zadanom smere.

Základné karty

Vezmite pravidelné <ul>odkazy a pridajte .nav-tabs:

• Domov
• Profil
• Správy

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Základné pilulky

Vezmite rovnaký kód HTML, ale .nav-pillsnamiesto toho použite:

• Domov
• Profil
• Správy

<ul class = "nav nav-pills" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

Ako ich poskladať

Keďže karty a pilulky sú v predvolenom nastavení vodorovné, stačí pridať druhú triedu , .nav-stackedaby sa javili ako zvislé.

Skladané karty

• Domov
• Profil
• Správy

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

Naskladané pilulky

• Domov
• Profil
• Správy

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

Jednoduché bohaté menu

Rozbaľovacie ponuky na kartách a tabletkách Bootstrap sú super jednoduché a vyžadujú si len trochu HTML navyše a ľahký doplnok jQuery.

Prejdite na stránku Javascript a prečítajte si dokumenty o inicializácii rozbaľovacích zoznamov v Bootstrape.

Karty s rozbaľovacími ponukami

• Domov
• Pomoc
• Rozbaľovacia ponuka
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbaľovacia ponuka"
       href = "#" >
        Rozbaľovacia ponuka
        <b class = "caret" </b> 
      </a>
    <ul class = "rozbaľovacia ponuka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Pilulky s rozbaľovacími zoznamami

• Domov
• Pomoc
• Rozbaľovacia ponuka
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-pills" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "rozbaľovacia ponuka"
       href = "#" >
        Rozbaľovacia ponuka
        <b class = "caret" </b> 
      </a>
    <ul class = "rozbaľovacia ponuka" > 
      <!-- odkazy -->
    </ul>
  </li>
</ul>

Navigácia v štýle aplikácie

Navigačné zoznamy poskytujú jednoduchý a jednoduchý spôsob vytvárania skupín navigačných odkazov s voliteľnými hlavičkami. Najlepšie sa používajú v bočných paneloch, ako je Finder v OS X.

Štrukturálne sú postavené na rovnakých základných štýloch navigácie ako karty a tabletky, takže použitie a prispôsobenie je jednoduché.

S ikonami

Navigačné zoznamy sa tiež dajú ľahko vybaviť ikonami. Pridajte správnu <i>značku s triedou a máte hotovo.

Horizontálne prepážky

Pridajte vodorovný oddeľovač vytvorením prázdnej položky zoznamu s triedou .divider, napríklad:

<ul class = "nav nav-list" > 
  ...
  <li class = "delider" ></li> 
  ...
</ul>

Príklad navigačného zoznamu

Vezmite si zoznam odkazov a pridajte class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Hlavička zoznamu
  </li>
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li>
    <a href = "#" > Knižnica </a> 
  </li>
  ...
</ul>

Príklad s ikonami

Rovnaký príklad, ale so <i>značkami pre ikony.

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

Čo je zahrnuté

Oživte svoje karty pomocou jednoduchého doplnku na prepínanie medzi obsahom prostredníctvom kariet. Bootstrap integruje záložky v štyroch štýloch: horný (predvolený), pravý, dolný a ľavý.

Zmena medzi nimi je jednoduchá a vyžaduje len veľmi malú zmenu značiek.

Miznúť v kartách

Ak chcete, aby karty vybledli, pridajte .fadeku každému .tab-pane.

Vyžaduje doplnok jQuery

Všetky tablovateľné karty sú poháňané naším ľahkým doplnkom jQuery. Prečítajte si viac o tom, ako oživiť karty s tabuľkami na stránke dokumentov javascript .

Získajte javascript →

Tabuľkový príklad

Ak chcete, aby sa karty zobrazovali ako tabuľkové, vytvorte .tab-panepre každú kartu jedinečné ID a zabaľte ju do .tab-content.

V prípade kariet zarovnaných vpravo alebo vľavo zabaľte .nav-tabsa .tab-contentdo .tabbable.

Priame označovanie

Používanie kariet s tabelátorom vyžaduje obalový prvok div, skupinu kariet a skupinu tabel obsahu.

<div class = "tabbable" > <!-- Vyžaduje sa len pre ľavé/pravé karty -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > Časť 1 </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > Časť 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Som v sekcii 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Dobrý deň, som v sekcii 2. </p>
    </div>
  </div>
</div>

Záložky v spodnej časti

Otočte poradie HTML a pridajte triedu, aby ste umiestnili karty na spodok.

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

Karty vľavo

Vymeňte triedu a umiestnite karty vľavo.

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

Karty na pravej strane

Vymeňte triedu a umiestnite karty napravo.

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

Navbar lešenie

Navbar vyžaduje len niekoľko divov, aby bol dobre štruktúrovaný pre statické alebo pevné zobrazenie.

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

Pevná navigačná lišta

Upevnite navigačnú lištu na hornú alebo dolnú časť výrezu pomocou ďalšej triedy na najvzdialenejšom div, .navbar.

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

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

Keď pripevníte navigačný panel, nezabudnite zohľadniť skrytú oblasť pod ním. Pridajte 40 pixelov alebo viac výplne do súboru <body>. Nezabudnite to pridať za základný CSS Bootstrap a pred voliteľný responzívny CSS.

Názov značky

Jednoduchý odkaz na zobrazenie názvu vašej značky alebo projektu vyžaduje iba kotviaci štítok.

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

Formuláre v navigačnej lište

Pre správny štýl a umiestnenie formulára v navigačnom paneli pridajte príslušné triedy, ako je uvedené nižšie. Pre predvolený formulár zahrňte .navbar-forma buď .pull-leftalebo .pull-right, aby ste ho správne zarovnali.

<form class = "navbar-form pull-left" > 
  < typ vstupu = "text" class = "span2" >  
</form>

Pre prispôsobenejší vyhľadávací formulár pridajte .navbar-searchdo forma .search-querydo vstupu pre špecializované štýly na navigačnom paneli.

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

Voliteľná responzívna variácia

V závislosti od množstva obsahu na hornom paneli možno budete chcieť implementovať responzívne možnosti. Ak to chcete urobiť, zabaľte obsah navigácie do obsahujúceho prvku div .nav-collapse.collapsea pridajte prepínač navigačnej lišty .btn-navbar.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <!-- .btn-navbar sa používa ako prepínač pre obsah zbalenej navigačnej lišty -->
      <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>
 
      <!-- Ak chcete, aby sa značka zobrazovala, nezabudnite ju tam nechať -->
      <a class = "brand" href = "#" > Názov projektu </a>  
 
      <!-- Všetko, čo chcete skryť v rozlíšení 940 pixelov alebo menej, umiestnite sem -->
      <div class = "nav-collapse" > 
        <!-- .nav, .navbar-search, .navbar-form atď -->
      </div>
 
    </div>
  </div>
</div>

Navigačné odkazy

Položky navigácie sa pridávajú jednoducho prostredníctvom neusporiadaných zoznamov.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#" > Domov </a> 
  </li>
  <li><a href = "#" > Odkaz </a></li> 
  <li><a href = "#" > Odkaz </a></li> 
</ul>

Pomocou prázdnej položky zoznamu a jednoduchej triedy môžete do navigačných odkazov jednoducho pridať oddeľovače. Stačí pridať toto medzi odkazy:

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

Zarovnanie komponentov

Ak chcete zarovnať navigáciu, vyhľadávací formulár alebo text, použite pomocné triedy .pull-leftalebo . .pull-rightObe triedy pridajú CSS float v zadanom smere.

Pridávanie rozbaľovacích ponúk

Pridávanie rozbaľovacích zoznamov a rozbaľovacích zoznamov do navigačného zariadenia je veľmi jednoduché, vyžaduje si však použitie nášho doplnku javascript .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "rozbaľovací prepínač"
          data-toggle = "rozbaľovacia ponuka" >
          účtu
          <b class = "caret" </b> 
    </a>
    <ul class = "rozbaľovacia ponuka" > 
      ...
    </ul>
  </li>
</ul>

Získajte javascript →

Text v navigačnom paneli

Reťazce textu zabaľte do <.navbar-text>, zvyčajne na <p>štítku, aby ste získali správny úvod a farbu.

Prečo ich používať

Drobková navigácia sa používa ako spôsob, ako používateľom ukázať, kde sa nachádzajú v rámci aplikácie alebo webu, nie však na primárnu navigáciu. Udržujte ich použitie riedke a stručné, aby boli čo najefektívnejšie.

Príklady

Jeden príklad zobrazený tak, ako by sa mohol zobraziť na viacerých stránkach.

• Domov

• domov /
• Knižnica

• domov /
• Knižnica /
• Údaje

Označenie

HTML je váš štandardný neusporiadaný zoznam s odkazmi.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#" > Domov </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > Knižnica </a> <span class = "divider" > / </span>   
  </li>
  <li class = "active" > Údaje </li> 
</ul>

Kedy použiť

Mimoriadne zjednodušené stránkovanie s minimálnym štýlom inšpirované Rdio, skvelé pre aplikácie a výsledky vyhľadávania. Veľký blok je ťažké prehliadnuť, je ľahko škálovateľný a poskytuje veľké klikacie plochy.

Stavové odkazy na stránky

Odkazy sú prispôsobiteľné a fungujú za rôznych okolností so správnou triedou. .disabledpre nekliknuteľné odkazy a .activepre aktuálnu stránku.

Flexibilné zarovnanie

Ak chcete zmeniť zarovnanie odkazov stránkovania, pridajte jednu z dvoch voliteľných tried: .pagination-centereda .pagination-right.

Príklady

Predvolený komponent stránkovania je flexibilný a funguje v mnohých variáciách.

Označenie

<div>Stránkovanie je zabalené v <ul>.

<div class = "stránkovanie" > 
  <ul>
    <li><a href = "#" > Predchádzajúca </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 = "#" > Ďalej </a></li> 
  </ul>
</div>

O pageri

Komponent pager je súbor odkazov pre jednoduché implementácie stránkovania so svetlým označením a ešte ľahšími štýlmi. Je to skvelé pre jednoduché stránky, ako sú blogy alebo časopisy.

Voliteľný vypnutý stav

Odkazy na pager tiež používajú všeobecnú .disabledtriedu zo stránkovania.

Predvolený príklad

V predvolenom nastavení pager vycentruje odkazy.

• Predchádzajúce
• Ďalšie

<ul class = "pager" > 
  <li>
    <a href = "#" > Predchádzajúce </a> 
  </li>
  <li>
    <a href = "#" > Ďalej </a> 
  </li>
</ul>

Zarovnané odkazy

Prípadne môžete zarovnať každý odkaz na strany:

• ← Starší
• Novšie →

<ul class = "pager" > 
  <li class = "previous" > 
    <a href = "#" > ← Staršie </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > Novšie → </a> 
  </li>
</ul>

O

Odznaky sú malé, jednoduché komponenty na zobrazenie nejakého ukazovateľa alebo počtu. Bežne sa nachádzajú v e-mailových klientoch, ako je Mail.app, alebo v mobilných aplikáciách pre upozornenia push.

Dostupné triedy

Bootstrap poskytuje ľahký a flexibilný komponent nazývaný jednotka hrdinu na prezentáciu obsahu na vašom webe. Funguje dobre na marketingových a obsahovo náročných stránkach.

Označenie

Zabaľte svoj obsah divtakto:

<div class = "hrdinská jednotka" > 
  <h1> Nadpis </h1>
  <p> Slogan </p>
  <p>
    <a class = "btn btn-primary btn-large" > 
      Uč sa viac
    </a>
  </p>
</div>

Jednoduchý shell na h1vhodné rozloženie a segmentovanie častí obsahu na stránke. Môže využívať h1predvolený smallprvok , ako aj väčšinu ostatných komponentov (s ďalšími štýlmi).

<div class = "page-header" > 
  <h1> Príklad hlavičky stránky </h1>
</div>

Predvolené miniatúry

V predvolenom nastavení sú miniatúry Bootstrapu navrhnuté tak, aby zobrazovali prepojené obrázky s minimálnym požadovaným označením.

Vysoko prispôsobiteľné

S trochou extra značenia je možné pridať akýkoľvek druh obsahu HTML, ako sú nadpisy, odseky alebo tlačidlá, do miniatúr.

• 

  Menovka s miniatúrou

  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.

  Akcia Akcia

• 

  Menovka s miniatúrou

  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.

  Akcia Akcia

Prečo používať miniatúry

Miniatúry (predtým .media-gridaž do verzie 1.4) sú skvelé pre mriežky fotografií alebo videí, výsledky vyhľadávania obrázkov, maloobchodné produkty, portfóliá a oveľa viac. Môžu to byť odkazy alebo statický obsah.

Jednoduché, flexibilné značenie

Označenie miniatúr je jednoduché – stačí ak má ulľubovoľný počet liprvkov. Je tiež super flexibilný a umožňuje ľubovoľný typ obsahu s trochu väčším označením na zabalenie obsahu.

Používa veľkosti stĺpcov mriežky

Nakoniec, komponent miniatúr používa existujúce triedy mriežkového systému – ako .span2alebo .span3– na kontrolu rozmerov miniatúr.

Označenie

Ako už bolo spomenuté, požadované označenie pre miniatúry je ľahké a jednoduché. Tu je pohľad na predvolené nastavenie pre prepojené obrázky :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

V prípade vlastného obsahu HTML v miniatúrach sa označenie mierne zmení. Aby sme kdekoľvek umožnili blokovať obsah na úrovni, vymeníme ho <a>za <div>podobné:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Menovka miniatúry </h5>
      <p> Titulok miniatúry tu... </p>
    </div>
  </li>
  ...
</ul>

Viac príkladov

Preskúmajte všetky svoje možnosti s rôznymi triedami mriežky, ktoré máte k dispozícii. Môžete tiež kombinovať rôzne veľkosti.

Prepísaná základná trieda

S Bootstrap 2 sme zjednodušili základnú triedu: .alertnamiesto .alert-message. Znížili sme aj minimálnu požadovanú značku – <p>v predvolenom nastavení sa nevyžaduje žiadne, iba vonkajšie <div>.

Jedna výstražná správa

Pre odolnejší komponent s menším množstvom kódu sme odstránili rozlišujúci vzhľad upozornení na blokovanie, správy, ktoré prichádzajú s väčším odsadením a zvyčajne väčším množstvom textu. Trieda sa tiež zmenila na .alert-block.

Ide to skvele s javascriptom

Bootstrap prichádza so skvelým doplnkom jQuery, ktorý podporuje výstražné správy, vďaka čomu je rýchle a jednoduché ich zrušenie.

Získať doplnok »

Príklady upozornení

Zabaľte svoju správu a voliteľnú ikonu zatvorenia do div s jednoduchou triedou.

<div class = "upozornenie" > 
  <button class = "close" data-dismiss = "alert" > × </button>  
  <strong> Upozornenie! </strong> Najlepšie sa presvedčte, že nevyzeráte príliš dobre.
</div>

Hlavy hore! Zariadenia so systémom iOS vyžadujú href="#"na zrušenie upozornení. Nezabudnite ho zahrnúť a atribút údajov pre ikony zatvorenia kotvy. Prípadne môžete použiť <button>prvok s atribútom data, ktorý sme sa rozhodli použiť pre naše dokumenty. Pri použití <button>musíte zahrnúť, type="button"inak sa vaše formuláre nemusia odoslať.

Jednoducho rozšírte štandardnú výstražnú správu o dve voliteľné triedy: .alert-blockpre viac výplňových a textových ovládacích prvkov a .alert-headingpre zodpovedajúci nadpis.

<div class = "alert alert-block" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > Upozornenie! </h4> 
  Najlepšie sa presvedčte sami, nie ste...
</div>

Chyba alebo nebezpečenstvo

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

Úspech

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

Informácie

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

Základné

Predvolený indikátor priebehu so zvislým prechodom.

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

Pruhované

Používa prechod na vytvorenie pruhovaného efektu (bez IE).

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

Animované

Zoberie pruhovaný príklad a oživí ho (bez IE).

<div class = "progress progress-stripped 
     aktívny" >
  <div class = "bar" 
       style = " šírka : 40 %; " ></div> 
</div>

Ďalšie farby

Panely priebehu používajú niektoré z rovnakých tried tlačidiel a upozornení pre konzistentné štýly.

Pruhované pruhy

Podobne ako pri plných farbách máme rôzne pruhované indikátory priebehu.

Správanie

Progress bary používajú prechody CSS3, takže ak dynamicky upravíte šírku pomocou javascriptu, plynulo sa zmení veľkosť.

Ak použijete .activetriedu, vaše .progress-stripedlišty postupu budú animovať pruhy zľava doprava.

Podpora prehliadača

Panely priebehu používajú prechody, prechody a animácie CSS3 na dosiahnutie všetkých svojich efektov. Tieto funkcie nie sú podporované v IE7-9 alebo starších verziách Firefoxu.

Opera a IE v súčasnosti nepodporujú animácie.

Wells

Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.

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

Ikona Zavrieť

Na odmietnutie obsahu, ako sú modály a upozornenia, použite všeobecnú ikonu zatvorenia.

×

<button class = "close" > × </button> 

Zariadenia so systémom iOS vyžadujú pre udalosti kliknutia znak href="#", ak radšej používate kotvu.

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