Dostupné glyfy

Obsahuje viac ako 250 glyfov vo formáte písma zo sady Glyphicon Halflings. Glyphicons Halflings bežne nie sú dostupné zadarmo, ale ich tvorca ich sprístupnil bezplatne pre Bootstrap. Ako poďakovanie vás žiadame, aby ste vždy, keď je to možné, zahrnuli odkaz späť na Glyphicons .

glyphicon glyphicon-hviezdička
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-mínus
glyphicon glyphicon-cloud
glyphicon glyphicon-obálka
glyphicon glyphicon-ceruzka
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-veľký
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-odstrániť
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-stiahnuť
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-slúchadlá
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-čiarový 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-upraviť
glyphicon glyphicon-odtieň
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-pauza
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-mínus-znamienko
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-otáznik-znamenie
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-darček
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ár
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-kľúč
glyphicon glyphicon-úlohy
glyphicon glyphicon-filter
glyphicon glyphicon-aktovka
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-srdce-prázdny
glyphicon glyphicon-link
glyphicon glyphicon-telefón
glyphicon glyphicon-pripináčik
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-abeceda
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-attributes
glyphicon glyphicon-sort-by-attributes-alt
glyphicon glyphicon-nezaškrtnuté
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-uložiť
glyphicon glyphicon-open
glyphicon glyphicon-uložené
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-poslať
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-kreditná karta
glyphicon glyphicon-transfer
glyphicon glyphicon-príbory
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-slúchadlá
glyphicon glyphicon-phone-alt
glyphicon glyphicon-veža
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-registrationmark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-ihličnan
glyfikon glyfikon-strom-listnatý
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-upozornenie
glyphicon glyphicon-ekvalizér
glyphicon glyphicon-kráľ
glyphicon glyphicon-queen
glyphicon glyphicon-pešiak
glyphicon glyphicon-biskup
glyphicon glyphicon-rytier
glyphicon glyphicon-baby-formula
glyphicon glyphicon-stan
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-jablko
glyphicon glyphicon-erase
glyphicon glyphicon-presýpacie hodiny
glyphicon glyphicon-lampa
glyphicon glyphicon-duplicate
glyphicon glyphicon-prasiatko-bank
glyphicon glyphicon-nožnice
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubeľ
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-ochutnal
glyphicon glyphicon-edukácia
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-olej
glyphicon glyphicon-zrno
glyphicon glyphicon-slnečné okuliare
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-trojuholník-vpravo
glyphicon glyphicon-trojuholník-vľavo
glyphicon glyphicon-trojuholník-dole
glyphicon glyphicon-trojuholní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

Ako použiť

Z dôvodov výkonu vyžadujú všetky ikony základnú triedu a individuálnu triedu ikon. Ak chcete použiť, umiestnite nasledujúci kód takmer kdekoľvek. Nezabudnite ponechať medzeru medzi ikonou a textom, aby sa zabezpečilo správne vyplnenie.

Nemiešajte s inými komponentmi

Triedy ikon nie je možné priamo kombinovať s inými komponentmi. Nemali by sa používať spolu s inými triedami na rovnakom prvku. Namiesto toho pridajte vnorené <span>a aplikujte triedy ikon na <span>.

Len na použitie na prázdnych prvkoch

Triedy ikon by sa mali používať iba na prvkoch, ktoré neobsahujú žiadny textový obsah a nemajú žiadne podradené prvky.

Zmena umiestnenia písma ikony

Bootstrap predpokladá, že súbory fontov ikon budú umiestnené v ../fonts/adresári vzhľadom na kompilované súbory CSS. Presunutie alebo premenovanie týchto súborov písiem znamená aktualizáciu CSS jedným z troch spôsobov:

Zmeňte premenné @icon-font-patha/alebo v zdrojových súboroch Less.@icon-font-name
Využite možnosť relatívnych adries URL , ktorú poskytuje kompilátor Less.
Zmeňte url()cesty v skompilovanom CSS.

Použite akúkoľvek možnosť, ktorá najlepšie vyhovuje vášmu špecifickému vývojovému nastaveniu.

Dostupné ikony

Moderné verzie asistenčných technológií budú oznamovať obsah generovaný CSS, ako aj špecifické znaky Unicode. Aby sme sa vyhli neúmyselnému a mätúcemu výstupu v čítačkách obrazovky (najmä ak sa ikony používajú čisto na ozdobu), skryjeme ich pomocou aria-hidden="true"atribútu.

Ak používate ikonu na vyjadrenie významu (a nie iba ako dekoratívny prvok), uistite sa, že tento význam sa prenáša aj do asistenčných technológií – napríklad zahrňte dodatočný obsah, ktorý je vizuálne skrytý spolu s .sr-onlytriedou.

Ak vytvárate ovládacie prvky bez iného textu (napríklad, <button>ktorý obsahuje iba ikonu), vždy by ste mali poskytnúť alternatívny obsah na identifikáciu účelu ovládacieho prvku, aby to dávalo zmysel používateľom asistenčných technológií. V tomto prípade môžete pridať aria-labelatribút na samotný ovládací prvok.

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

Príklady

Použite ich v tlačidlách, skupinách tlačidiel pre panel s nástrojmi, navigáciu alebo vstupy do formulárov.

<button type="button" class="btn btn-default" aria-label="Left Align">
  <span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>

Ikona použitá v upozornení , ktorá oznamuje, že ide o chybové hlásenie, s dodatočným .sr-onlytextom, ktorý túto nápovedu oznámi používateľom asistenčných technológií.

Zadajte platnú e-mailovú 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>

