Komponenty
Více než tucet opakovaně použitelných komponent vytvořených tak, aby poskytovaly ikonografii, rozevírací seznamy, skupiny vstupů, navigaci, upozornění a mnoho dalšího.
Více než tucet opakovaně použitelných komponent vytvořených tak, aby poskytovaly ikonografii, rozevírací seznamy, skupiny vstupů, navigaci, upozornění a mnoho dalšího.
Obsahuje více než 250 glyfů ve formátu písma ze sady Glyphicon Halflings. Glyphicons Halflings normálně nejsou k dispozici zdarma, ale jejich tvůrce je zdarma zpřístupnil pro Bootstrap. Jako poděkování vás pouze žádáme, abyste zahrnuli odkaz zpět na Glyphicons , kdykoli je to možné.
Z důvodů výkonu vyžadují všechny ikony základní třídu a individuální třídu ikon. Chcete-li použít, umístěte následující kód téměř kamkoli. Nezapomeňte ponechat mezeru mezi ikonou a textem pro správné odsazení.
Třídy ikon nelze přímo kombinovat s jinými komponentami. Neměly by se používat spolu s jinými třídami na stejném prvku. Místo toho přidejte vnořené <span>
a aplikujte třídy ikon na <span>
.
Třídy ikon by se měly používat pouze u prvků, které neobsahují žádný textový obsah a nemají žádné podřízené prvky.
Bootstrap předpokládá, že soubory písem ikon budou umístěny v ../fonts/
adresáři vzhledem ke zkompilovaným souborům CSS. Přesunutí nebo přejmenování těchto souborů písem znamená aktualizaci CSS jedním ze tří způsobů:
@icon-font-path
a/nebo @icon-font-name
ve zdrojových souborech Less.url()
cesty v kompilovaném CSS.Použijte jakoukoli možnost, která nejlépe vyhovuje vašemu konkrétnímu nastavení vývoje.
Moderní verze asistenčních technologií oznámí obsah generovaný CSS a také specifické znaky Unicode. Abychom se vyhnuli nezamýšlenému a matoucímu výstupu v programech pro čtení z obrazovky (zejména když se ikony používají čistě pro ozdobu), skryjeme je pomocí aria-hidden="true"
atributu.
Používáte-li ikonu k vyjádření významu (spíše než pouze jako dekorativní prvek), zajistěte, aby byl tento význam přenesen také do asistenčních technologií – například zahrňte další obsah, vizuálně skrytý s .sr-only
třídou.
Pokud vytváříte ovládací prvky bez dalšího textu (například <button>
obsahující pouze ikonu), měli byste vždy poskytnout alternativní obsah k identifikaci účelu ovládacího prvku, aby dával uživatelům asistenčních technologií smysl. V tomto případě můžete přidat aria-label
atribut na samotný ovládací prvek.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Použijte je v tlačítkách, skupinách tlačítek pro panel nástrojů, navigaci nebo vstupy do formuláře.
<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á ve výstraze sdělující, že se jedná o chybovou zprávu, s dalším .sr-only
textem, který tuto nápovědu sděluje uživatelům asistenčních technologií.
<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>
Přepínatelné, kontextové menu pro zobrazení seznamů odkazů. Vytvořeno interaktivní pomocí rozbalovacího pluginu JavaScript .
Zabalte spouštěč rozbalovací nabídky a rozbalovací nabídku do .dropdown
, nebo jiného prvku, který deklaruje position: relative;
. Poté přidejte HTML nabídky.
<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>
Rozbalovací nabídky lze změnit tak, aby se rozbalovaly nahoru (namísto dolů) přidáním .dropup
k nadřazenému prvku.
<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>
Ve výchozím nastavení je rozbalovací nabídka automaticky umístěna 100 % shora a podél levé strany nadřazené položky. Přidat .dropdown-menu-right
do a .dropdown-menu
zarovnat rozbalovací nabídku doprava.
Rozbalovací seznamy jsou automaticky umístěny pomocí CSS v rámci běžného toku dokumentu. To znamená, že rozbalovací seznamy mohou být oříznuty rodiči s určitými overflow
vlastnostmi nebo se mohou objevit mimo hranice výřezu. Řešte tyto problémy sami, jakmile se objeví.
.pull-right
zarovnáníOd verze 3.1.0 jsme přestali podporovat .pull-right
rozevírací nabídky. Chcete-li nabídku zarovnat vpravo, použijte .dropdown-menu-right
. Komponenty navigace zarovnané doprava v navigační liště používají smíšenou verzi této třídy k automatickému zarovnání nabídky. Chcete-li jej přepsat, použijte .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Přidejte záhlaví k označení částí akcí v libovolné rozbalovací nabídce.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Přidejte oddělovač k samostatným sériím odkazů v rozevírací nabídce.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Přidejte .disabled
do <li>
rozevíracího seznamu a deaktivujte odkaz.
<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>
Seskupte řadu tlačítek na jeden řádek se skupinou tlačítek. Pomocí našeho pluginu pro tlačítka přidejte volitelný přepínač JavaScriptu a styl zaškrtávacího políčka .
Při používání popisků nástrojů nebo vyskakovacích oken na prvky v rámci .btn-group
, budete muset určit volbu container: 'body'
, abyste se vyhnuli nežádoucím vedlejším efektům (jako je například zvětšení prvku nebo ztráta zaoblených rohů při spuštění popisku nebo vyskakovacího okna).
role
a poskytněte štítekAby asistenční technologie – jako jsou čtečky obrazovky – sdělily, že je řada tlačítek seskupena, je třeba poskytnout vhodný role
atribut. Pro skupiny tlačítek by to bylo role="group"
, zatímco panely nástrojů by měly mít role="toolbar"
.
Jedinou výjimkou jsou skupiny, které obsahují pouze jeden ovládací prvek (například zarovnané skupiny tlačítek s <button>
prvky) nebo rozevírací seznam.
Skupiny a panely nástrojů by navíc měly být označeny explicitně, protože většina asistenčních technologií je jinak neoznámí, a to i přes přítomnost správného role
atributu. Ve zde uvedených příkladech používáme , ale lze použít i aria-label
alternativy jako např .aria-labelledby
Zabalte řadu tlačítek .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">
pro složitější 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>
Namísto použití tříd velikosti tlačítek na každé tlačítko ve skupině stačí přidat .btn-group-*
ke každému .btn-group
, včetně vnoření více skupin.
<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>
Pokud chcete rozbalovací nabídky smíchané s řadou tlačítek, umístěte a .btn-group
..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>
Zajistěte, aby se sada tlačítek jevila svisle, nikoli vodorovně. Rozbalovací seznamy tlačítek rozdělení zde nejsou podporovány.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Vytvořte skupinu tlačítek, která se natáhne ve stejné velikosti, aby se rozprostírala po celé šířce jejího rodiče. Funguje také s rozevíracími seznamy tlačítek ve skupině tlačítek.
Kvůli specifickému HTML a CSS použitému k zarovnání tlačítek (jmenovitě display: table-cell
), jsou hranice mezi nimi zdvojené. V běžných skupinách tlačítek margin-left: -1px
se používá ke skládání okrajů namísto jejich odstraňování. margin
Nefunguje však s display: table-cell
. V důsledku toho, v závislosti na vašich přizpůsobeních Bootstrapu, možná budete chtít odstranit nebo přebarvit okraje.
Internet Explorer 8 nevykresluje okraje na tlačítkách ve skupině zarovnaných tlačítek, ať už jsou zapnuté <a>
nebo <button>
prvky. Chcete-li to obejít, zabalte každé tlačítko do jiného .btn-group
.
Další informace viz #12476 .
<a>
prvkyStačí zabalit řadu .btn
s do .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Pokud se <a>
prvky používají k tomu, aby fungovaly jako tlačítka – spouštějí funkcionalitu na stránce, spíše než pro navigaci do jiného dokumentu nebo sekce na aktuální stránce – měly by mít také odpovídající role="button"
.
<button>
prvkyChcete-li použít zarovnané skupiny tlačítek s <button>
prvky, musíte každé tlačítko zabalit do skupiny tlačítek . Většina prohlížečů správně nepoužívá naše CSS pro zdůvodnění <button>
prvků, ale protože podporujeme rozevírací seznamy tlačítek, můžeme to obejít.
<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>
Pomocí libovolného tlačítka spustíte rozevírací nabídku tak, že ji umístíte do a .btn-group
a poskytnete správnou značku nabídky.
Rozbalovací seznamy tlačítek vyžadují, aby byl ve vaší verzi Bootstrapu zahrnut rozbalovací plugin .
Proměňte tlačítko na rozbalovací přepínač s některými základními změnami označení.
<!-- 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>
Podobně vytvořte rozbalovací seznamy rozdělených tlačítek se stejnými změnami označení, pouze se samostatným tlačítkem.
<!-- 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>
Rozbalovací seznamy tlačítek fungují s tlačítky všech velikostí.
<!-- 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>
Spusťte rozbalovací nabídky nad prvky přidáním .dropup
k nadřazenému 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šiřte ovládací prvky formuláře přidáním textu nebo tlačítek před, za nebo na obě strany jakéhokoli textového <input>
. Použijte .input-group
s .input-group-addon
nebo .input-group-btn
k předřazení nebo připojení prvků k jedné .form-control
.
<input>
sNepoužívejte <select>
zde prvky, protože v prohlížečích WebKit nemohou být plně stylizovány.
Nepoužívejte <textarea>
zde prvky, protože jejich rows
atribut nebude v některých případech respektován.
Při použití popisků nástrojů nebo vyskakovacích oken na prvky v rámci .input-group
, budete muset určit volbu container: 'body'
, abyste se vyhnuli nežádoucím vedlejším efektům (jako je například zvětšení prvku nebo ztráta zaoblených rohů při spuštění popisku nebo vyskakovacího okna).
Nemíchejte skupiny formulářů nebo třídy sloupců mřížky přímo se vstupními skupinami. Místo toho vnořte vstupní skupinu do skupiny formulářů nebo prvku souvisejícího s mřížkou.
Čtečky obrazovky budou mít potíže s vašimi formuláři, pokud pro každý vstup neuvedete štítek. U těchto vstupních skupin zajistěte, aby byly do pomocných technologií přeneseny všechny další štítky nebo funkce.
Přesná technika, která se má použít (viditelné <label>
prvky, <label>
prvky skryté pomocí .sr-only
třídy nebo použití atributu aria-label
, aria-labelledby
, aria-describedby
, title
nebo placeholder
atributu) a jaké další informace bude třeba předat, se bude lišit v závislosti na přesném typu widgetu rozhraní, který implementujete. Příklady v této části poskytují několik navrhovaných přístupů specifických pro jednotlivé případy.
Umístěte jeden doplněk nebo tlačítko na obě strany vstupu. Můžete také umístit jeden na obě strany vstupu.
Nepodporujeme více doplňků ( .input-group-addon
nebo .input-group-btn
) na jedné straně.
Nepodporujeme více ovládacích prvků formuláře v jedné vstupní skupině.
<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>
Přidejte relativní třídy velikosti formuláře k .input-group
sobě a obsah uvnitř automaticky změní velikost – není třeba opakovat třídy velikosti ovládacích prvků formuláře na každém 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>
Místo textu umístěte libovolné zaškrtávací políčko nebo přepínač do doplňku vstupní skupiny.
<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čítka ve vstupních skupinách jsou trochu jiná a vyžadují jednu úroveň vnoření navíc. Místo .input-group-addon
, budete muset použít .input-group-btn
k zabalení tlačítek. To je vyžadováno kvůli výchozím stylům prohlížeče, které nelze přepsat.
<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>
Zatímco na každé straně můžete mít pouze jeden doplněk, můžete mít více tlačítek v jednom .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í systémy dostupné v Bootstrapu mají sdílené označení, počínaje základní .nav
třídou, a také sdílené stavy. Zaměňte třídy modifikátorů pro přepínání mezi jednotlivými styly.
Všimněte si, že .nav-tabs
třída vyžaduje .nav
základní třídu.
<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>
Vezměte stejný HTML, ale použijte .nav-pills
místo něj:
<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 jsou také vertikálně stohovatelné. Stačí přidat .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Snadno vytvořte karty nebo pilulky stejné šířky jako jejich rodiče na obrazovkách širších než 768 pixelů pomocí .nav-justified
. Na menších obrazovkách jsou navigační odkazy naskládané.
Zarovnané navigační odkazy navbar nejsou aktuálně podporovány.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
.disabled
Pro jakoukoli komponentu navigace (karty nebo pilulky) přidejte šedé odkazy a žádné efekty přechodu .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Přidejte rozevírací nabídky s trochou kódu HTML navíc a rozbalovacím pluginem 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>
Navbary jsou responzivní metakomponenty, které slouží jako navigační záhlaví pro vaši aplikaci nebo web. V mobilních zobrazeních se začínají sbalovat (a lze je přepínat) a s rostoucí šířkou dostupného výřezu se stávají vodorovnými.
Zarovnané navigační odkazy navbar nejsou aktuálně podporovány.
<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 navbar svým vlastním obrázkem výměnou textu za <img>
. Protože .navbar-brand
má vlastní výplň a výšku, možná budete muset přepsat některé CSS v závislosti na vašem obrázku.
<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>
Umístěte obsah formuláře dovnitř .navbar-form
pro správné vertikální zarovnání a sbalené chování v úzkých výřezech. Pomocí voleb zarovnání rozhodněte, kde bude umístěn v obsahu navigační lišty.
Jako heads up .navbar-form
sdílí většinu svého kódu s .form-inline
přes mixin. Některé ovládací prvky formuláře, jako jsou vstupní skupiny, mohou vyžadovat, aby se v navigační liště správně zobrazily pevné šířky.
<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>
Přidejte .navbar-btn
třídu k <button>
prvkům, které se nenacházejí v a <form>
, abyste je svisle vycentrovali v navigační liště.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Zabalte řetězce textu do prvku s .navbar-text
, obvykle na <p>
značku pro správné prokládání a barvu.
<p class="navbar-text">Signed in as Mark Otto</p>
Pro uživatele, kteří používají standardní odkazy, které nejsou součástí běžné navigační komponenty navbar, použijte .navbar-link
třídu k přidání správných barev pro výchozí a inverzní možnosti navbar.
<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>
Zarovnejte navigační odkazy, formuláře, tlačítka nebo text pomocí tříd .navbar-left
nebo . .navbar-right
Obě třídy přidají CSS float v určeném směru. Chcete-li například zarovnat navigační odkazy, umístěte je samostatně <ul>
s příslušnou použitou třídou utility.
Tyto třídy jsou smíšenými verzemi .pull-left
a .pull-right
, ale jsou určeny pro dotazy na média pro snazší manipulaci s komponentami navigační lišty v různých velikostech zařízení.
Přidejte .navbar-fixed-top
a zahrňte .container
nebo .container-fluid
do středu a obsahu navigační lišty pad.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Přidejte .navbar-fixed-bottom
a zahrňte .container
nebo .container-fluid
do středu a obsahu navigační lišty pad.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Vytvořte navigační panel s plnou šířkou, který se posune se stránkou, přidáním .navbar-static-top
a zahrnutím .container
nebo .container-fluid
do středu a obsahu navigačního panelu.
Na rozdíl od .navbar-fixed-*
tříd nemusíte měnit žádné odsazení na body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Upravte vzhled navigační lišty přidáním.navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Označte umístění aktuální stránky v rámci navigační hierarchie.
Oddělovače se do CSS přidávají automaticky prostřednictvím :before
a content
.
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
Poskytněte stránkovací odkazy pro váš web nebo aplikaci pomocí vícestránkové stránky stránkování nebo jednodušší alternativy pageru .
Jednoduché stránkování inspirované Rdio, skvělé pro aplikace a výsledky vyhledávání. Velký blok je těžké přehlédnout, je snadno škálovatelný a poskytuje velké klikací 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>
Komponenta stránkování by měla být zabalena do <nav>
prvku, který ji identifikuje jako navigační sekci pro čtečky obrazovky a další pomocné technologie. Kromě toho, protože stránka pravděpodobně již obsahuje více než jednu takovou navigační sekci (jako je primární navigace v záhlaví nebo navigace na postranním panelu), je vhodné poskytnout popis aria-label
, <nav>
který odráží její účel. Pokud se například komponenta stránkování používá k navigaci mezi sadou výsledků vyhledávání, může být vhodný štítek aria-label="Search results pages"
.
Odkazy lze přizpůsobit různým okolnostem. Použijte .disabled
pro odkazy, na které nelze kliknout, a .active
pro označení aktuální 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>
Doporučujeme zaměnit aktivní nebo deaktivované kotvy za <span>
nebo vynechat kotvu v případě předchozích/následujících šipek, abyste odstranili funkci kliknutí a zachovali zamýšlené styly.
<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ětší nebo menší stránkování? Přidejte .pagination-lg
nebo .pagination-sm
pro další velikosti.
<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>
Rychlé předchozí a následující odkazy pro jednoduché implementace stránkování s lehkým značením a styly. Je to skvělé pro jednoduché weby, jako jsou blogy nebo časopisy.
Ve výchozím nastavení pager vycentruje odkazy.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Případně můžete každý odkaz zarovnat ke stranám:
<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 také používají .disabled
třídu obecného nástroje ze stránkování.
<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>
Chcete-li změnit vzhled štítku, přidejte kteroukoli z níže uvedených tříd modifikátorů.
<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 vykreslováním mohou nastat, když máte v úzkém kontejneru desítky vložených štítků, z nichž každý obsahuje svůj vlastní inline-block
prvek (jako ikonu). Cesta kolem je nastavení display: inline-block;
. Kontext a příklad viz #13219 .
Snadno zvýrazněte nové nebo nepřečtené položky přidáním <span class="badge">
odkazů na, Bootstrap nav a dalších.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Když nejsou žádné nové nebo nepřečtené položky, odznaky se jednoduše sbalí (prostřednictvím :empty
selektoru CSS), pokud v nich není žádný obsah.
Odznaky se v aplikaci Internet Explorer 8 nesbalí, protože postrádá podporu pro :empty
výběr.
Vestavěné styly jsou zahrnuty pro umístění odznaků v aktivních stavech v pilulkových navigací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>
Lehká a flexibilní komponenta, která může volitelně rozšířit celou zobrazovanou oblast a předvést klíčový obsah na vašem webu.
Jedná se o jednoduchou jednotku hrdiny, jednoduchou komponentu ve stylu jumbotronu, která přitahuje zvláštní pozornost k doporučenému obsahu nebo informacím.
<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>
Chcete-li mít jumbotron plnou šířku a bez zaoblených rohů, umístěte jej mimo všechna .container
sa a místo toho přidejte .container
uvnitř.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Jednoduchý shell pro h1
náležité rozmístění a segmentaci částí obsahu na stránce. Může využívat h1
výchozí small
prvek 's, stejně jako většinu ostatních komponent (s dalšími styly).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Rozšiřte mřížkový systém Bootstrapu o komponentu miniatur, abyste mohli snadno zobrazovat mřížky obrázků, videí, textu a dalších.
Pokud hledáte prezentaci miniatur s různou výškou a/nebo šířkou podobnou Pinterestu, budete muset použít plugin třetí strany, jako je Masonry , Isotope nebo Salvattore .
Ve výchozím nastavení jsou miniatury Bootstrapu navrženy tak, aby zobrazovaly připojené obrázky s minimálním 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 zvláštního označení je možné do miniatur přidat jakýkoli druh obsahu HTML, jako jsou nadpisy, odstavce nebo tlačítka.
<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é zprávy zpětné vazby pro typické akce uživatele pomocí několika dostupných a flexibilních výstražných zpráv.
Zabalte libovolný text a volitelné tlačítko pro zrušení do .alert
jedné ze čtyř kontextových tříd (např. .alert-success
) pro základní výstražné zprávy.
Upozornění nemají výchozí třídy, pouze základní a modifikační třídy. Výchozí šedé upozornění nedává příliš smysl, takže musíte zadat typ pomocí kontextové třídy. Vyberte si z úspěchu, informací, varování nebo nebezpečí.
<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 jakékoli upozornění přidáním volitelného .alert-dismissible
a zavíracího tlačítka.
Aby byla upozornění plně funkční a zavřená, musíte použít plugin JavaScript pro upozornění .
<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>
Nezapomeňte použít <button>
prvek s data-dismiss="alert"
atributem data.
Použijte .alert-link
třídu utility k rychlému poskytnutí odpovídajících barevných odkazů v rámci jakéhokoli upozornění.
<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>
Poskytujte aktuální zpětnou vazbu o průběhu pracovního postupu nebo akce pomocí jednoduchých, ale flexibilních ukazatelů průběhu.
Ukazatele průběhu používají přechody a animace CSS3 k dosažení některých svých efektů. Tyto funkce nejsou podporovány v prohlížeči Internet Explorer 9 a nižších nebo starších verzích Firefoxu. Opera 12 nepodporuje animace.
Pokud má váš web Zásady zabezpečení obsahu (CSP) , které nepovolují style-src 'unsafe-inline'
, nebudete moci použít vložené style
atributy k nastavení šířky ukazatele průběhu, jak je znázorněno v našich příkladech níže. Alternativní metody pro nastavení šířek, které jsou kompatibilní s přísnými CSP, zahrnují použití malého vlastního JavaScriptu (který nastavuje element.style.width
) nebo použití vlastních tříd CSS.
Výchozí ukazatel průběhu.
<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>
Odeberte třídu <span>
with .sr-only
z indikátoru průběhu, abyste zobrazili viditelné procento.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
60%
</div>
</div>
Chcete-li zajistit, aby text štítku zůstal čitelný i při nízkých procentech, zvažte přidání znaku min-width
do ukazatele průběhu.
<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>
Ukazatele průběhu používají některé stejné třídy tlačítek a výstrah pro konzistentní styly.
<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žívá přechod k vytvoření pruhovaného efektu. Není k dispozici v IE9 a nižší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>
Přidat .active
k .progress-bar-striped
animaci pruhů zprava doleva. Není k dispozici v IE9 a nižší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>
Umístěte více tyčí do stejné .progress
a stohujte je.
<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>
Styly abstraktních objektů pro vytváření různých typů komponent (jako jsou komentáře blogu, tweety atd.), které obsahují vedle textového obsahu obrázek zarovnaný doleva nebo doprava.
Výchozí médium zobrazuje objekt média (obrázky, video, zvuk) vlevo nebo vpravo 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>
Třídy .pull-left
a .pull-right
také existují a byly dříve používány jako součást mediální komponenty, ale od verze 3.3.0 jsou pro toto použití zastaralé. Jsou přibližně ekvivalentní .media-left
a .media-right
, kromě toho, že .media-right
by měly být umístěny za .media-body
v html.
Obrázky nebo jiná média mohou být zarovnána nahoře, uprostřed nebo dole. Výchozí nastavení je zarovnáno shora.
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 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 vel metus scelerisque 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 vel metus scelerisque 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 zvláštního označení můžete použít média uvnitř seznamu (užitečné pro vlákna komentářů nebo seznamy článků).
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque 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 seznamů jsou flexibilní a výkonná komponenta pro zobrazení nejen jednoduchých seznamů prvků, ale i komplexních s vlastním obsahem.
Nejzákladnější skupina seznamů je jednoduše neuspořádaný seznam s položkami seznamu a správnými třídami. Stavte na něm pomocí následujících možností nebo podle potřeby pomocí 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>
Přidejte komponentu odznaků do libovolné položky skupiny seznamu a bude automaticky umístěna vpravo.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Propojte položky skupiny seznamu pomocí značek ukotvení namísto položek seznamu (to také znamená nadřazený <div>
prvek namísto <ul>
). Není potřeba, aby kolem každého prvku byli jednotliví rodiče.
<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 seznamu mohou být tlačítka namísto položek seznamu (to také znamená nadřazený znak <div>
namísto <ul>
). Není potřeba, aby kolem každého prvku byli jednotliví rodiče. Zde nepoužívejte standardní .btn
třídy.
<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>
Přidejte .disabled
do a , chcete-li .list-group-item
jej zašednout, aby se jevil jako zakázán.
<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žijte kontextové třídy ke stylování položek seznamu, výchozí nebo propojené. Zahrnuje také .active
stá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>
Přidejte téměř jakýkoli HTML, dokonce i pro skupiny propojených seznamů, jako je ta níže.
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>
I když to není vždy nutné, někdy musíte svůj DOM vložit do krabice. Pro tyto situace vyzkoušejte komponentu panelu.
Ve výchozím nastavení .panel
stačí použít základní ohraničení a výplň, aby obsahoval nějaký obsah.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Snadno přidejte kontejner záhlaví na svůj panel pomocí .panel-heading
. Můžete také zahrnout libovolné <h1>
- <h6>
s .panel-title
třídou a přidat předstylovaný nadpis. Velikosti písem <h1>
- <h6>
jsou však přepsány .panel-heading
.
Pro správné vybarvení odkazů nezapomeňte umístit odkazy do nadpisů 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čítka nebo sekundární text do .panel-footer
. Všimněte si, že zápatí panelu nedědí barvy a ohraničení při použití kontextových variant, protože nemají být v popředí.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Stejně jako ostatní komponenty můžete snadno učinit panel smysluplnějším pro konkrétní kontext přidáním jakékoli z tříd kontextuální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>
Přidejte .table
do panelu jakékoli neohraničené pro bezproblémový design. Pokud existuje .panel-body
, přidáme k horní části tabulky další ohraničení pro oddělení.
Zde je nějaký výchozí obsah panelu. Nulla vitae elitní libero, pharetra augue. Aenean 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.
# | Jméno | Příjmení | Uživatelské jméno |
---|---|---|---|
1 | Označit | Otto | @mdo |
2 | Jacobe | Thornton | @Tlustý |
3 | Larry | pták | @cvrlikání |
<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>
Pokud není k dispozici tělo panelu, komponenta se bez přerušení přesune z hlavičky panelu do tabulky.
# | Jméno | Příjmení | Uživatelské jméno |
---|---|---|---|
1 | Označit | Otto | @mdo |
2 | Jacobe | Thornton | @Tlustý |
3 | Larry | pták | @cvrlikání |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Do libovolného panelu snadno zahrňte skupiny seznamů v plné šířce .
Zde je nějaký výchozí obsah panelu. Nulla vitae elitní libero, pharetra augue. Aenean 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žněte prohlížečům určit rozměry videa nebo prezentace na základě šířky bloku, který obsahuje, vytvořením vnitřního poměru, který se bude správně škálovat na jakémkoli zařízení.
Pravidla jsou přímo aplikována na prvky <iframe>
, <embed>
, <video>
a <object>
; volitelně použijte explicitní podřízenou třídu .embed-responsive-item
, když chcete přizpůsobit styl pro jiné atributy.
Profesionální tip! frameborder="0"
Do svého s nemusíte zahrnout <iframe>
, protože to za vás přepíšeme.
<!-- 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žijte studnu jako jednoduchý efekt na prvek, abyste získali vložený efekt.
<div class="well">...</div>
Ovládejte výplň a zaoblené rohy pomocí dvou volitelných tříd modifikátorů.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>