Dostupné glyfy

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

glyphicon glyphicon-hvězdička
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-obálka
glyphicon glyphicon-tužka
glyphicon glyphicon-glass
glyphicon glyphicon-hudba
glyphicon glyphicon-search
glyphicon glyphicon-srdce
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-velký
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-odstranit
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signál
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-ke stažení
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-sluchátka
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-čárový kód
glyphicon glyphicon-tag
glyphicon glyphicon-tagy
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kurzíva
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-upravit
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-pohyb
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-size-full
glyphicon glyphicon-size-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-dárek
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-komentář
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-size-vertical
glyphicon glyphicon-size-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certifikát
glyphicon glyphicon-thumb-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-klíč
glyphicon glyphicon-úkoly
glyphicon glyphicon-filtr
glyphicon glyphicon-aktovka
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-srdce-prázdné
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-připínáček
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atributes
glyphicon glyphicon-sort-by-atributes-alt
glyphicon glyphicon-nezaškrtnuto
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-blesk
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-uloženo
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-poslat
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-příbory
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-sluchátka
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-titulky
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-listnatý
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-upozornění
glyphicon glyphicon-ekvalizér
glyphicon glyphicon-král
glyphicon glyphicon-queen
glyphicon glyphicon-pěšák
glyphicon glyphicon-biskup
glyphicon glyphicon-rytíř
glyphicon glyphicon-baby-formule
glyphicon glyphicon-stan
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-jablko
glyphicon glyphicon-erase
glyphicon glyphicon-přesýpací hodiny
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-prasátko-banka
glyphicon glyphicon-nůžky
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubl
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-ochutnal
glyphicon glyphicon-vzdělávání
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-olej
glyphicon glyphicon-zrno
glyphicon glyphicon-sluneční brýle
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trojúhelník-vpravo
glyphicon glyphicon-trojúhelník-levý
glyphicon glyphicon-trojúhelník-dole
glyphicon glyphicon-trojúhelník-top
glyphicon glyphicon-console
glyphicon glyphicon-horní index
glyphicon glyphicon-dolní index
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up

Jak používat

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

Nemíchejte s jinými komponenty

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

Pouze pro použití na prázdné prvky

Třídy ikon by se měly používat pouze u prvků, které neobsahují žádný textový obsah a nemají žádné podřízené prvky.

Změna umístění písma ikony

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

Změňte proměnné @icon-font-patha/nebo @icon-font-nameve zdrojových souborech Less.
Využijte možnost relativních adres URL, kterou poskytuje kompilátor Less.
Změňte url()cesty v kompilovaném CSS.

Použijte jakoukoli možnost, která nejlépe vyhovuje vašemu konkrétnímu nastavení vývoje.

Přístupné ikony

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-onlytří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-labelatribut na samotný ovládací prvek.

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

Příklady

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-onlytextem, který tuto nápovědu sděluje uživatelům asistenčních technologií.

Zadejte platnou e-mailovou adresu

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

Příklad

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

Zarovnání

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-rightdo a .dropdown-menuzarovnat rozbalovací nabídku doprava.

<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
  ...
</ul>

Záhlaví

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>

Dělič

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>

Zakázané položky nabídky

Přidejte .disableddo <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 .

Popisky a vyskakovací okna ve skupinách tlačítek vyžadují speciální nastavení

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

Ujistěte se, že jsou správné `role`a poskytněte štítek

Aby asistenční technologie – jako jsou čtečky obrazovky – sdělily, že je řada tlačítek seskupena, je třeba poskytnout vhodný roleatribut. 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 roleatributu. Ve zde uvedených příkladech používáme , ale lze použít i aria-labelalternativy jako např .aria-labelledby

Základní příklad

Zabalte řadu tlačítek .btns .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>

Dimenzování

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>

Hnízdění

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>

Vertikální variace

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>

Zarovnané skupiny tlačítek

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.

Manipulace s hranicemi

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: -1pxse používá ke skládání okrajů namísto jejich odstraňování. marginNefunguje 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.

IE8 a hranice

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 .

S `<a>`prvky

Stačí zabalit řadu .btns do .btn-group.btn-group-justified.

Vlevo, odjet Střední Že jo

Vlevo, odjet Střední

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  ...
</div>

Odkazy fungující jako tlačítka

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

S `<button>`prvky