Prepínateľné kontextové menu na zobrazenie zoznamov odkazov. Vytvorený interaktívnym pomocou rozbaľovacieho doplnku JavaScript .

Príklad

Zabaľte spúšťač rozbaľovacej ponuky a rozbaľovaciu ponuku do .dropdown, alebo iného prvku, ktorý deklaruje position: relative;. Potom pridajte kód HTML ponuky.

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rozbaľovacie ponuky je možné zmeniť tak, aby sa rozbalili nahor (namiesto nadol) pridaním .dropupk nadradenej ponuke.

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Zarovnanie

V predvolenom nastavení je rozbaľovacia ponuka automaticky umiestnená 100 % zhora a pozdĺž ľavej strany nadradenej položky. Pridať .dropdown-menu-rightdo a .dropdown-menuzarovnať rozbaľovaciu ponuku doprava.

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

Hlavičky

Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.

<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
  ...
  <li class="dropdown-header">Dropdown header</li>
  ...
</ul>

Rozdeľovač

Pridajte oddeľovač do samostatných sérií odkazov v rozbaľovacej ponuke.

<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
  ...
  <li role="separator" class="divider"></li>
  ...
</ul>

Zakázané položky ponuky

Ak chcete prepojenie deaktivovať, pridajte .disableddo rozbaľovacej ponuky.<li>

<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
  <li><a href="#">Regular link</a></li>
  <li class="disabled"><a href="#">Disabled link</a></li>
  <li><a href="#">Another link</a></li>
</ul>

Zoskupte sériu tlačidiel do jedného riadku so skupinou tlačidiel. Pridajte si voliteľný prepínač JavaScript a správanie štýlu začiarkavacieho políčka pomocou nášho doplnku pre tlačidlá .

Popisy a kontextové okná v skupinách tlačidiel vyžadujú špeciálne nastavenie

Pri používaní popisov nástrojov alebo kontextových okien na prvkoch v rámci .btn-group, budete musieť špecifikovať možnosť container: 'body', aby ste sa vyhli nežiaducim vedľajším efektom (napríklad, že sa prvok rozšíri a/alebo stratí svoje zaoblené rohy, keď sa spustí popis alebo kontextové okno).

Uistite sa, že sú správne `role`a poskytnite štítok

Aby pomocné technológie – ako napríklad čítačky obrazovky – sprostredkovali, že séria tlačidiel je zoskupená, je potrebné poskytnúť vhodný roleatribút. Pre skupiny tlačidiel by to bolo role="group", zatiaľ čo panely nástrojov by mali mať role="toolbar".

Výnimkou sú skupiny, ktoré obsahujú iba jeden ovládací prvok (napríklad zarovnané skupiny tlačidiel s <button>prvkami) alebo rozbaľovaciu ponuku.

Okrem toho by skupiny a panely s nástrojmi mali dostať explicitné označenie, pretože väčšina asistenčných technológií ich inak neoznámi, napriek prítomnosti správneho roleatribútu. V tu uvedených príkladoch používame aria-label, ale aria-labelledbymožno použiť aj alternatívy, ako napr.

Základný príklad

Zabaľte sériu tlačidiel .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">pre zložitejšie komponenty.

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

Dimenzovanie

Namiesto aplikovania tried veľkosti tlačidiel na každé tlačidlo v skupine stačí pridať .btn-group-*ku každému .btn-group, a to aj pri vnorení viacerých skupín.

<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>

Hniezdenie

Ak chcete rozbaľovacie ponuky zmiešané so sériou tlačidiel, umiestnite .btn-groupdo iného ..btn-group

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Vertikálna variácia

Zabezpečte, aby sa sada tlačidiel zobrazovala vertikálne, nie horizontálne. Rozbaľovacie ponuky rozdeľovacieho tlačidla tu nie sú podporované.

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

Zarovnané skupiny tlačidiel

Skupinu tlačidiel urobte tak, aby sa natiahla na rovnakú veľkosť tak, aby pokrývala celú šírku jej rodiča. Funguje aj s rozbaľovacími zoznamami tlačidiel v rámci skupiny tlačidiel.

Manipulácia s hranicami

Vzhľadom na špecifické HTML a CSS používané na zarovnanie tlačidiel (konkrétne display: table-cell), hranice medzi nimi sú zdvojnásobené. V bežných skupinách tlačidiel margin-left: -1pxsa používa na stohovanie okrajov namiesto ich odstraňovania. marginNefunguje však s display: table-cell. V dôsledku toho, v závislosti od vašich prispôsobení Bootstrapu, možno budete chcieť odstrániť alebo prefarbiť okraje.

IE8 a hranice

Internet Explorer 8 nevykresľuje okraje tlačidiel v skupine zarovnaných tlačidiel, či už sú zapnuté <a>alebo <button>prvky. Aby ste to obišli, zabaľte každé tlačidlo do iného .btn-group.

Viac informácií nájdete na #12476 .

S `<a>`prvkami

Stačí zabaliť sériu .btns do .btn-group.btn-group-justified.

Vľavo Stredný Správny

Vľavo Stredný

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

Odkazy fungujúce ako tlačidlá

Ak sa <a>prvky používajú na to, aby fungovali ako tlačidlá – na spustenie funkcií na stránke, a nie na navigáciu do iného dokumentu alebo sekcie na aktuálnej stránke – mali by mať aj príslušný role="button".

S `<button>`prvkami

Ak chcete použiť zarovnané skupiny tlačidiel s <button>prvkami, musíte každé tlačidlo zabaliť do skupiny tlačidiel . Väčšina prehliadačov správne nepoužíva naše CSS na odôvodnenie <button>prvkov, ale keďže podporujeme rozbaľovacie zoznamy tlačidiel, môžeme to obísť.

