Glyfikony

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

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

Rozbalovací seznamy

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

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.

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

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 overflowvlastnostmi nebo se mohou objevit mimo hranice výřezu. Řešte tyto problémy sami, jakmile se objeví.

Zastaralé .pull-rightzarovnání

Od verze 3.1.0 jsme přestali podporovat .pull-rightrozeví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 .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>

Skupiny tlačítek

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

Panel nástrojů tlačítka

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.

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

Rozbalovací seznamy tlačítek

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>

Vstupní skupiny

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

@

@example.com

$ 0,00

https://example.com/users/
<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, 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>

Nav

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, které lze zobrazit pomocí tabel, musíte použít plugin JavaScript tabs . 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.

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>

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>

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>

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

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>

Navbar

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:

  1. Zmenšete množství nebo šířku položek navigační lišty.
  2. 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ů .
  3. 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.

Vyžaduje plugin JavaScript

Pokud je JavaScript zakázán a zobrazovaná oblast je dostatečně úzká, aby se navigační panel sbalil, nebude možné rozbalit navigační panel a zobrazit obsah v .navbar-collapse.

Responzivní navigační panel vyžaduje, aby byl ve vaší verzi Bootstrapu zahrnut plugin pro sbalení .

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

Navigační lišta se sbalí do svého vertikálního mobilního zobrazení, když je výřez užší než @grid-float-breakpoint, a rozbalí se do svého horizontálního nemobilního zobrazení, když má výřez alespoň @grid-float-breakpointšířku. Upravte tuto proměnnou ve zdroji Méně, abyste řídili, kdy se navigační panel sbalí/rozbalí. Výchozí hodnota je 768px(nejmenší obrazovka „malý“ nebo „tablet“).

Zpřístupněte navigační panely

Ujistěte se, že používáte <nav>prvek nebo, pokud používáte obecnější prvek, jako je <div>, přidejte a role="navigation"na každý navigační panel, abyste jej explicitně označili jako orientační oblast pro uživatele asistenčních technologií.

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

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

Existují určitá upozornění týkající se používání ovládacích prvků formuláře v rámci pevných prvků na mobilních zařízeních. Podrobnosti najdete v našich dokumentech podpory prohlížeče .

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>

Kontextově specifické použití

Stejně jako standardní třídy tlačítek lze .navbar-btnpoužít na prvcích <a>a . <input>Nicméně .navbar-btnani standardní třídy tlačítek by se neměly používat na <a>prvky v .navbar-nav.

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

Zarovnání více komponent doprava

Navbary mají v současnosti omezení s více .navbar-righttřídami. Abychom správně rozložili obsah, použijeme na posledním .navbar-rightprvku záporný okraj. Pokud tuto třídu používá více prvků, tyto okraje nefungují tak, jak bylo zamýšleno.

Znovu se k tomu vrátíme, až budeme moci přepsat tuto komponentu ve v4.

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>

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>

Štítky

Příklad

Příklad nadpisu Nový

Příklad nadpisu Nový

Příklad nadpisu Nový

Příklad nadpisu Nový

Příklad nadpisu Nový
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 .

Odznaky

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>

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>

Jumbotron

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>

Záhlaví stránky

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>

Miniatury

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.

100 % x 200

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

100 % x 200

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

100 % x 200

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>

Upozornění

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

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

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

Použijte .alert-linktří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>

Progress bary

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.

60% kompletní
<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.

40 % dokončeno (úspěch)
20% kompletní
60 % hotovo (varování)
80 % hotovo (nebezpečí)
<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.

40 % dokončeno (úspěch)
20% kompletní
60 % hotovo (varování)
80 % hotovo (nebezpečí)
<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.

45 % kompletní
<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.

35 % dokončeno (úspěch)
20 % hotovo (varování)
10 % dokončeno (nebezpečí)
<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>

Mediální objekt

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>

Seznam skupiny

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.

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

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

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

Panely

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>

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

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

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>

Responzivní vložení

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>

Wells

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>