Chcete-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-groupa poskytnete správnou značku nabídky.

Závislost na pluginech

Rozbalovací seznamy tlačítek vyžadují, aby byl ve vaší verzi Bootstrapu zahrnut rozbalovací plugin .

Rozbalovací seznamy s jedním tlačítkem

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>

Rozbalovací seznamy tlačítka Rozdělit

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>

Dimenzování

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>

Dropup variace

Spusťte rozbalovací nabídky nad prvky přidáním .dropupk 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-groups .input-group-addonnebo .input-group-btnk předřazení nebo připojení prvků k jedné .form-control.

Pouze textové `<input>`s

Nepouží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 rowsatribut nebude v některých případech respektován.

Popisky a vyskakovací okna ve vstupních skupinách vyžadují speciální nastavení

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 s jinými komponenty

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.

Vždy přidávejte štítky

Č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-onlytřídy nebo použití atributu aria-label, aria-labelledby, aria-describedby, titlenebo placeholderatributu) 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.

Základní příklad

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

Dimenzování

Přidejte relativní třídy velikosti formuláře k .input-groupsobě 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>

Zaškrtávací políčka a rádiové doplňky

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

Doplňky tlačítek

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

Tlačítka s rozevíracími seznamy

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

Segmentovaná tlačítka

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

Více tlačítek

Zatímco na každé straně můžete mít pouze jeden doplněk, v jednom můžete mít více tlačítek .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í .navtřídou, a také sdílené stavy. Zaměňte třídy modifikátorů pro přepínání mezi jednotlivými styly.

Používání navigací pro panely záložek vyžaduje plugin záložek JavaScript

Pro karty s oblastmi s tabelovacími oblastmi musíte použít zásuvný modul JavaScript pro karty . Označení bude také vyžadovat další roleatributy a atributy ARIA – další podrobnosti naleznete v příkladu označení pluginu .

Zpřístupněte navigace používané jako navigace

Pokud k poskytování navigačního panelu používáte navigace, nezapomeňte přidat a role="navigation"do nejlogičtějšího nadřazeného kontejneru <ul>, nebo obklopit <nav>prvek kolem celé navigace. Nepřidávejte roli k <ul>samotné roli, protože by to zabránilo tomu, aby byla asistenčními technologiemi oznámena jako skutečný seznam.

Karty

Všimněte si, že .nav-tabstřída vyžaduje .navzá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>

Pilulky

Vezměte stejný HTML, ale použijte .nav-pillsmí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>

Odůvodněné

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.

Safari a responzivní odůvodněné navigace

Od verze 9.1.2 Safari vykazuje chybu, při které horizontální změna velikosti vašeho prohlížeče způsobuje chyby vykreslování v zarovnané navigaci, které se po obnovení vymažou. Tato chyba je také zobrazena v příkladu zarovnané navigace .

<ul class="nav nav-tabs nav-justified">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Zakázané odkazy

.disabledPro jakoukoli komponentu navigace (karty nebo pilulky) přidejte šedé odkazy a žádné efekty přechodu .

Funkce odkazu nebyla ovlivněna

Tato třída změní pouze <a>vzhled, nikoli jeho funkčnost. K deaktivaci odkazů zde použijte vlastní JavaScript.

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Pomocí rozbalovacích nabídek

Přidejte rozevírací nabídky s trochou kódu HTML navíc a rozbalovacím pluginem JavaScript .

Karty s rozevíracími seznamy

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

Pilulky s rozevíracími seznamy

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

Přetékající obsah

Protože Bootstrap neví, kolik místa obsah ve vaší navigační liště potřebuje, můžete narazit na problémy se zalamováním obsahu do druhého řádku. Chcete-li to vyřešit, můžete:

Zmenšete množství nebo šířku položek navigační lišty.
Skryjte určité položky navigační lišty při určitých velikostech obrazovky pomocí responzivních tříd obslužných programů .
Změňte bod, ve kterém se navigační lišta přepíná mezi sbaleným a vodorovným režimem. Přizpůsobte @grid-float-breakpointproměnnou nebo přidejte svůj vlastní mediální dotaz.

<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-brandmá 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-formpro 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-formsdílí většinu svého kódu s .form-inlinepř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>

Vždy přidávejte štítky