<div class="btn-group btn-group-justified" role="group" aria-label="...">
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Použite ľubovoľné tlačidlo na spustenie rozbaľovacej ponuky umiestnením do .btn-groupa poskytnutím správnej značky ponuky.

Závislosť na plugine

Rozbaľovacie zoznamy tlačidiel vyžadujú, aby bol vo vašej verzii Bootstrapu zahrnutý rozbaľovací doplnok .

Rozbaľovacie ponuky s jedným tlačidlom

Premeňte tlačidlo na rozbaľovací prepínač s niekoľkými základnými zmenami značiek.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Rozbaľovacie ponuky tlačidla Rozdeliť

Podobne vytvorte rozbaľovacie zoznamy pre rozdelené tlačidlá s rovnakými zmenami značiek, iba so samostatným tlačidlom.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Dimenzovanie

Rozbaľovacie zoznamy tlačidiel fungujú s tlačidlami všetkých veľkostí.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Dropup variácia

Spustite rozbaľovacie ponuky nad prvkami pridaním .dropupdo nadradeného prvku.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Rozšírte ovládacie prvky formulára pridaním textu alebo tlačidiel pred, za alebo na obe strany akéhokoľvek textového <input>. Použite .input-groups .input-group-addonalebo .input-group-btnna pridanie alebo pripojenie prvkov k jednému .form-control.

Iba textové `<input>`s

Vyhnite sa používaniu <select>prvkov tu, pretože ich nemožno úplne upraviť v prehliadačoch WebKit.

Vyhnite sa používaniu <textarea>prvkov tu, pretože ich rowsatribút nebude v niektorých prípadoch rešpektovaný.

Popisy a kontextové okná vo vstupných skupinách vyžadujú špeciálne nastavenie

Pri používaní popisov nástrojov alebo kontextových okien na prvkoch v rámci .input-group, budete musieť špecifikovať možnosť container: 'body', aby ste sa vyhli nežiaducim vedľajším efektom (ako napríklad, že sa prvok rozšíri a/alebo stratí svoje zaoblené rohy, keď sa spustí popis alebo kontextové okno).

Nemiešajte s inými komponentmi

Nemiešajte skupiny formulárov alebo triedy stĺpcov mriežky priamo so vstupnými skupinami. Namiesto toho vnorte vstupnú skupinu do skupiny formulárov alebo prvku súvisiaceho s mriežkou.

Vždy pridávajte štítky

Čítačky obrazovky budú mať problémy s vašimi formulármi, ak nezahrniete štítok pre každý vstup. Pre tieto vstupné skupiny zaistite, aby sa do pomocných technológií preniesli všetky ďalšie označenia alebo funkcie.

Presná technika, ktorá sa má použiť (viditeľné <label>prvky, <label>prvky skryté pomocou .sr-onlytriedy alebo použitie atribútu aria-label, aria-labelledby, aria-describedby, titlealebo placeholderatribútu) a aké dodatočné informácie bude potrebné poskytnúť, sa budú líšiť v závislosti od presného typu widgetu rozhrania, ktorý implementujete. Príklady v tejto časti poskytujú niekoľko navrhovaných prístupov špecifických pre jednotlivé prípady.

Základný príklad

Umiestnite jeden doplnok alebo tlačidlo na obe strany vstupu. Môžete tiež umiestniť jeden na obe strany vstupu.

Nepodporujeme viacero doplnkov ( .input-group-addonalebo .input-group-btn) na jednej strane.

Nepodporujeme viacero ovládacích prvkov formulára v jednej vstupnej skupine.

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

Dimenzovanie

Pridajte relatívne triedy veľkosti formulára k .input-groupsebe a obsah v ňom automaticky zmení veľkosť – nie je potrebné opakovať triedy veľkosti ovládacích prvkov formulára na každom prvku.

<div class="input-group input-group-lg">
  <span class="input-group-addon" id="sizing-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>

<div class="input-group">
  <span class="input-group-addon" id="sizing-addon2">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon" id="sizing-addon3">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>

Začiarkavacie políčka a rádiové doplnky

Umiestnite akékoľvek začiarkavacie políčko alebo prepínač do doplnku vstupnej skupiny namiesto textu.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio" aria-label="...">
      </span>
      <input type="text" class="form-control" aria-label="...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Doplnky tlačidiel

Tlačidlá v skupinách vstupov sú trochu iné a vyžadujú si jednu úroveň vnorenia navyše. Namiesto .input-group-addon, budete musieť použiť .input-group-btnna zalomenie tlačidiel. Vyžaduje sa to z dôvodu predvolených štýlov prehliadača, ktoré nemožno prepísať.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control" placeholder="Search for...">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Tlačidlá s rozbaľovacími ponukami

<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čidlá

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

Viacero tlačidiel

Zatiaľ čo na každej strane môžete mať iba jeden doplnok, v jednom môžete mať viacero tlačidiel .input-group-btn.

<div class="input-group">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
  <input type="text" class="form-control" aria-label="...">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="...">
  <div class="input-group-btn">
    <!-- Buttons -->
  </div>
</div>

Navigačné zariadenia dostupné v Bootstrape majú zdieľané označenie, počnúc základnou .navtriedou, ako aj zdieľané stavy. Vymeňte triedy modifikátorov na prepínanie medzi jednotlivými štýlmi.

Používanie navigácií pre panely kariet vyžaduje doplnok JavaScript tabs

