Komponenty

Do Bootstrapu sú zabudované desiatky opakovane použiteľných komponentov, ktoré poskytujú navigáciu, upozornenia, kontextové okná a oveľa viac.

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

Rozbaľovacie zoznamy tlačidiel

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.

Rozbaľovacie ponuky tlačidla Rozdeliť

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

Ľahké predvolené Rovnaké označenie, rôzne triedy

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:

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

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

Stohovateľné Urobte záložky alebo pilulky vertikálne

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

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

Naskladané pilulky

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

Rozbaľovacie ponuky Pre pokročilé komponenty navigácie

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

<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

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

Zoznamy navigácií Vytvárajte jednoduché skladané navigačné systémy, ktoré sú skvelé pre bočné panely

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>

Tabbable nav Oživte karty pomocou javascriptu

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

Tabuľkový príklad

Ak chcete, aby sa karty zobrazovali v tabuľkách, zabaľte prvok .nav-tabsdo iného prvku div s triedou .tabbable.

Som v sekcii 1.

Howdy, I'm in Section 2.

What up girl, this is Section 3.

Vlastný 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 tabbaľou na stránke dokumentov javascript.

Získajte javascript →

Priame označovanie

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

<div class = "tabbable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > Časť 1 </a></li>   
    <li><a href = "#2" data-toggle = "tab" > Časť 2 </a></li>  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "1" >  
      <p> Som v sekcii 1. </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> Dobrý deň, som v sekcii 2. </p>
    </div>
  </div>
</div>

Tabulovateľné v akomkoľvek smere

Záložky v spodnej časti

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

Som v sekcii A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Som v sekcii A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Som v sekcii A.

Howdy, I'm in Section B.

What up girl, this is Section C.

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

Príklad statickej navigačnej lišty

Príklad statického navigačného panela (nie je pripevnený k hornej časti) s názvom projektu, navigáciou a vyhľadávacím formulárom.

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

Ak chcete získať prispôsobenejší formulár vyhľadávania, pridajte .navbar-searchtriedu, aby ste získali š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>

Hlavy hore! Responzívny navigačný panel vyžaduje doplnok na zbalenie .

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

Zabaľte reťazce textu do <p>značky, 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.

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>

Stránkovanie na viacerých stranách

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>

Pager Pre rýchle predchádzajúce a nasledujúce odkazy

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.

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

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

Štítky	Označenie
Predvolené	`<span class="label">Default</span>`
Úspech	`<span class="label label-success">Success</span>`
POZOR	`<span class="label label-warning">Warning</span>`
Dôležité	`<span class="label label-important">Important</span>`
Info	`<span class="label label-info">Info</span>`
Inverzný	`<span class="label label-inverse">Inverse</span>`

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

názov	Príklad	Označenie
Predvolené	1	`<span class="badge">1</span>`
Úspech	2	`<span class="badge badge-success">2</span>`
POZOR	4	`<span class="badge badge-warning">4</span>`
Chyba	6	`<span class="badge badge-error">6</span>`
Info	8	`<span class="badge badge-info">8</span>`
Inverzný	10	`<span class="badge badge-inverse">10</span>`

Jednotka hrdinu

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>

Ahoj svet!

Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.

Uč sa viac

Hlavička stránky

Jednoduchý shell na h1vhodne rozmiestnené a segmentované časti 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.

Ľahké predvolené hodnoty

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.

× POZOR! Najlepšie sa presvedčte, že nevyzeráte príliš dobre.

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

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.

POZOR!

Najlepšie sa presvedčte, že nevyzeráte príliš dobre. Nulla vitae elit libero, pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

Kontextové alternatívy Pridajte voliteľné triedy na zmenu konotácie výstrahy

Chyba alebo nebezpečenstvo

× Och, rýchlo! Zmeňte pár vecí a skúste odoslať znova.

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

Úspech

× Výborne! Úspešne ste si prečítali túto dôležitú výstražnú správu.

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

Informácie

× Hlavy hore! Toto upozornenie si vyžaduje vašu pozornosť, ale nie je mimoriadne dôležité.

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

Príklady a značky

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>

Možnosti a podpora prehliadača

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

Pozri, som v studni!

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

Ikona Zavrieť

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

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

Skupiny tlačidiel Pripojte tlačidlá pre viac funkcií podobných panelom s nástrojmi

Skupiny tlačidiel

Osvedčené postupy

Predvolený príklad

Príklad panela s nástrojmi

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

Rozbaľovacie zoznamy v skupinách tlačidiel

Rozbaľovacie ponuky tlačidiel Postavené na skupinách tlačidiel na poskytovanie kontextových ponúk

Rozbaľovacie zoznamy tlačidiel

Prehľad a príklady

Príklad značenia

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

Vyžaduje javascript

Rozbaľovacie ponuky tlačidla Rozdeliť

Prehľad a príklady

Veľkosti

Príklad značenia

Rozbaľovacie ponuky

Navigácia , karty a pilulky Vysoko prispôsobiteľná navigácia v štýle zoznamu

Ľahké predvolené Rovnaké označenie, rôzne triedy

Výkonná základná trieda

Kedy použiť

Zarovnanie komponentov

Základné karty

Základné pilulky

Stohovateľné Urobte záložky alebo pilulky vertikálne

Ako ich poskladať

Skladané karty

Naskladané pilulky

Rozbaľovacie ponuky Pre pokročilé komponenty navigácie

Jednoduché bohaté menu

Karty s rozbaľovacími ponukami

Pilulky s rozbaľovacími zoznamami

Zoznamy navigácií Vytvárajte jednoduché skladané navigačné systémy, ktoré sú skvelé pre bočné panely

Navigácia v štýle aplikácie

S ikonami

Horizontálne prepážky

Príklad navigačného zoznamu

Príklad s ikonami

Tabbable nav Oživte karty pomocou javascriptu

Čo je zahrnuté

Tabuľkový príklad

Vlastný doplnok jQuery

Priame označovanie

Tabulovateľné v akomkoľvek smere

Záložky v spodnej časti

Karty vľavo

Karty na pravej strane

Navbar

Príklad statickej navigačnej lišty

Navbar lešenie

Pevná navigačná lišta

Názov značky

Formuláre v navigačnej lište

Voliteľná responzívna variácia

Navigačné odkazy

Zarovnanie komponentov

Pridávanie rozbaľovacích ponúk

Text v navigačnom paneli

Strúhanka

Prečo ich používať

Príklady

Označenie

Stránkovanie Dve možnosti pre listovanie v obsahu

Stránkovanie na viacerých stranách

Kedy použiť

Stavové odkazy na stránky

Flexibilné zarovnanie

Príklady

Označenie

Pager Pre rýchle predchádzajúce a nasledujúce odkazy

O pageri

Voliteľný vypnutý stav

Predvolený príklad

Zarovnané odkazy

Vložené menovky Označenie a anotácia textu

Odznaky Indikátory a neprečítané počty

O

Dostupné triedy

Typografické komponenty Hlavička stránky a jednotka hrdinu na segmentovanie obsahu