Čtečky obrazovky budou mít potíže s vašimi formuláři, pokud pro každý vstup neuvedete štítek. U těchto vložených formulářů můžete štítky skrýt pomocí .sr-onlytřídy. Existují další alternativní způsoby poskytování označení pro asistenční technologie, jako je atribut aria-label, aria-labelledbynebo . titlePokud není přítomen žádný z těchto atributů, mohou se čtečky obrazovky uchýlit k použití placeholderatributu, pokud je přítomen, ale uvědomte si, že použití placeholderjako náhrady za jiné metody označování se nedoporučuje.

Přidejte .navbar-btntří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-linktří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-leftnebo . .navbar-rightObě 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-lefta .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-topa zahrňte .containernebo .container-fluiddo středu a obsahu navigační lišty pad.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    ...
  </div>
</nav>

Vyžaduje se polstrování těla

Pevný navigační panel překryje váš další obsah, pokud ho nepřidáte paddingna začátek <body>. Vyzkoušejte své vlastní hodnoty nebo použijte náš úryvek níže. Tip: Ve výchozím nastavení je navigační lišta vysoká 50 pixelů.

body { padding-top: 70px; }

Ujistěte se, že to zahrnete za základní CSS Bootstrap.

Přidejte .navbar-fixed-bottoma zahrňte .containernebo .container-fluiddo středu a obsahu navigační lišty pad.

<nav class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    ...
  </div>
</nav>

Vyžaduje se polstrování těla

Pevný navigační panel překryje váš další obsah, pokud ho nepřidáte paddingna konec <body>. Vyzkoušejte své vlastní hodnoty nebo použijte náš úryvek níže. Tip: Ve výchozím nastavení je navigační lišta vysoká 50 pixelů.

body { padding-bottom: 70px; }

Ujistěte se, že to zahrnete za základní CSS Bootstrap.

Vytvořte navigační panel s plnou šířkou, který se posune se stránkou, přidáním .navbar-static-topa zahrnutím .containernebo .container-fluiddo 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>

Strouhanka

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 :beforea content.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Stránkování

Poskytněte stránkovací odkazy pro váš web nebo aplikaci pomocí vícestránkové stránky stránkování nebo jednodušší alternativy pageru .

Výchozí stránkování

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">&laquo;</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">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

Označení složky stránkování

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

Deaktivované a aktivní stavy

Odkazy lze přizpůsobit různým okolnostem. Použijte .disabledpro odkazy, na které nelze kliknout, a .activepro označení aktuální stránky.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</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">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimenzování

Máte chuť na větší nebo menší stránkování? Přidejte .pagination-lgnebo .pagination-smpro 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>

Pager

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.

Výchozí příklad

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>

Zarovnané odkazy

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Volitelný deaktivovaný stav

Odkazy na pager také používají .disabledtří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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Příklad

Příklad nadpisu Nový

<h3>Example heading <span class="label label-default">New</span></h3>

Dostupné varianty

Chcete-li změnit vzhled štítku, přidejte kteroukoli z níže uvedených tříd modifikátorů.

Výchozí primární informace o úspěchu Varování Nebezpečí

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

Máte tuny štítků?

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

Doručená pošta42

<a href="#">Inbox <span class="badge">42</span></a>

<button class="btn btn-primary" type="button">
  Messages <span class="badge">4</span>
</button>

Sebehroutí

Když nejsou žádné nové nebo nepřečtené položky, odznaky se jednoduše sbalí (prostřednictvím :emptyselektoru CSS), pokud v nich není žádný obsah.

Kompatibilita mezi prohlížeči

Odznaky se v aplikaci Internet Explorer 8 nesbalí, protože postrádá podporu pro :emptyvýběr.

Přizpůsobí se aktivním stavům navigace

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.

Ahoj světe!

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.

Zjistěte více

<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 .containersa a místo toho přidejte .containeruvnitř.

<div class="jumbotron">
  <div class="container">
    ...
  </div>
</div>

Jednoduchý shell pro h1náležité rozmístění a segmentaci částí obsahu na stránce. Může využívat h1výchozí smallprvek '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 .

Výchozí příklad

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>

Vlastní obsah

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.

Miniatura štítku

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoflík Knoflík

Miniatura štítku

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoflík Knoflík

Miniatura štítku

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Knoflík Knoflík

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

Příklady

