Do Bootstrapu sú zabudované desiatky opakovane použiteľných komponentov, ktoré poskytujú navigáciu, upozornenia, kontextové okná a oveľa viac.
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.
Odkazy sú prispôsobiteľné a fungujú za rôznych okolností so správnou triedou. .disabled
pre nekliknuteľné odkazy a .active
pre aktuálnu stránku.
Ak chcete zmeniť zarovnanie odkazov stránkovania, pridajte jednu z dvoch voliteľných tried: .pagination-centered
a .pagination-right
.
Predvolený komponent stránkovania je flexibilný a funguje v mnohých variáciách.
<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>
Komponent pager je súbor odkazov pre jednoduché implementácie stránkovania s ľahkým označením a ešte ľahšími štýlmi. Je to skvelé pre jednoduché stránky, ako sú blogy alebo časopisy.
V predvolenom nastavení pager vycentruje odkazy.
- <ul class = "pager" >
- <li>
- <a href = "#" > Predchádzajúce </a>
- </li>
- <li>
- <a href = "#" > Ďalej </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> |
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.
Zabaľte svoj obsah div
takto:
- <div class = "hrdinská jednotka" >
- <h1> Nadpis </h1>
- <p> Slogan </p>
- <p>
- <a class = "btn btn-primary btn-large" >
- Uč sa viac
- </a>
- </p>
- </div>
Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.
Jednoduchý shell na h1
vhodne rozmiestnené a segmentované časti obsahu na stránke. Môže využívať h1
predvolený small
prvok , ako aj väčšinu ostatných komponentov (s ďalšími štýlmi).
- <div class = "page-haeder" >
- <h1> Príklad hlavičky stránky </h1>
- </div>
V predvolenom nastavení sú miniatúry Bootstrapu navrhnuté tak, aby zobrazovali prepojené obrázky s minimálnym požadovaným označením.
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.
Miniatúry (predtým .media-grid
až 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.
Označenie miniatúr je jednoduché – stačí ak má ul
ľubovoľný počet li
prvkov. Je tiež super flexibilný a umožňuje ľubovoľný typ obsahu s trochu väčším označením na zabalenie obsahu.
Nakoniec, komponent miniatúr používa existujúce triedy mriežkového systému – ako .span2
alebo .span3
– na kontrolu rozmerov miniatúr.
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í. Ak chcete kdekoľvek povoliť obsah na úrovni blokovania, 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> Popis miniatúry tu... </p>
- </div>
- </li>
- ...
- </ul>
S Bootstrap 2 sme zjednodušili základnú triedu: .alert
namiesto .alert-message
. Znížili sme aj minimálnu požadovanú značku – <p>
v predvolenom nastavení sa nevyžaduje žiadne, iba vonkajšie <div>
.
Pre odolnejší komponent s menším množstvom kódu sme odstránili rozlišujúci vzhľad blokových upozornení, správ, ktoré prichádzajú s väčším odsadením a zvyčajne väčším množstvom textu. Trieda sa tiež zmenila na .alert-block
.
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.
Zabaľte svoju správu a voliteľnú ikonu zatvorenia do div s jednoduchou triedou.
- <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-block
pre viac výplňových a textových ovládacích prvkov a .alert-heading
pre zodpovedajúci nadpis.
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>
- <div class = "alert alert-error" >
- ...
- </div>
- <div class = "alert alert-success" >
- ...
- </div>
- <div class = "alert alert-info" >
- ...
- </div>
Predvolený indikátor priebehu so zvislým prechodom.
- <div class = "progress" >
- <div class = "bar"
- style = " šírka : 60 %; " ></div>
- </div>
Používa prechod na vytvorenie pruhovaného efektu.
- <div class = "informácie o pokroku
- progresívne pruhované" >
- <div class = "bar"
- style = " šírka : 20 %; " ></div>
- </div>
Vezme si pruhovaný príklad a oživí ho.
- <div class = "progress progress-nebezpečenstvo
- progress-stripped active" >
- <div class = "bar"
- style = " šírka : 40 %; " ></div>
- </div>
Panely priebehu využívajú niektoré z rovnakých názvov tried ako tlačidlá a upozornenia pre podobný štýl.
.progress-info
.progress-success
.progress-danger
Prípadne si môžete prispôsobiť súbory LESS a vytvoriť si vlastné farby a veľkosti.
Progress bary používajú prechody CSS3, takže ak dynamicky upravíte šírku pomocou javascriptu, plynulo sa zmení veľkosť.
Ak použijete .active
triedu, vaše .progress-striped
lišty postupu budú animovať pruhy zľava doprava.
Panely priebehu používajú prechody, prechody a animácie CSS3 na dosiahnutie všetkých svojich efektov. Tieto funkcie nie sú podporované v IE7-8 alebo starších verziách Firefoxu.
Opera v súčasnosti nepodporuje animácie.
Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.
- <div class = "well" >
- ...
- </div>
Na odmietnutie obsahu, ako sú modály a upozornenia, použite všeobecnú ikonu zatvorenia.
- <a class = "close" > × </a>