Pre karty s oblasťami s tabuľkami musíte použiť doplnok JavaScript pre karty . Označenie bude vyžadovať aj ďalšie atribúty a atribúty ARIA – ďalšie podrobnosti nájdete v príklade označeniarole doplnku .

Sprístupnite navigácie používané ako navigáciu

Ak na poskytovanie navigačného panela používate navigačné zariadenia, nezabudnite pridať role="navigation"do najlogickejšieho nadradeného kontajnera <ul>, alebo obklopiť <nav>prvok okolo celej navigácie. Nepridávajte rolu k <ul>sebe samej, pretože by to zabránilo tomu, aby bola oznámená ako skutočný zoznam pomocnými technológiami.

Karty

Všimnite si, že .nav-tabstrieda vyžaduje .navzákladnú triedu.

<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Tabletky

Vezmite rovnaký kód HTML, ale .nav-pillsnamiesto toho použite:

<ul class="nav nav-pills">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages</a></li>
</ul>

Pilulky sú tiež vertikálne stohovateľné. Stačí pridať .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Odôvodnený

Pomocou .nav-justified. Na menších obrazovkách sú navigačné odkazy naukladané.

Zarovnané navigačné odkazy navigačnej lišty momentálne nie sú podporované.

Safari a responzívne odôvodnené navigácie

Od verzie 9.1.2 Safari vykazuje chybu, pri ktorej horizontálna zmena veľkosti vášho prehliadača spôsobuje chyby vykresľovania v zarovnanej navigácii, ktoré sa pri obnovení vymažú. Táto chyba je zobrazená aj v príklade oprávnenej navigácie .

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

Zakázané odkazy

Pre akýkoľvek komponent navigácie (karty alebo pilulky) pridajte .disabledpre sivé odkazy a bez efektov vznášania .

Funkcia odkazu nebola ovplyvnená

Táto trieda zmení iba <a>vzhľad, nie jeho funkčnosť. Na zakázanie odkazov tu použite vlastný JavaScript.

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

Pomocou rozbaľovacích ponúk

Pridajte rozbaľovacie ponuky s trochou kódu HTML navyše a rozbaľovacím doplnkom JavaScript .

Karty s rozbaľovacími ponukami

<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 rozbaľovacími zoznamami

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Navigačné panely sú responzívne meta komponenty, ktoré slúžia ako navigačné hlavičky pre vašu aplikáciu alebo lokalitu. V mobilných zobrazeniach sa začínajú zbaliť (a dajú sa prepínať) a stávajú sa horizontálnymi, keď sa zväčšuje dostupná šírka výrezu.

Zarovnané navigačné odkazy navigačnej lišty momentálne nie sú podporované.

Preplnený obsah

Keďže Bootstrap nevie, koľko miesta potrebuje obsah vo vašom navigačnom paneli, môžete naraziť na problémy so zalamovaním obsahu do druhého riadku. Ak to chcete vyriešiť, môžete:

Znížte množstvo alebo šírku položiek navigačnej lišty.
Skryť určité položky navigačnej lišty pri určitých veľkostiach obrazovky pomocou responzívnych tried nástrojov .
Zmeňte bod, v ktorom sa navigačná lišta prepína medzi zbaleným a horizontálnym režimom. Prispôsobte @grid-float-breakpointpremennú alebo pridajte svoj vlastný mediálny dopyt.

Zmena bodu zlomu zbaleného navigačného panela mobilu

Navigačný panel sa zbalí do vertikálneho mobilného zobrazenia, keď je výrez užší ako @grid-float-breakpoint, a rozbalí sa do svojho horizontálneho zobrazenia, ktoré nie je pre mobilné zariadenia, keď má výrez aspoň @grid-float-breakpointšírku. Upravte túto premennú v zdroji Menej, aby ste ovládali, kedy sa navigačná lišta zbalí/roztiahne. Predvolená hodnota je 768px(najmenšia obrazovka „malá“ alebo „tabletová“).

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Nahraďte značku navigačného panela vlastným obrázkom výmenou textu za <img>. Keďže .navbar-brandmá svoje vlastné čalúnenie a výšku, možno budete musieť prepísať niektoré CSS v závislosti od vášho obrázka.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

Umiestnite obsah formulára dovnútra .navbar-formpre správne vertikálne zarovnanie a zbalené správanie v úzkych výrezoch. Pomocou možností zarovnania rozhodnite, kde sa nachádza v obsahu navigačnej lišty.

Ako heads up .navbar-formzdieľa veľkú časť svojho kódu s .form-inlinecez mixin. Niektoré ovládacie prvky formulárov, napríklad skupiny vstupov, môžu vyžadovať, aby sa v navigačnom paneli správne zobrazovali pevné šírky.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Vždy pridávajte štítky

Čítačky obrazovky budú mať problémy s vašimi formulármi, ak nezahrniete štítok pre každý vstup. Pre tieto vložené formuláre môžete štítky skryť pomocou .sr-onlytriedy. Existujú ďalšie alternatívne spôsoby poskytovania označenia pre asistenčné technológie, ako napríklad atribút aria-label, aria-labelledbyalebo . titleAk nie je prítomný žiadny z týchto atribútov, čítačky obrazovky sa môžu uchýliť k použitiu placeholderatribútu, ak je prítomný, ale upozorňujeme, že použitie placeholderako náhrady za iné metódy označovania sa neodporúča.

Pridajte .navbar-btntriedu k <button>prvkom, ktoré sa nenachádzajú v a <form>, aby ste ich vertikálne vycentrovali na navigačnom paneli.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Reťazce textu zabaľte do prvku s .navbar-text, zvyčajne na <p>značku, aby ste získali správny úvod a farbu.