Zabalte libovolný text a volitelné tlačítko pro zrušení do .alertjedné ze čtyř kontextových tříd (např. .alert-success) pro základní výstražné zprávy.

Žádná výchozí třída

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

Výborně! Úspěšně jste si přečetli tuto důležitou výstražnou zprávu.

Hlavy vzhůru! Toto upozornění vyžaduje vaši pozornost, ale není příliš důležité.

Varování! Raději se přesvědčte, nevypadáte moc dobře.

Kruci! Změňte pár věcí a zkuste odeslání znovu.

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

Zamítatelné výstrahy

Stavte na jakékoli upozornění přidáním volitelného .alert-dismissiblea zavíracího tlačítka.

Vyžaduje plugin upozornění JavaScript

Aby byla upozornění plně funkční a zavřená, musíte použít plugin JavaScript pro upozornění .

Varování! Raději se přesvědčte, nevypadáte moc dobře.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Zajistěte správné chování na všech zařízeních

Nezapomeňte použít <button>prvek s data-dismiss="alert"atributem data.

Odkazy v upozorněních

Použijte .alert-linktřídu utility k rychlému poskytnutí odpovídajících barevných odkazů v rámci jakéhokoli upozornění.

Výborně! Úspěšně jste si přečetli tuto důležitou výstražnou zprávu .

Hlavy vzhůru! Toto upozornění vyžaduje vaši pozornost , ale není příliš důležité.

Varování! Raději se přesvědčte, nevypadáte příliš dobře .

Kruci! Změňte pár věcí a zkuste odeslání znovu.

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

Kompatibilita mezi prohlížeči

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.

Kompatibilita se zásadami zabezpečení obsahu (CSP).

Pokud má váš web Zásady zabezpečení obsahu (CSP) , které nepovolují style-src 'unsafe-inline', nebudete moci použít vložené styleatributy 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.

Základní příklad

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>

Se štítkem

Odeberte třídu <span>with .sr-onlyz indikátoru průběhu, abyste zobrazili viditelné procento.

60 %

<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-widthdo ukazatele průběhu.

0 %

2 %

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

Kontextové alternativy

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>

Pruhovaný

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>

Animovaný

Přidat .activek .progress-bar-stripedanimaci 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>

Naskládané

Umístěte více tyčí do stejné .progressa 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

Výchozí médium zobrazuje objekt média (obrázky, video, zvuk) vlevo nebo vpravo od bloku obsahu.

Mediální nadpis

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.

Mediální nadpis

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.

Vnořený nadpis média

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.

Mediální nadpis

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.

Mediální nadpis

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.

<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-lefta .pull-righttaké 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-lefta .media-right, kromě toho, že .media-rightby měly být umístěny za .media-bodyv html.

Zarovnání médií

Obrázky nebo jiná média mohou být zarovnána nahoře, uprostřed nebo dole. Výchozí nastavení je zarovnáno shora.

Média zarovnaná nahoru

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.

Média zarovnaná na střed

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.

Médium zarovnané dole

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>

Seznam médií

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

Mediální nadpis

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.

Vnořený nadpis média
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.

Vnořený nadpis média
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.

Vnořený nadpis média
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.

Základní příklad

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.

Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erosu

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

Odznaky

Přidejte komponentu odznaků do libovolné položky skupiny seznamu a bude automaticky umístěna vpravo.

14Cras justo odio
2Dapibus ac facilisis v
1Morbi leo risus

<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Propojené položky

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.

Cras justo odio Dapibus ac facilisis v Morbi leo risus Porta ac consectetur ac Vestibulum na erosu

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

Tlačítkové položky

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í .btntří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>

Zakázané položky

Přidejte .disableddo a , chcete-li .list-group-itemjej zašednout, aby se jevil jako zakázán.

Cras justo odio Dapibus ac facilisis v Morbi leo risus Porta ac consectetur ac Vestibulum na erosu

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

Kontextové třídy

Použijte kontextové třídy ke stylování položek seznamu, výchozí nebo propojené. Zahrnuje také .activestát.

Dapibus ac facilisis v
Cras sit amet nibh libero
Porta ac consectetur ac
Vestibulum na erosu

Dapibus ac facilisis v Cras sit amet nibh libero Porta ac consectetur ac Vestibulum na erosu

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

Vlastní obsah

Přidejte téměř jakýkoli HTML, dokonce i pro skupiny propojených seznamů, jako je ta níže.

