Komponenty
Viac ako tucet opakovane použiteľných komponentov vytvorených tak, aby poskytovali ikonografiu, rozbaľovacie zoznamy, skupiny vstupov, navigáciu, upozornenia a oveľa viac.
Viac ako tucet opakovane použiteľných komponentov vytvorených tak, aby poskytovali ikonografiu, rozbaľovacie zoznamy, skupiny vstupov, navigáciu, upozornenia a oveľa viac.
Obsahuje viac ako 250 glyfov vo formáte písma zo sady Glyphicon Halflings. Glyphicons Halflings bežne nie sú dostupné zadarmo, ale ich tvorca ich sprístupnil bezplatne pre Bootstrap. Ako poďakovanie vás žiadame, aby ste vždy, keď je to možné, zahrnuli odkaz späť na Glyphicons .
Z dôvodov výkonu vyžadujú všetky ikony základnú triedu a individuálnu triedu ikon. Ak chcete použiť, umiestnite nasledujúci kód takmer kdekoľvek. Nezabudnite ponechať medzeru medzi ikonou a textom, aby sa zabezpečilo správne vyplnenie.
Triedy ikon nie je možné priamo kombinovať s inými komponentmi. Nemali by sa používať spolu s inými triedami na rovnakom prvku. Namiesto toho pridajte vnorené <span>
a aplikujte triedy ikon na <span>
.
Triedy ikon by sa mali používať iba na prvkoch, ktoré neobsahujú žiadny textový obsah a nemajú žiadne podradené prvky.
Bootstrap predpokladá, že súbory fontov ikon budú umiestnené v ../fonts/
adresári vzhľadom na kompilované súbory CSS. Presunutie alebo premenovanie týchto súborov písiem znamená aktualizáciu CSS jedným z troch spôsobov:
@icon-font-path
a/alebo v zdrojových súboroch Less.@icon-font-name
url()
cesty v skompilovanom CSS.Použite akúkoľvek možnosť, ktorá najlepšie vyhovuje vášmu špecifickému vývojovému nastaveniu.
Moderné verzie asistenčných technológií budú oznamovať obsah generovaný CSS, ako aj špecifické znaky Unicode. Aby sme sa vyhli neúmyselnému a mätúcemu výstupu v čítačkách obrazovky (najmä ak sa ikony používajú čisto na ozdobu), skryjeme ich pomocou aria-hidden="true"
atribútu.
Ak používate ikonu na vyjadrenie významu (a nie iba ako dekoratívny prvok), uistite sa, že tento význam sa prenáša aj do asistenčných technológií – napríklad zahrňte dodatočný obsah, ktorý je vizuálne skrytý spolu s .sr-only
triedou.
Ak vytvárate ovládacie prvky bez iného textu (napríklad, <button>
ktorý obsahuje iba ikonu), vždy by ste mali poskytnúť alternatívny obsah na identifikáciu účelu ovládacieho prvku, aby to dávalo zmysel používateľom asistenčných technológií. V tomto prípade môžete pridať aria-label
atribút na samotný ovládací prvok.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Použite ich v tlačidlách, skupinách tlačidiel pre panel s nástrojmi, navigáciu alebo vstupy do formulárov.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Ikona použitá v upozornení , ktorá oznamuje, že ide o chybové hlásenie, s dodatočným .sr-only
textom, ktorý túto nápovedu oznámi používateľom asistenčných technológií.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Prepínateľné kontextové menu na zobrazenie zoznamov odkazov. Vytvorený interaktívnym pomocou rozbaľovacieho doplnku JavaScript .
Zabaľte spúšťač rozbaľovacej ponuky a rozbaľovaciu ponuku do .dropdown
, alebo iného prvku, ktorý deklaruje position: relative;
. Potom pridajte kód HTML ponuky.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Rozbaľovacie ponuky je možné zmeniť tak, aby sa rozbalili nahor (namiesto nadol) pridaním .dropup
k nadradenej ponuke.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
V predvolenom nastavení je rozbaľovacia ponuka automaticky umiestnená 100 % zhora a pozdĺž ľavej strany nadradenej položky. Pridať .dropdown-menu-right
do a .dropdown-menu
zarovnať rozbaľovaciu ponuku doprava.
Rozbaľovacie zoznamy sa automaticky umiestňujú prostredníctvom CSS v rámci bežného toku dokumentu. To znamená, že rozbaľovacie ponuky môžu byť orezané rodičmi s určitými overflow
vlastnosťami alebo sa môžu zobraziť mimo rámca zobrazenia. Vyriešte tieto problémy sami, keď sa objavia.
.pull-right
zarovnanieOd verzie 3.1.0 sme ukončili podporu .pull-right
rozbaľovacích ponúk. Ak chcete zarovnať ponuku doprava, použite .dropdown-menu-right
. Komponenty navigácie zarovnané doprava v navigačnom paneli používajú zmiešanú verziu tejto triedy na automatické zarovnanie ponuky. Ak ho chcete prepísať, použite .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Pridajte oddeľovač do samostatných sérií odkazov v rozbaľovacej ponuke.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Ak chcete prepojenie deaktivovať, pridajte .disabled
do rozbaľovacej ponuky.<li>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Zoskupte sériu tlačidiel do jedného riadku so skupinou tlačidiel. Pridajte si voliteľný prepínač JavaScript a správanie štýlu začiarkavacieho políčka pomocou nášho doplnku pre tlačidlá .
Pri používaní popisov nástrojov alebo kontextových okien na prvkoch v rámci .btn-group
, budete musieť špecifikovať možnosť container: 'body'
, aby ste sa vyhli nežiaducim vedľajším efektom (napríklad, že sa prvok rozšíri a/alebo stratí svoje zaoblené rohy, keď sa spustí popis alebo kontextové okno).
role
a poskytnite štítokAby pomocné technológie – ako napríklad čítačky obrazovky – sprostredkovali, že séria tlačidiel je zoskupená, je potrebné poskytnúť vhodný role
atribút. Pre skupiny tlačidiel by to bolo role="group"
, zatiaľ čo panely nástrojov by mali mať role="toolbar"
.
Výnimkou sú skupiny, ktoré obsahujú iba jeden ovládací prvok (napríklad zarovnané skupiny tlačidiel s <button>
prvkami) alebo rozbaľovaciu ponuku.
Okrem toho by skupiny a panely s nástrojmi mali dostať explicitné označenie, pretože väčšina asistenčných technológií ich inak neoznámi, napriek prítomnosti správneho role
atribútu. V tu uvedených príkladoch používame aria-label
, ale aria-labelledby
možno použiť aj alternatívy, ako napr.
Zabaľte sériu tlačidiel .btn
s .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
Kombinujte sady <div class="btn-group">
do <div class="btn-toolbar">
pre zložitejšie komponenty.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Namiesto aplikovania tried veľkosti tlačidiel na každé tlačidlo v skupine stačí pridať .btn-group-*
ku každému .btn-group
, a to aj pri vnorení viacerých skupín.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Ak chcete rozbaľovacie ponuky zmiešané so sériou tlačidiel, umiestnite .btn-group
do iného ..btn-group
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
Zabezpečte, aby sa sada tlačidiel zobrazovala vertikálne, nie horizontálne. Rozbaľovacie ponuky rozdeľovacieho tlačidla tu nie sú podporované.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Skupinu tlačidiel urobte tak, aby sa natiahla na rovnakú veľkosť tak, aby pokrývala celú šírku jej rodiča. Funguje aj s rozbaľovacími zoznamami tlačidiel v rámci skupiny tlačidiel.
Vzhľadom na špecifické HTML a CSS používané na zarovnanie tlačidiel (konkrétne display: table-cell
), hranice medzi nimi sú zdvojnásobené. V bežných skupinách tlačidiel margin-left: -1px
sa používa na stohovanie okrajov namiesto ich odstraňovania. margin
Nefunguje však s display: table-cell
. V dôsledku toho, v závislosti od vašich prispôsobení Bootstrapu, možno budete chcieť odstrániť alebo prefarbiť okraje.
Internet Explorer 8 nevykresľuje okraje tlačidiel v skupine zarovnaných tlačidiel, či už sú zapnuté <a>
alebo <button>
prvky. Aby ste to obišli, zabaľte každé tlačidlo do iného .btn-group
.
Viac informácií nájdete na #12476 .
<a>
prvkamiStačí zabaliť sériu .btn
s do .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Ak sa <a>
prvky používajú na to, aby fungovali ako tlačidlá – na spustenie funkcií na stránke, a nie na navigáciu do iného dokumentu alebo sekcie na aktuálnej stránke – mali by mať aj príslušný role="button"
.
<button>
prvkamiAk chcete použiť zarovnané skupiny tlačidiel s <button>
prvkami, musíte každé tlačidlo zabaliť do skupiny tlačidiel . Väčšina prehliadačov správne nepoužíva naše CSS na odôvodnenie <button>
prvkov, ale keďže podporujeme rozbaľovacie zoznamy tlačidiel, môžeme to obísť.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Použite ľubovoľné tlačidlo na spustenie rozbaľovacej ponuky umiestnením do .btn-group
a poskytnutím správnej značky ponuky.
Rozbaľovacie zoznamy tlačidiel vyžadujú, aby bol vo vašej verzii Bootstrapu zahrnutý rozbaľovací doplnok .
Premeňte tlačidlo na rozbaľovací prepínač s niekoľkými základnými zmenami značiek.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Podobne vytvorte rozbaľovacie zoznamy pre rozdelené tlačidlá s rovnakými zmenami značiek, iba so samostatným tlačidlom.
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Rozbaľovacie zoznamy tlačidiel fungujú s tlačidlami všetkých veľkostí.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
<button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
<button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Spustite rozbaľovacie ponuky nad prvkami pridaním .dropup
do nadradeného prvku.
<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Rozšírte ovládacie prvky formulára pridaním textu alebo tlačidiel pred, za alebo na obe strany akéhokoľvek textového <input>
. Použite .input-group
s .input-group-addon
alebo .input-group-btn
na pridanie alebo pripojenie prvkov k jednému .form-control
.
<input>
sVyhnite sa používaniu <select>
prvkov tu, pretože ich nemožno úplne upraviť v prehliadačoch WebKit.
Vyhnite sa používaniu <textarea>
prvkov tu, pretože ich rows
atribút nebude v niektorých prípadoch rešpektovaný.
Pri používaní popisov nástrojov alebo kontextových okien na prvkoch v rámci .input-group
, budete musieť špecifikovať možnosť container: 'body'
, aby ste sa vyhli nežiaducim vedľajším efektom (ako napríklad, že sa prvok rozšíri a/alebo stratí svoje zaoblené rohy, keď sa spustí popis alebo kontextové okno).
Nemiešajte skupiny formulárov alebo triedy stĺpcov mriežky priamo so vstupnými skupinami. Namiesto toho vnorte vstupnú skupinu do skupiny formulárov alebo prvku súvisiaceho s mriežkou.
Čítačky obrazovky budú mať problémy s vašimi formulármi, ak nezahrniete štítok pre každý vstup. Pre tieto vstupné skupiny zaistite, aby sa do pomocných technológií preniesli všetky ďalšie označenia alebo funkcie.
Presná technika, ktorá sa má použiť (viditeľné <label>
prvky, <label>
prvky skryté pomocou .sr-only
triedy alebo použitie atribútu aria-label
, aria-labelledby
, aria-describedby
, title
alebo placeholder
atribútu) a aké dodatočné informácie bude potrebné poskytnúť, sa budú líšiť v závislosti od presného typu widgetu rozhrania, ktorý implementujete. Príklady v tejto časti poskytujú niekoľko navrhovaných prístupov špecifických pre jednotlivé prípady.
Umiestnite jeden doplnok alebo tlačidlo na obe strany vstupu. Môžete tiež umiestniť jeden na obe strany vstupu.
Nepodporujeme viacero doplnkov ( .input-group-addon
alebo .input-group-btn
) na jednej strane.
Nepodporujeme viacero ovládacích prvkov formulára v jednej vstupnej skupine.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Pridajte relatívne triedy veľkosti formulára k .input-group
sebe a obsah v ňom automaticky zmení veľkosť – nie je potrebné opakovať triedy veľkosti ovládacích prvkov formulára na každom prvku.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Umiestnite akékoľvek začiarkavacie políčko alebo prepínač do doplnku vstupnej skupiny namiesto textu.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Tlačidlá v skupinách vstupov sú trochu iné a vyžadujú si jednu úroveň vnorenia navyše. Namiesto .input-group-addon
, budete musieť použiť .input-group-btn
na zalomenie tlačidiel. Vyžaduje sa to z dôvodu predvolených štýlov prehliadača, ktoré nemožno prepísať.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Zatiaľ čo na každej strane môžete mať iba jeden doplnok, v jednom môžete mať viacero tlačidiel .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Navigačné zariadenia dostupné v Bootstrape majú zdieľané označenie, počnúc základnou .nav
triedou, ako aj zdieľané stavy. Vymeňte triedy modifikátorov na prepínanie medzi jednotlivými štýlmi.
Všimnite si, že .nav-tabs
trieda vyžaduje .nav
základnú triedu.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Vezmite rovnaký kód HTML, ale .nav-pills
namiesto toho použite:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Pilulky sú tiež vertikálne stohovateľné. Stačí pridať .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Pomocou .nav-justified
. Na menších obrazovkách sú navigačné odkazy naukladané.
Zarovnané navigačné odkazy navigačnej lišty momentálne nie sú podporované.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Pre akýkoľvek komponent navigácie (karty alebo pilulky) pridajte .disabled
pre sivé odkazy a bez efektov vznášania .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Pridajte rozbaľovacie ponuky s trochou kódu HTML navyše a rozbaľovacím doplnkom JavaScript .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Navigačné panely sú responzívne meta komponenty, ktoré slúžia ako navigačné hlavičky pre vašu aplikáciu alebo lokalitu. V mobilných zobrazeniach sa začínajú zbaliť (a dajú sa prepínať) a stávajú sa horizontálnymi, keď sa zväčšuje dostupná šírka výrezu.
Zarovnané navigačné odkazy navigačnej lišty momentálne nie sú podporované.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Nahraďte značku navigačného panela vlastným obrázkom výmenou textu za <img>
. Keďže .navbar-brand
má svoje vlastné čalúnenie a výšku, možno budete musieť prepísať niektoré CSS v závislosti od vášho obrázka.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Umiestnite obsah formulára dovnútra .navbar-form
pre správne vertikálne zarovnanie a zbalené správanie v úzkych výrezoch. Pomocou možností zarovnania rozhodnite, kde sa nachádza v obsahu navigačnej lišty.
Ako heads up .navbar-form
zdieľa veľkú časť svojho kódu s .form-inline
cez mixin. Niektoré ovládacie prvky formulárov, napríklad skupiny vstupov, môžu vyžadovať, aby sa v navigačnom paneli správne zobrazovali pevné šírky.
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
Pridajte .navbar-btn
triedu k <button>
prvkom, ktoré sa nenachádzajú v a <form>
, aby ste ich vertikálne vycentrovali na navigačnom paneli.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Reťazce textu zabaľte do prvku s .navbar-text
, zvyčajne na <p>
značku, aby ste získali správny úvod a farbu.
<p class="navbar-text">Signed in as Mark Otto</p>
Pre ľudí, ktorí používajú štandardné odkazy, ktoré nie sú súčasťou bežného navigačného komponentu navbar, použite .navbar-link
triedu na pridanie správnych farieb pre predvolené a inverzné možnosti navigačnej lišty.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Zarovnajte navigačné odkazy, formuláre, tlačidlá alebo text pomocou pomocných tried .navbar-left
alebo . .navbar-right
Obe triedy pridajú CSS float v zadanom smere. Ak chcete napríklad zarovnať navigačné odkazy, umiestnite ich oddelene <ul>
s príslušnou použitou triedou.
Tieto triedy sú zmiešanými verziami .pull-left
a .pull-right
, ale sú zamerané na mediálne dotazy na jednoduchšiu manipuláciu s komponentmi navigačnej lišty v rôznych veľkostiach zariadení.
Pridajte .navbar-fixed-top
a pridajte .container
alebo .container-fluid
do stredu a obsahu navigačnej lišty pad.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Pridajte .navbar-fixed-bottom
a pridajte .container
alebo .container-fluid
do stredu a obsahu navigačnej lišty pad.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Vytvorte navigačnú lištu s plnou šírkou, ktorá sa posúva preč so stránkou pridaním .navbar-static-top
a zahrnutím .container
alebo .container-fluid
do stredu a podložky na obsah navigačnej lišty.
Na rozdiel od .navbar-fixed-*
tried nemusíte meniť žiadnu výplň na body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Upravte vzhľad navigačného panela pridaním .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Označte umiestnenie aktuálnej stránky v rámci navigačnej hierarchie.
Oddeľovače sa do CSS pridávajú automaticky cez :before
a content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Poskytnite odkazy na stránkovanie pre svoje stránky alebo aplikáciu pomocou komponentu stránkovania na viacerých stránkach alebo jednoduchšej alternatívy pagera .
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.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Komponent stránkovania by mal byť zabalený do <nav>
prvku, ktorý ho identifikuje ako navigačnú sekciu pre čítačky obrazovky a ďalšie pomocné technológie. Okrem toho, keďže je pravdepodobné, že stránka už obsahuje viac ako jednu navigačnú sekciu (ako je primárna navigácia v hlavičke alebo navigácia na bočnom paneli), odporúča sa poskytnúť popis aria-label
, <nav>
ktorý odráža jej účel. Ak sa napríklad komponent stránkovania používa na navigáciu medzi množinou výsledkov vyhľadávania, vhodné označenie môže byť aria-label="Search results pages"
.
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.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Odporúčame vám vymeniť aktívne alebo deaktivované kotvy za <span>
, alebo vynechať kotvu v prípade šípok predchádzajúcej/nasledujúcej, aby ste odstránili funkciu klikania a zároveň zachovali zamýšľané štýly.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Máte chuť na väčšie alebo menšie stránkovanie? Pridajte .pagination-lg
alebo .pagination-sm
pre ďalšie veľkosti.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
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.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Prípadne môžete zarovnať každý odkaz na strany:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Odkazy na pager tiež používajú všeobecnú .disabled
pomocnú triedu zo stránkovania.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Ak chcete zmeniť vzhľad štítku, pridajte ľubovoľnú z nižšie uvedených tried modifikátorov.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Problémy s vykresľovaním môžu nastať, keď máte v úzkom kontajneri desiatky vložených štítkov, z ktorých každý obsahuje svoj vlastný inline-block
prvok (napríklad ikonu). Cesta okolo je nastavenie display: inline-block;
. Kontext a príklad nájdete na #13219 .
Jednoducho zvýraznite nové alebo neprečítané položky pridaním <span class="badge">
odkazov na, navigačných prvkov Bootstrap a ďalších.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Ak neexistujú žiadne nové alebo neprečítané položky, odznaky sa jednoducho zbalia (prostredníctvom :empty
selektora CSS) za predpokladu, že v nich neexistuje žiadny obsah.
Odznaky sa v programe Internet Explorer 8 nezbalia, pretože mu chýba podpora pre :empty
výber.
Zabudované štýly sú zahrnuté pre umiestnenie odznakov do aktívnych stavov v tabletových navigáciách.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Ľahký, flexibilný komponent, ktorý môže voliteľne rozšíriť celú zobrazovanú oblasť a zobraziť tak kľúčový obsah na vašom webe.
Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Ak chcete, aby bol jumbotron v plnej šírke a bez zaoblených rohov, umiestnite ho mimo všetkých .container
s a namiesto toho pridajte .container
vnútri.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Jednoduchý shell na h1
vhodné rozloženie a segmentovanie častí obsahu na stránke. Môže využívať h1
predvolený small
prvok 's, ako aj väčšinu ostatných komponentov (s ďalšími štýlmi).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Rozšírte mriežkový systém Bootstrapu o komponent miniatúr, aby ste mohli jednoducho zobraziť mriežky obrázkov, videí, textu a ďalších.
Ak hľadáte prezentáciu miniatúr rôznych výšok a/alebo šírok podobnú Pinterestu, budete musieť použiť doplnok tretej strany, ako napríklad Masonry , Isotope alebo Salvattore .
V predvolenom nastavení sú miniatúry Bootstrapu navrhnuté tak, aby zobrazovali prepojené obrázky s minimálnym požadovaným označením.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
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.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p>...</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
Poskytujte kontextové správy so spätnou väzbou pre typické akcie používateľa pomocou niekoľkých dostupných a flexibilných výstražných správ.
Zabaľte ľubovoľný text a voliteľné tlačidlo na zrušenie do .alert
jednej zo štyroch kontextových tried (napr. .alert-success
) pre základné výstražné správy.
Výstrahy nemajú predvolené triedy, iba základné triedy a triedy modifikátorov. Predvolené šedé upozornenie nedáva príliš zmysel, takže musíte zadať typ prostredníctvom kontextovej triedy. Vyberte si z úspechu, informácií, varovania alebo nebezpečenstva.
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
Stavte na akékoľvek upozornenie pridaním voliteľného .alert-dismissible
tlačidla a tlačidla zavrieť.
Ak chcete, aby boli upozornenia plne funkčné a odmietnuté, musíte použiť doplnok JavaScript pre upozornenia .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Nezabudnite použiť <button>
prvok s data-dismiss="alert"
atribútom data.
Použite .alert-link
triedu utility na rýchle poskytnutie zodpovedajúcich farebných odkazov v rámci akéhokoľvek upozornenia.
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>
Poskytnite aktuálnu spätnú väzbu o priebehu pracovného postupu alebo akcie pomocou jednoduchých, ale flexibilných ukazovateľov priebehu.
Ukazovatele priebehu používajú prechody a animácie CSS3 na dosiahnutie niektorých svojich efektov. Tieto funkcie nie sú podporované v prehliadači Internet Explorer 9 a novšom ani v starších verziách prehliadača Firefox. Opera 12 nepodporuje animácie.
Ak má vaša webová lokalita politiku zabezpečenia obsahu (CSP) , ktorá nepovoľuje style-src 'unsafe-inline'
, nebudete môcť použiť vložené style
atribúty na nastavenie šírky indikátora priebehu, ako je uvedené v príkladoch nižšie. Alternatívne metódy na nastavenie šírok, ktoré sú kompatibilné s prísnymi CSP, zahŕňajú použitie malého vlastného JavaScriptu (ktorý nastavuje element.style.width
) alebo použitie vlastných tried CSS.
Predvolený indikátor priebehu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
<span class="sr-only">60% Complete</span>
</div>
</div>
Odstráňte triedu <span>
with .sr-only
z indikátora priebehu, aby sa zobrazilo viditeľné percento.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Ak chcete zabezpečiť, aby text označenia zostal čitateľný aj pri nízkych percentách, zvážte pridanie znaku min-width
do indikátora priebehu.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Panely priebehu používajú niektoré z rovnakých tried tlačidiel a upozornení pre konzistentné štýly.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Používa prechod na vytvorenie pruhovaného efektu. Nie je k dispozícii v IE9 a nižších verziách.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Pridať .active
do .progress-bar-striped
a animovať pruhy sprava doľava. Nie je k dispozícii v IE9 a nižších verziách.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Umiestnite viacero tyčí do toho istého .progress
a stohujte ich.
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 35%">
<span class="sr-only">35% Complete (success)</span>
</div>
<div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
<span class="sr-only">20% Complete (warning)</span>
</div>
<div class="progress-bar progress-bar-danger" style="width: 10%">
<span class="sr-only">10% Complete (danger)</span>
</div>
</div>
Štýly abstraktných objektov na vytváranie rôznych typov komponentov (ako sú komentáre blogu, Tweety atď.), ktoré obsahujú obrázok zarovnaný doľava alebo doprava popri textovom obsahu.
Predvolené médium zobrazuje mediálny objekt (obrázky, video, zvuk) naľavo alebo napravo od bloku obsahu.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Triedy .pull-left
a .pull-right
tiež existujú a boli predtým používané ako súčasť mediálneho komponentu, ale od verzie 3.3.0 sú pre toto použitie zastarané. Sú približne ekvivalentné .media-left
a .media-right
, okrem toho, že .media-right
by mali byť umiestnené za .media-body
v html.
Obrázky alebo iné médiá môžu byť zarovnané nahor, na stred alebo nadol. Predvolená hodnota je zarovnaná nahor.
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque 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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque 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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque 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.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
S trochou dodatočných značiek môžete použiť zoznam médií (užitočné pre vlákna komentárov alebo zoznamy článkov).
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Skupiny zoznamov sú flexibilným a výkonným komponentom na zobrazenie nielen jednoduchých zoznamov prvkov, ale aj zložitých zoznamov s vlastným obsahom.
Najzákladnejšia skupina zoznamov je jednoducho neusporiadaný zoznam s položkami zoznamu a príslušnými triedami. Stavte na to pomocou možností, ktoré nasledujú, alebo podľa potreby pomocou vlastného CSS.
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
Pridajte komponent odznakov do ľubovoľnej položky skupiny zoznamu a bude automaticky umiestnený vpravo.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Prepojte položky skupiny zoznamov pomocou značiek ukotvenia namiesto položiek zoznamu (to tiež znamená nadradenú položku <div>
namiesto <ul>
). Nie je potreba individuálnych rodičov okolo každého prvku.
<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Položky skupiny zoznamu môžu byť namiesto položiek zoznamu tlačidlami (to tiež znamená nadradený prvok <div>
namiesto <ul>
). Nie je potreba individuálnych rodičov okolo každého prvku. Tu nepoužívajte štandardné .btn
triedy.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Pridajte .disabled
do a .list-group-item
, ak chcete, aby sa javil ako deaktivovaný.
<div class="list-group">
<a href="#" class="list-group-item disabled">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
Použite kontextové triedy na štýlovanie položiek zoznamu, predvolených alebo prepojených. Zahŕňa aj .active
štát.
<ul class="list-group">
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
<a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
<a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>
Pridajte takmer akýkoľvek kód HTML, dokonca aj pre skupiny prepojených zoznamov, ako je tá nižšie.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
</a>
</div>
Aj keď to nie je vždy potrebné, niekedy musíte svoj DOM vložiť do krabice. V takýchto situáciách vyskúšajte komponent panelu.
V predvolenom nastavení je všetko, čo .panel
robíte, aplikujte nejaké základné orámovanie a výplň, aby obsahovali nejaký obsah.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Ľahko pridajte kontajner nadpisov na svoj panel pomocou .panel-heading
. Môžete tiež zahrnúť ľubovoľné <h1>
- <h6>
s .panel-title
triedou a pridať predštylizovaný nadpis. Veľkosti písma <h1>
- <h6>
sú však prepísané .panel-heading
.
Pre správne zafarbenie odkazov nezabudnite umiestniť odkazy do nadpisov v rámci .panel-title
.
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
Zalamujte tlačidlá alebo sekundárny text do .panel-footer
. Všimnite si, že päty panelov nededia farby a okraje pri používaní kontextových variácií, pretože nemajú byť v popredí.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Podobne ako pri iných komponentoch môžete panel jednoducho zvýšiť zmysluplnosťou pre konkrétny kontext pridaním ktorejkoľvek z tried kontextového stavu.
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>
Pridajte akýkoľvek neohraničený .table
panel pre bezproblémový dizajn. Ak je tam .panel-body
, pridáme do hornej časti tabuľky ďalší okraj na oddelenie.
Tu je nejaký predvolený obsah panela. Nulla vitae elit libero, pharetra augue. lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | Krstné meno | Priezvisko | Používateľské meno |
---|---|---|---|
1 | Marka | Otto | @mdo |
2 | Jacob | Thornton | @tuk |
3 | Larry | vták |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Ak neexistuje telo panelu, komponent sa bez prerušenia presunie z hlavičky panelu do tabuľky.
# | Krstné meno | Priezvisko | Používateľské meno |
---|---|---|---|
1 | Marka | Otto | @mdo |
2 | Jacob | Thornton | @tuk |
3 | Larry | vták |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Do ľubovoľného panela jednoducho zahrňte skupiny zoznamov s plnou šírkou .
Tu je nejaký predvolený obsah panela. Nulla vitae elit libero, pharetra augue. lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>...</p>
</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
Umožnite prehliadačom určiť rozmery videa alebo prezentácie na základe šírky bloku, ktorý ich obsahuje, vytvorením vnútorného pomeru, ktorý sa bude správne škálovať na akomkoľvek zariadení.
Pravidlá sa priamo aplikujú na prvky <iframe>
, <embed>
, <video>
a <object>
; voliteľne použite explicitnú triedu potomka, .embed-responsive-item
ak chcete prispôsobiť štýl pre iné atribúty.
Pro-Tip! frameborder="0"
Do svojho s nemusíte zahrnúť <iframe>
, pretože to prepíšeme za vás.
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
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-lg">...</div>
<div class="well well-sm">...</div>