<p class="navbar-text">Signed in as Mark Otto</p>

Pre ľudí, ktorí používajú štandardné odkazy, ktoré nie sú súčasťou bežného navigačného komponentu navbar, použite .navbar-linktriedu na pridanie správnych farieb pre predvolené a inverzné možnosti navigačnej lišty.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Zarovnajte navigačné odkazy, formuláre, tlačidlá alebo text pomocou pomocných tried .navbar-leftalebo . .navbar-rightObe triedy pridajú CSS float v zadanom smere. Ak chcete napríklad zarovnať navigačné odkazy, umiestnite ich oddelene <ul>s príslušnou použitou triedou.

Tieto triedy sú zmiešanými verziami .pull-lefta .pull-right, ale sú zamerané na mediálne dotazy na jednoduchšiu manipuláciu s komponentmi navigačnej lišty v rôznych veľkostiach zariadení.

Pridajte .navbar-fixed-topa pridajte .containeralebo .container-fluiddo stredu a obsahu navigačnej lišty pad.

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

Vyžaduje sa polstrovanie tela

Pevný navigačný panel prekryje váš ďalší obsah, pokiaľ ho nepridáte paddingdo hornej časti <body>. Vyskúšajte svoje vlastné hodnoty alebo použite náš úryvok nižšie. Tip: Predvolene má navigačný panel výšku 50 pixelov.

body { padding-top: 70px; }

Uistite sa, že ste to zahrnuli za základný CSS Bootstrap.

Pridajte .navbar-fixed-bottoma pridajte .containeralebo .container-fluiddo stredu a obsahu navigačnej lišty pad.

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

Vyžaduje sa polstrovanie tela

Pevný navigačný panel prekryje váš ďalší obsah, pokiaľ ho nepridáte paddingna koniec <body>. Vyskúšajte svoje vlastné hodnoty alebo použite náš úryvok nižšie. Tip: Predvolene má navigačný panel výšku 50 pixelov.

body { padding-bottom: 70px; }

Uistite sa, že ste to zahrnuli za základný CSS Bootstrap.

Vytvorte navigačnú lištu s plnou šírkou, ktorá sa posúva preč so stránkou pridaním .navbar-static-topa zahrnutím .containeralebo .container-fluiddo stredu a podložky na obsah navigačnej lišty.

Na rozdiel od .navbar-fixed-*tried nemusíte meniť žiadnu výplň na body.

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

Upravte vzhľad navigačného panela pridaním .navbar-inverse.

<nav class="navbar navbar-inverse">
  ...
</nav>

Strúhanka

Označte umiestnenie aktuálnej stránky v rámci navigačnej hierarchie.

Oddeľovače sa do CSS pridávajú automaticky cez :beforea content.

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

Stránkovanie

Poskytnite odkazy na stránkovanie pre svoje stránky alebo aplikáciu pomocou komponentu stránkovania na viacerých stránkach alebo jednoduchšej alternatívy pagera .

Predvolené stránkovanie

Jednoduché stránkovanie inšpirované Rdio, skvelé pre aplikácie a výsledky vyhľadávania. Veľký blok je ťažké prehliadnuť, je ľahko škálovateľný a poskytuje veľké klikacie plochy.

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&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čenie zložky stránkovania

Komponent stránkovania by mal byť zabalený do <nav>prvku, ktorý ho identifikuje ako navigačnú sekciu pre čítačky obrazovky a ďalšie pomocné technológie. Okrem toho, keďže je pravdepodobné, že stránka už obsahuje viac ako jednu navigačnú sekciu (ako je primárna navigácia v hlavičke alebo navigácia na bočnom paneli), odporúča sa poskytnúť popis aria-label, <nav>ktorý odráža jej účel. Ak sa napríklad komponent stránkovania používa na navigáciu medzi množinou výsledkov vyhľadávania, vhodné označenie môže byť aria-label="Search results pages".

Zakázané a aktívne stavy

Odkazy sú prispôsobiteľné rôznym okolnostiam. Používa .disabledsa na odkazy, na ktoré sa nedá kliknúť a .activena označenie aktuálnej 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>

Odporúčame vám vymeniť aktívne alebo deaktivované kotvy za <span>, alebo vynechať kotvu v prípade šípok predchádzajúcej/nasledujúcej, aby ste odstránili funkciu klikania a zároveň zachovali zamýšľané štýly.

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

Dimenzovanie

Máte chuť na väčšie alebo menšie stránkovanie? Pridajte .pagination-lgalebo .pagination-smpre ďalšie veľkosti.

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

Pager

Rýchle predchádzajúce a nasledujúce odkazy pre jednoduché implementácie stránkovania s ľahkým značením a štýlmi. Je to skvelé pre jednoduché stránky, ako sú blogy alebo časopisy.

Predvolený príklad

V predvolenom nastavení pager vycentruje odkazy.

<nav aria-label="...">
  <ul class="pager">
    <li><a href="#">Previous</a></li>
    <li><a href="#">Next</a></li>
  </ul>
</nav>

Zarovnané odkazy

Prípadne môžete zarovnať každý odkaz na strany:

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

Voliteľný vypnutý stav

Odkazy na pager tiež používajú všeobecnú .disabledpomocnú triedu zo stránkovania.

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

Príklad

Príklad nadpisu Nový

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

Dostupné variácie

Ak chcete zmeniť vzhľad štítku, pridajte ľubovoľnú z nižšie uvedených tried modifikátorov.