Záhlaví položky skupiny seznamu

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Záhlaví položky skupiny seznamu

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Záhlaví položky skupiny seznamu

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.

Základní příklad

Ve výchozím nastavení .panelstačí použít základní ohraničení a výplň, aby obsahoval nějaký obsah.

Příklad základního panelu

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel s nadpisem

Snadno přidejte kontejner záhlaví na svůj panel pomocí .panel-heading. Můžete také zahrnout libovolné <h1>- <h6>s .panel-titletří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.

Záhlaví panelu bez názvu

Obsah panelu

Název panelu

Obsah panelu

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

Panel se zápatím

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

Obsah panelu

Zápatí panelu

<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Kontextové alternativy

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.

Název panelu

Obsah panelu

Název panelu

Obsah panelu

Název panelu

Obsah panelu

Název panelu

Obsah panelu

Název panelu

Obsah panelu

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

Se stoly

Přidejte .tabledo 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í.

Záhlaví panelu

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.

Záhlaví panelu

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

Se skupinami seznamů

Snadno zahrňte skupiny seznamů v plné šířce do libovolného panelu.

Záhlaví panelu

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.

Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erosu

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

Výchozí studna

Použijte studnu jako jednoduchý efekt na prvek, abyste získali vložený efekt.

Podívej, jsem ve studni!

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

Volitelné třídy

Ovládejte výplň a zaoblené rohy pomocí dvou volitelných tříd modifikátorů.

Podívej, jsem ve velké studni!

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

Podívej, jsem v malé studni!

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

Komponenty

Glyfikony

Dostupné glyfy

Jak používat

Nemíchejte s jinými komponenty

Pouze pro použití na prázdné prvky

Změna umístění písma ikony

Přístupné ikony

Příklady

Rozbalovací seznamy

Příklad

Zarovnání

Může vyžadovat dodatečné umístění

Zastaralé .pull-rightzarovnání

Záhlaví

Dělič

Zakázané položky nabídky

Skupiny tlačítek

Popisky a vyskakovací okna ve skupinách tlačítek vyžadují speciální nastavení

Ujistěte se, že jsou správné rolea poskytněte štítek

Základní příklad

Panel nástrojů tlačítka

Dimenzování

Hnízdění

Vertikální variace

Zarovnané skupiny tlačítek

Manipulace s hranicemi

IE8 a hranice

S <a>prvky

Odkazy fungující jako tlačítka

S <button>prvky

Rozbalovací seznamy tlačítek

Závislost na pluginech

Rozbalovací seznamy s jedním tlačítkem

Rozbalovací seznamy tlačítka Rozdělit

Dimenzování

Dropup variace

Vstupní skupiny

Pouze textové <input>s

Popisky a vyskakovací okna ve vstupních skupinách vyžadují speciální nastavení

Nemíchejte s jinými komponenty

Vždy přidávejte štítky

Základní příklad

Dimenzování

Zaškrtávací políčka a rádiové doplňky

Doplňky tlačítek

Tlačítka s rozevíracími seznamy

Segmentovaná tlačítka

Více tlačítek

Nav

Používání navigací pro panely záložek vyžaduje plugin záložek JavaScript

Zpřístupněte navigace používané jako navigace

Karty

Pilulky

Odůvodněné

Safari a responzivní odůvodněné navigace

Zakázané odkazy

Funkce odkazu nebyla ovlivněna

Pomocí rozbalovacích nabídek

Karty s rozevíracími seznamy

Pilulky s rozevíracími seznamy

Navbar

Výchozí navigační lišta

Přetékající obsah

Vyžaduje plugin JavaScript

Změna zarážky sbaleného mobilního navigačního panelu

Zpřístupněte navigační panely

Obrázek značky

formuláře

Upozornění na mobilní zařízení

Vždy přidávejte štítky

Tlačítka

Kontextově specifické použití

Text

Odkazy bez navigace

Zarovnání součástí

Zarovnání více komponent doprava

Pevně ​​nahoře

Vyžaduje se polstrování těla

Pevně ​​dole

Zastaralé `.pull-right`zarovnání

Ujistěte se, že jsou správné `role`a poskytněte štítek

S `<a>`prvky

S `<button>`prvky

Pouze textové `<input>`s

Pevně nahoře

Pevně dole