Desiatky opakovane použiteľných komponentov vytvorených tak, aby poskytovali navigáciu, upozornenia, kontextové okná a ďalšie.
Prepínateľné kontextové menu na zobrazenie zoznamov odkazov. Vytvorené interaktívne pomocou rozbaľovacieho doplnku javascript .
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > Akcia </a></li>
- <li><a tabindex = "-1" href = "#" > Ďalšia akcia </a></li>
- <li><a tabindex = "-1" href = "#" > Tu je niečo iné </a></li>
- <li class = "delider" ></li>
- <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>
- </ul>
Ak sa pozriete len na rozbaľovaciu ponuku, tu je požadovaný kód HTML. Musíte zabaliť spúšťač rozbaľovacej ponuky a rozbaľovaciu ponuku do .dropdown
, alebo iného prvku, ktorý deklaruje position: relative;
. Potom už len vytvorte menu.
- <div class = "dropdown" >
- <!-- Odkaz alebo tlačidlo na prepnutie rozbaľovacej ponuky -->
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > Akcia </a></li>
- <li><a tabindex = "-1" href = "#" > Ďalšia akcia </a></li>
- <li><a tabindex = "-1" href = "#" > Tu je niečo iné </a></li>
- <li class = "delider" ></li>
- <li><a tabindex = "-1" href = "#" > Samostatný odkaz </a></li>
- </ul>
- </div>
Zarovnajte ponuky doprava a pridajte ďalšie úrovne rozbaľovacích ponúk.
Pridať .pull-right
do a .dropdown-menu
zarovnať rozbaľovaciu ponuku doprava.
- <ul class = "dropdown-menu pull-right" role = "menu" aria-labelledby = "dLabel" >
- ...
- </ul>
Pridajte ďalšiu úroveň rozbaľovacích ponúk, ktoré sa zobrazujú pri umiestnení kurzora myši ako tie v OS X, s niekoľkými jednoduchými doplnkami značiek. Pridať .dropdown-submenu
do ľubovoľnej li
v existujúcej rozbaľovacej ponuke pre automatický štýl.
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel" >
- ...
- <li class = "rozbaľovacia-podponuka" >
- <a tabindex = "-1" href = "#" > Ďalšie možnosti </a>
- <ul class = "rozbaľovacia ponuka" >
- ...
- </ul>
- </li>
- </ul>
Jednoduché stránkovanie 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.
- <div class = "stránkovanie" >
- <ul>
- <li><a href = "#" > Predchádzajúca </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 = "#" > Ďalej </a></li>
- </ul>
- </div>
Odkazy sú prispôsobiteľné rôznym okolnostiam. Používa .disabled
sa na odkazy, na ktoré sa nedá kliknúť, a .active
na označenie aktuálnej stránky.
- <div class = "stránkovanie" >
- <ul>
- <li class = "disabled" ><a href = "#" > Predchádzajúce </a></li>
- <li class = "active" ><a href = "#" > 1 </a></li>
- ...
- </ul>
- </div>
Aktívne alebo deaktivované kotvy môžete voliteľne vymeniť za rozpätia, aby ste odstránili funkčnosť kliknutia a zároveň zachovali zamýšľané štýly.
- <div class = "stránkovanie" >
- <ul>
- <li class = "disabled" ><span> Predchádzajúce </span></li>
- <li class = "active" ><span> 1 </span></li>
- ...
- </ul>
- </div>
Pridajte jednu z dvoch voliteľných tried na zmenu zarovnania odkazov stránkovania: .pagination-centered
a .pagination-right
.
- <div class = "pagination-pagination-center" >
- ...
- </div>
- <div class = "pagination pagination-right" >
- ...
- </div>
Rýchle predchádzajúce a nasledujúce odkazy pre jednoduché implementácie stránkovania s ľahkým značením a š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>
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>
Odkazy na pager tiež používajú .disabled
triedu všeobecných nástrojov zo stránkovania.
- <ul class = "pager" >
- <li class = "predchádzajúce zablokované" >
- <a href = "#" > ← Starš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> |
Inverzne | <span class="label label-inverse">Inverse</span> |
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> |
Dôležité | 6 | <span class="badge badge-important">6</span> |
Info | 8 | <span class="badge badge-info">8</span> |
Inverzne | 10 | <span class="badge badge-inverse">10</span> |
Ľahký, flexibilný komponent na prezentáciu kľúčového obsahu na vašom webe. Funguje dobre na marketingových a obsahovo náročných stránkach.
Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.
- <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 h1
vhodné rozloženie a segmentovanie častí 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-header" >
- <h1> Príklad hlavičky stránky <small> Podtext pre hlavičku </small></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 = "span4" >
- <a href = "#" class = "thumbnail" >
- <img src = "https://placehold.it/300x200" 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 = "span4" >
- <div class = "thumbnail" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> Menovka miniatúry </h3>
- <p> Popis miniatúry... </p>
- </div>
- </li>
- ...
- </ul>
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.
Zabalením ľubovoľného textu a voliteľného tlačidla na zrušenie získate .alert
základné varovné hlásenie.
- <div class = "upozornenie" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <strong> Upozornenie! </strong> Najlepšie sa presvedčte, že nevyzeráte príliš dobre.
- </div>
Prehliadače Mobile Safari a Mobile Opera okrem data-dismiss="alert"
atribútu vyžadujú href="#"
pri použití značky aj na odmietnutie upozornení <a>
.
- <a href = "#" class = "close" data-dismiss = "alert" > × </a>
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ť.
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
Použite doplnok jQuery pre upozornenia na rýchle a jednoduché zrušenie upozornení.
V prípade dlhších správ zväčšite výplň v hornej a dolnej časti obalu výstrahy pridaním .alert-block
.
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" >
- <button type = "button" class = "close" data-dismiss = "alert" > × </button>
- <h4> Upozornenie! </h4>
- Najlepšie sa presvedčte sami, nie ste...
- </div>
Ak chcete zmeniť konotáciu výstrahy, pridajte voliteľné triedy.
- <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. Nie je k dispozícii v IE7-8.
- <div class = "progress progress-striped" >
- <div class = "bar" style = " šírka : 20 %; " ></div>
- </div>
Pridať .active
k .progress-striped
animácii pruhov sprava doľava. Nie je k dispozícii vo všetkých verziách IE.
- <div class = "progress progress-stripped active" >
- <div class = "bar" style = " šírka : 40 %; " ></div>
- </div>
Umiestnite viacero tyčí do toho istého .progress
a stohujte ich.
- <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>
Panely priebehu používajú niektoré z rovnakých tried tlačidiel a upozornení pre konzistentné štýly.
- <div class = "progress progress-info" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
Podobne ako pri plných farbách máme rôzne pruhované indikátory priebehu.
- <div class = "progress progress-info progress-striped" >
- <div class = "bar" style = " width : 20 % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" style = " width : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-stripped" >
- <div class = "bar" style = " width : 60 % " ></div>
- </div>
- <div class = "progress progress-danger progress-striped" >
- <div class = "bar" style = " width : 80 % " ></div>
- </div>
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.
Verzie staršie ako Internet Explorer 10 a Opera 12 nepodporujú animácie.
Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.
- <div class = "well" >
- ...
- </div>
Ovládajte výplň a zaoblené rohy pomocou dvoch voliteľných tried modifikátorov.
- <div class = "well well-large" >
- ...
- </div>
- <div class = "dobre dobre-male" >
- ...
- </div>
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>
Jednoduché, zamerané triedy pre malé vylepšenia displeja alebo správania.
Posuňte prvok doľava
- trieda = "vytiahnuť doľava"
- . ťahať - doľava {
- plavák : vľavo ;
- }
Umiestnite prvok doprava
- trieda = "ťahať-vpravo"
- . ťahať - vpravo {
- plavák : pravý ;
- }
Zmeňte farbu prvku na#999
- trieda = "stlmené"
- . stlmený {
- farba : #999;
- }
Zrušte float
na ľubovoľnom prvku
- class = "clearfix"
- . clearfix {
- * priblíženie : 1 ;
- &: pred ,
- &: po {
- displej : tabuľka ;
- obsah : "" ;
- }
- &: po {
- jasné : oboje ;
- }
- }