Predvolená informácia o primárnom úspechu Varovanie Nebezpečenstvo

<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 tony štítkov?

Problémy s vykresľovaním môžu nastať, keď máte v úzkom kontajneri desiatky vložených štítkov, z ktorých každý obsahuje svoj vlastný inline-blockprvok (napríklad ikonu). Cesta okolo je nastavenie display: inline-block;. Kontext a príklad nájdete na #13219 .

Jednoducho zvýraznite nové alebo neprečítané položky pridaním <span class="badge">odkazov na, navigačných prvkov Bootstrap a ďalších.

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>

Vlastné zrútenie

Ak neexistujú žiadne nové alebo neprečítané položky, odznaky sa jednoducho zbalia (prostredníctvom :emptyselektora CSS) za predpokladu, že v nich neexistuje žiadny obsah.

Kompatibilita medzi prehliadačmi

Odznaky sa v programe Internet Explorer 8 nezbalia, pretože mu chýba podpora pre :emptyvýber.

Prispôsobí sa aktívnym stavom navigácie

Zabudované štýly sú zahrnuté pre umiestnenie odznakov do aktívnych stavov v tabletových navigáciách.

<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>

Ľahký, flexibilný komponent, ktorý môže voliteľne rozšíriť celú zobrazovanú oblasť a zobraziť tak kľúčový obsah na vašom webe.

Ahoj svet!

Toto je jednoduchá hrdinská jednotka, jednoduchý komponent v štýle jumbotronu, ktorý upúta pozornosť na odporúčaný obsah alebo informácie.

Uč sa viac

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

Ak chcete, aby bol jumbotron v plnej šírke a bez zaoblených rohov, umiestnite ho mimo všetkých .containers a namiesto toho pridajte .containervnútri.

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

Jednoduchý shell na h1vhodné rozloženie a segmentovanie častí obsahu na stránke. Môže využívať h1predvolený smallprvok 's, ako aj väčšinu ostatných komponentov (s ďalšími štýlmi).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Rozšírte mriežkový systém Bootstrapu o komponent miniatúr, aby ste mohli jednoducho zobraziť mriežky obrázkov, videí, textu a ďalších.

Ak hľadáte prezentáciu miniatúr rôznych výšok a/alebo šírok podobnú Pinterestu, budete musieť použiť doplnok tretej strany, ako napríklad Masonry , Isotope alebo Salvattore .

Predvolený príklad

V predvolenom nastavení sú miniatúry Bootstrapu navrhnuté tak, aby zobrazovali prepojené obrázky s minimálnym požadovaným označením.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img src="..." alt="...">
    </a>
  </div>
  ...
</div>

Vlastný obsah

S trochou extra značenia je možné pridať akýkoľvek druh obsahu HTML, ako sú nadpisy, odseky alebo tlačidlá, do miniatúr.

Menovka s miniatúrou

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.

Tlačidlo Tlačidlo

Menovka s miniatúrou

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.

Tlačidlo Tlačidlo

Menovka s miniatúrou

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.

Tlačidlo Tlačidlo

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Poskytujte kontextové správy so spätnou väzbou pre typické akcie používateľa pomocou niekoľkých dostupných a flexibilných výstražných správ.

Príklady

Zabaľte ľubovoľný text a voliteľné tlačidlo na zrušenie do .alertjednej zo štyroch kontextových tried (napr. .alert-success) pre základné výstražné správy.

Žiadna predvolená trieda

Výstrahy nemajú predvolené triedy, iba základné triedy a triedy modifikátorov. Predvolené šedé upozornenie nedáva príliš zmysel, takže musíte zadať typ prostredníctvom kontextovej triedy. Vyberte si z úspechu, informácií, varovania alebo nebezpečenstva.

Výborne! Úspešne ste si prečítali túto dôležitú výstražnú správu.

Hlavy hore! Toto upozornenie si vyžaduje vašu pozornosť, ale nie je mimoriadne dôležité.

POZOR! Radšej sa skontrolujte, nevyzeráte príliš dobre.

Och, rýchlo! Zmeňte pár vecí a skúste odoslať znova.

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

Odmietnuť upozornenia

Stavte na akékoľvek upozornenie pridaním voliteľného .alert-dismissibletlačidla a tlačidla zavrieť.

Vyžaduje doplnok upozornenia JavaScript

Ak chcete, aby boli upozornenia plne funkčné a odmietnuté, musíte použiť doplnok JavaScript pre upozornenia .

POZOR! Radšej sa skontrolujte, nevyzeráte príliš dobre.

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

Zabezpečte správne správanie na všetkých zariadeniach

Nezabudnite použiť <button>prvok s data-dismiss="alert"atribútom data.

Odkazy v upozorneniach

Použite .alert-linktriedu utility na rýchle poskytnutie zodpovedajúcich farebných odkazov v rámci akéhokoľvek upozornenia.

Výborne! Úspešne ste si prečítali túto dôležitú výstražnú správu .

Hlavy hore! Toto upozornenie si vyžaduje vašu pozornosť , ale nie je mimoriadne dôležité.

POZOR! Radšej sa presvedčte, že nevyzeráte príliš dobre .

Och, rýchlo! Zmeňte pár vecí a skúste odoslať znova.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Poskytnite aktuálnu spätnú väzbu o priebehu pracovného postupu alebo akcie pomocou jednoduchých, ale flexibilných ukazovateľov priebehu.

Kompatibilita medzi prehliadačmi

Ukazovatele priebehu používajú prechody a animácie CSS3 na dosiahnutie niektorých svojich efektov. Tieto funkcie nie sú podporované v prehliadači Internet Explorer 9 a novšom ani v starších verziách prehliadača Firefox. Opera 12 nepodporuje animácie.

