Glyfikony

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

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

Rozbaľovacie ponuky

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

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

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

Rozbaľovacie ponuky je možné zmeniť tak, aby sa rozbalili nahor (namiesto nadol) pridaním .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>

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.

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

Rozbaľovacie zoznamy sa automaticky umiestňujú prostredníctvom CSS v rámci bežného toku dokumentu. To znamená, že rozbaľovacie ponuky môžu byť orezané rodičmi s určitými overflowvlastnosťami alebo sa môžu zobraziť mimo rámca zobrazenia. Vyriešte tieto problémy sami, keď sa objavia.

Zastarané .pull-rightzarovnanie

Od verzie 3.1.0 sme ukončili podporu .pull-rightrozbaľovacích ponúk. Ak chcete zarovnať ponuku doprava, použite .dropdown-menu-right. Komponenty navigácie zarovnané doprava v navigačnom paneli používajú zmiešanú verziu tejto triedy na automatické zarovnanie ponuky. Ak ho chcete prepísať, použite .dropdown-menu-left.

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

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

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

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

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

Ak chcete prepojenie deaktivovať, pridajte .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>

Skupiny tlačidiel

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

Panel nástrojov tlačidiel

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.

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

Rozbaľovacie zoznamy tlačidiel

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>

Vstupné skupiny

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.

@

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

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>

Nav

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.

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>

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>

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>

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>

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>

Navbar

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:

  1. Znížte množstvo alebo šírku položiek navigačnej lišty.
  2. Skryť určité položky navigačnej lišty pri určitých veľkostiach obrazovky pomocou responzívnych tried nástrojov .
  3. 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.

Vyžaduje doplnok JavaScript

Ak je JavaScript zakázaný a zobrazená oblasť je dostatočne úzka na to, aby sa navigačná lišta zbalila, nebude možné rozbaliť navigačnú lištu a zobraziť obsah v .navbar-collapse.

Responzívny navigačný panel vyžaduje, aby bol vo vašej verzii Bootstrapu zahrnutý doplnok na zbalenie .

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

Sprístupnite navigačné panely

Uistite sa, že používate <nav>prvok alebo, ak používate všeobecnejší prvok, ako napríklad <div>, pridajte a role="navigation"na každý navigačný panel, aby ste ho explicitne identifikovali ako orientačný región pre používateľov asistenčných technológií.

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

Upozornenia na mobilné zariadenia

Existuje niekoľko upozornení týkajúcich sa používania ovládacích prvkov formulára v rámci pevných prvkov na mobilných zariadeniach. Podrobnosti nájdete v našich dokumentoch podpory prehliadača .

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>

Kontextovo špecifické použitie

Rovnako ako štandardné triedy tlačidiel , .navbar-btnmôžu byť použité na <a>a <input>prvkoch. Ani .navbar-btnštandardné triedy tlačidiel by sa však nemali používať na <a>prvky v rámci .navbar-nav.

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

Zarovnanie viacerých komponentov doprava

Navigačné panely majú v súčasnosti obmedzenie s viacerými .navbar-righttriedami. Na správne umiestnenie obsahu používame záporný okraj na poslednom .navbar-rightprvku. Ak túto triedu používa viacero prvkov, tieto okraje nefungujú podľa plánu.

Vrátime sa k tomu, keď budeme môcť prepísať tento komponent vo verzii 4.

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>

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>

Štítky

Príklad

Príklad nadpisu Nový

Príklad nadpisu Nový

Príklad nadpisu Nový

Príklad nadpisu Nový

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

Odznaky

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

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

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

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>

Jumbotron

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

Hlavička stránky

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>

Miniatúry

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.

100 % x 200

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

100 % x 200

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

100 % x 200

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>

Upozornenia

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.

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

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

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

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

Ukazovatele pokroku

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.

Kompletné na 60 %.
<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.

40 % dokončených (úspech)
Kompletné na 20 %.
Dokončené na 60 % (upozornenie)
Dokončené na 80 % (nebezpečenstvo)
<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.

40 % dokončených (úspech)
Kompletné na 20 %.
Dokončené na 60 % (upozornenie)
Dokončené na 80 % (nebezpečenstvo)
<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ť .activedo .progress-bar-stripeda animovať pruhy sprava doľava. Nie je k dispozícii v IE9 a nižších verziách.

Kompletné na 45 %.
<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.

35 % dokončených (úspech)
20 % dokončených (upozornenie)
10 % dokončených (nebezpečenstvo)
<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álny objekt

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

Zoznam skupiny

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.

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

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

<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

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í je všetko, čo .panelrobíte, aplikujte nejaké základné orámovanie a výplň, aby obsahovali 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 a pridať predštylizovaný nadpis. Veľkosti písma <h1>- <h6>sú však prepísané .panel-heading.

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

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>

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

Responzívne vloženie

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>

Wells

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>