Kompatibilita s politikou zabezpečenia obsahu (CSP).

Ak má vaša webová lokalita politiku zabezpečenia obsahu (CSP) , ktorá nepovoľuje style-src 'unsafe-inline', nebudete môcť použiť vložené styleatribúty na nastavenie šírky indikátora priebehu, ako je uvedené v príkladoch nižšie. Alternatívne metódy na nastavenie šírok, ktoré sú kompatibilné s prísnymi CSP, zahŕňajú použitie malého vlastného JavaScriptu (ktorý nastavuje element.style.width) alebo použitie vlastných tried CSS.

Základný príklad

Predvolený indikátor priebehu.

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>

So štítkom

Odstráňte triedu <span>with .sr-onlyz indikátora priebehu, aby sa zobrazilo viditeľné percento.

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>

Ak chcete zabezpečiť, aby text označenia zostal čitateľný aj pri nízkych percentách, zvážte pridanie znaku min-widthdo indikátora priebehu.

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é alternatívy

Panely priebehu používajú niektoré z rovnakých tried tlačidiel a upozornení pre konzistentné štýly.

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Pruhované

Používa prechod na vytvorenie pruhovaného efektu. Nie je k dispozícii v IE9 a nižších verziách.

<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Animované

Pridať .activek .progress-bar-stripedanimácii pruhov sprava doľava. Nie je k dispozícii v IE9 a nižších verziách.

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
    <span class="sr-only">45% Complete</span>
  </div>
</div>

Skladaný

Umiestnite viacero tyčí do toho istého .progressa stohujte ich.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Štýly abstraktných objektov na vytváranie rôznych typov komponentov (ako sú komentáre blogu, Tweety atď.), ktoré obsahujú obrázok zarovnaný doľava alebo doprava popri textovom obsahu.

Predvolené médium

Predvolené médium zobrazuje mediálny objekt (obrázky, video, zvuk) naľavo alebo napravo od bloku obsahu.

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Vnorený nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Triedy .pull-lefta .pull-righttiež existujú a boli predtým používané ako súčasť mediálneho komponentu, ale od verzie 3.3.0 sú pre toto použitie zastarané. Sú približne ekvivalentné .media-lefta .media-right, okrem toho, že .media-rightby mali byť umiestnené za .media-bodyv html.

Zarovnanie médií

Obrázky alebo iné médiá môžu byť zarovnané nahor, na stred alebo nadol. Predvolená hodnota je zarovnaná nahor.

Médium zarovnané nahor

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Médium zarovnané na stred

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Médium zarovnané dole

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<div class="media">
  <div class="media-left media-middle">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Middle aligned media</h4>
    ...
  </div>
</div>

Zoznam médií

S trochou dodatočných značiek môžete použiť zoznam médií (užitočné pre vlákna komentárov alebo zoznamy článkov).

Nadpis média

Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Vnorený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Vnorený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

Vnorený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla alebo metus skelerisque ante Sollicitudin Commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

<ul class="media-list">
  <li class="media">
    <div class="media-left">
      <a href="#">
        <img class="media-object" src="..." alt="...">
      </a>
    </div>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Skupiny zoznamov sú flexibilným a výkonným komponentom na zobrazenie nielen jednoduchých zoznamov prvkov, ale aj zložitých zoznamov s vlastným obsahom.

Základný príklad

Najzákladnejšia skupina zoznamov je jednoducho neusporiadaný zoznam s položkami zoznamu a príslušnými triedami. Stavte na to pomocou možností, ktoré nasledujú, alebo podľa potreby pomocou vlastného CSS.

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

<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

Pridajte komponent odznakov do ľubovoľnej položky skupiny zoznamu a bude automaticky umiestnený 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>

Prepojené položky

Prepojte položky skupiny zoznamov pomocou značiek ukotvenia namiesto položiek zoznamu (to tiež znamená nadradenú položku <div>namiesto <ul>). Nie je potreba individuálnych rodičov okolo každého prvku.

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Položky tlačidiel

Položky skupiny zoznamu môžu byť namiesto položiek zoznamu tlačidlami (to tiež znamená nadradený prvok <div>namiesto <ul>). Nie je potreba individuálnych rodičov okolo každého prvku. Tu nepoužívajte štandardné .btntriedy.

<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

Pridajte .disableddo a .list-group-item, ak chcete, aby sa javil ako deaktivovaný.

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

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

Použite kontextové triedy na štýlovanie položiek zoznamu, predvolených alebo prepojených. Zahŕňa aj .activeštát.

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

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

<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

Pridajte takmer akýkoľvek kód HTML, dokonca aj pre skupiny prepojených zoznamov, ako je tá nižšie.

Záhlavie položky skupiny zoznamu

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

Záhlavie položky skupiny zoznamu

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

Záhlavie položky skupiny zoznamu

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

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Aj keď to nie je vždy potrebné, niekedy musíte svoj DOM vložiť do krabice. V takýchto situáciách vyskúšajte komponent panelu.

Základný príklad

V predvolenom nastavení .panelstačí použiť nejaké základné orámovanie a výplň, aby obsahoval nejaký obsah.

Príklad základného panela

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

Panel s nadpisom

Ľahko pridajte kontajner nadpisov na svoj panel pomocou .panel-heading. Môžete tiež zahrnúť ľubovoľné <h1>- <h6>s .panel-titletriedou na pridanie predštylizovaného nadpisu. Veľkosti písma <h1>- <h6>sú však prepísané .panel-heading.

Pre správne zafarbenie odkazov nezabudnite umiestniť odkazy do nadpisov v rámci .panel-title.

Záhlavie panelu bez názvu

Obsah panela

Názov panelu

Obsah panela

<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 s pätou

Zalamujte tlačidlá alebo sekundárny text do .panel-footer. Všimnite si, že päty panelov nededia farby a okraje pri používaní kontextových variácií, pretože nemajú byť v popredí.

Obsah panela

Päta panela

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

Kontextové alternatívy

Podobne ako pri iných komponentoch môžete panel jednoducho zvýšiť zmysluplnosťou pre konkrétny kontext pridaním ktorejkoľvek z tried kontextového stavu.

Názov panelu

Obsah panela

Názov panelu

Obsah panela

Názov panelu

Obsah panela

Názov panelu

Obsah panela

Názov panelu

Obsah panela

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

So stolmi

Pridajte akékoľvek neohraničené .tabledo panelu pre bezproblémový dizajn. Ak je tam .panel-body, pridáme do hornej časti tabuľky ďalší okraj na oddelenie.

Záhlavie panela

Tu je nejaký predvolený obsah panela. Nulla vitae elit libero, pharetra augue. lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Ak neexistuje telo panelu, komponent sa bez prerušenia presunie z hlavičky panelu do tabuľky.

Záhlavie panela

#	Krstné meno	Priezvisko	Používateľské meno
1	Marka	Otto	@mdo
2	Jacob	Thornton	@tuk
3	Larry	vták	@twitter

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

So skupinami zoznamov

Do ľubovoľného panela jednoducho zahrňte skupiny zoznamov s plnou šírkou .

Záhlavie panela

Tu je nejaký predvolený obsah panela. Nulla vitae elit libero, pharetra augue. lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

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

<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Umožnite prehliadačom určiť rozmery videa alebo prezentácie na základe šírky bloku, ktorý ich obsahuje, vytvorením vnútorného pomeru, ktorý sa bude správne škálovať na akomkoľvek zariadení.

Pravidlá sa priamo aplikujú na prvky <iframe>, <embed>, <video>a <object>; voliteľne použite explicitnú triedu potomka, .embed-responsive-itemak chcete prispôsobiť štýl pre iné atribúty.

Pro-Tip! frameborder="0"Do svojho s nemusíte zahrnúť <iframe>, pretože to prepíšeme za vás.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Predvolená studňa

Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.

Pozri, som v studni!

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

Voliteľné triedy

Ovládajte výplň a zaoblené rohy pomocou dvoch voliteľných tried modifikátorov.

Pozri, som vo veľkej studni!

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

Pozri, som v malej studni!

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

Komponenty

Glyfikony

Dostupné glyfy

Ako použiť

Nemiešajte s inými komponentmi

Len na použitie na prázdnych prvkoch

Zmena umiestnenia písma ikony

Dostupné ikony

Príklady

Rozbaľovacie ponuky

Príklad

Zarovnanie

Môže vyžadovať dodatočné umiestnenie

Zastarané .pull-rightzarovnanie

Hlavičky

Rozdeľovač

Zakázané položky ponuky

Skupiny tlačidiel

Popisy a kontextové okná v skupinách tlačidiel vyžadujú špeciálne nastavenie

Uistite sa, že sú správne rolea poskytnite štítok

Základný príklad

Panel nástrojov tlačidiel

Dimenzovanie

Hniezdenie

Vertikálna variácia

Zarovnané skupiny tlačidiel

Manipulácia s hranicami

IE8 a hranice

S <a>prvkami

Odkazy fungujúce ako tlačidlá

S <button>prvkami

Rozbaľovacie zoznamy tlačidiel

Závislosť na plugine

Rozbaľovacie ponuky s jedným tlačidlom

Rozbaľovacie ponuky tlačidla Rozdeliť

Dimenzovanie

Dropup variácia

Vstupné skupiny

Iba textové <input>s

Popisy a kontextové okná vo vstupných skupinách vyžadujú špeciálne nastavenie

Nemiešajte s inými komponentmi

Vždy pridávajte štítky

Základný príklad

Dimenzovanie

Začiarkavacie políčka a rádiové doplnky

Doplnky tlačidiel

Tlačidlá s rozbaľovacími ponukami

Segmentované tlačidlá

Viacero tlačidiel

Nav

Používanie navigácií pre panely kariet vyžaduje doplnok JavaScript tabs

Sprístupnite navigácie používané ako navigáciu

Karty

Tabletky

Odôvodnený

Safari a responzívne odôvodnené navigácie

Zakázané odkazy

Funkcia odkazu nebola ovplyvnená

Pomocou rozbaľovacích ponúk

Karty s rozbaľovacími ponukami

Pilulky s rozbaľovacími zoznamami

Navbar

Predvolená navigačná lišta

Preplnený obsah

Vyžaduje doplnok JavaScript

Zmena bodu zlomu zbaleného navigačného panela mobilu

Sprístupnite navigačné panely

Obrázok značky

Formuláre

Upozornenia na mobilné zariadenia

Vždy pridávajte štítky

Tlačidlá

Kontextovo špecifické použitie

Text

Odkazy bez navigácie

Zarovnanie komponentov

Zarovnanie viacerých komponentov doprava

Upevnené navrchu

Vyžaduje sa polstrovanie tela

Upevnené na dne

Zastarané `.pull-right`zarovnanie

Uistite sa, že sú správne `role`a poskytnite štítok

S `<a>`prvkami

S `<button>`prvkami

Iba textové `<input>`s