Více než tucet opakovaně použitelných komponent vytvořených tak, aby poskytovaly ikonografii, rozevírací seznamy, skupiny vstupů, navigaci, upozornění a mnoho dalšího.
Glyfikony
Dostupné glyfy
Obsahuje více než 250 glyfů ve formátu písma ze sady Glyphicon Halflings. Glyphicons Halflings normálně nejsou k dispozici zdarma, ale jejich tvůrce je zdarma zpřístupnil pro Bootstrap. Jako poděkování vás pouze žádáme, abyste zahrnuli odkaz zpět na Glyphicons , kdykoli je to možné.
glyphicon glyphicon-hvězdička
glyphicon glyphicon-plus
glyphicon glyphicon-euro
glyphicon glyphicon-eur
glyphicon glyphicon-minus
glyphicon glyphicon-cloud
glyphicon glyphicon-obálka
glyphicon glyphicon-tužka
glyphicon glyphicon-glass
glyphicon glyphicon-hudba
glyphicon glyphicon-search
glyphicon glyphicon-srdce
glyphicon glyphicon-star
glyphicon glyphicon-star-empty
glyphicon glyphicon-user
glyphicon glyphicon-film
glyphicon glyphicon-th-velký
glyphicon glyphicon-th
glyphicon glyphicon-th-list
glyphicon glyphicon-ok
glyphicon glyphicon-odstranit
glyphicon glyphicon-zoom-in
glyphicon glyphicon-zoom-out
glyphicon glyphicon-off
glyphicon glyphicon-signál
glyphicon glyphicon-cog
glyphicon glyphicon-trash
glyphicon glyphicon-home
glyphicon glyphicon-file
glyphicon glyphicon-time
glyphicon glyphicon-road
glyphicon glyphicon-download-alt
glyphicon glyphicon-ke stažení
glyphicon glyphicon-upload
glyphicon glyphicon-inbox
glyphicon glyphicon-play-circle
glyphicon glyphicon-repeat
glyphicon glyphicon-refresh
glyphicon glyphicon-list-alt
glyphicon glyphicon-lock
glyphicon glyphicon-flag
glyphicon glyphicon-sluchátka
glyphicon glyphicon-volume-off
glyphicon glyphicon-volume-down
glyphicon glyphicon-volume-up
glyphicon glyphicon-qrcode
glyphicon glyphicon-čárový kód
glyphicon glyphicon-tag
glyphicon glyphicon-tagy
glyphicon glyphicon-book
glyphicon glyphicon-bookmark
glyphicon glyphicon-print
glyphicon glyphicon-kamera
glyphicon glyphicon-font
glyphicon glyphicon-bold
glyphicon glyphicon-kurzíva
glyphicon glyphicon-text-height
glyphicon glyphicon-text-width
glyphicon glyphicon-align-left
glyphicon glyphicon-align-center
glyphicon glyphicon-align-right
glyphicon glyphicon-align-justify
glyphicon glyphicon-list
glyphicon glyphicon-indent-left
glyphicon glyphicon-indent-right
glyphicon glyphicon-facetime-video
glyphicon glyphicon-picture
glyphicon glyphicon-map-marker
glyphicon glyphicon-upravit
glyphicon glyphicon-tint
glyphicon glyphicon-edit
glyphicon glyphicon-share
glyphicon glyphicon-check
glyphicon glyphicon-pohyb
glyphicon glyphicon-step-backward
glyphicon glyphicon-fast-backward
glyphicon glyphicon-backward
glyphicon glyphicon-play
glyphicon glyphicon-pause
glyphicon glyphicon-stop
glyphicon glyphicon-forward
glyphicon glyphicon-fast-forward
glyphicon glyphicon-step-forward
glyphicon glyphicon-eject
glyphicon glyphicon-chevron-left
glyphicon glyphicon-chevron-right
glyphicon glyphicon-plus-sign
glyphicon glyphicon-minus-sign
glyphicon glyphicon-remove-sign
glyphicon glyphicon-ok-sign
glyphicon glyphicon-question-sign
glyphicon glyphicon-info-sign
glyphicon glyphicon-screenshot
glyphicon glyphicon-remove-circle
glyphicon glyphicon-ok-circle
glyphicon glyphicon-ban-circle
glyphicon glyphicon-arrow-left
glyphicon glyphicon-arrow-right
glyphicon glyphicon-arrow-up
glyphicon glyphicon-arrow-down
glyphicon glyphicon-share-alt
glyphicon glyphicon-size-full
glyphicon glyphicon-size-small
glyphicon glyphicon-exclamation-sign
glyphicon glyphicon-dárek
glyphicon glyphicon-leaf
glyphicon glyphicon-fire
glyphicon glyphicon-eye-open
glyphicon glyphicon-eye-close
glyphicon glyphicon-warning-sign
glyphicon glyphicon-plane
glyphicon glyphicon-calendar
glyphicon glyphicon-random
glyphicon glyphicon-komentář
glyphicon glyphicon-magnet
glyphicon glyphicon-chevron-up
glyphicon glyphicon-chevron-down
glyphicon glyphicon-retweet
glyphicon glyphicon-shopping-cart
glyphicon glyphicon-folder-close
glyphicon glyphicon-folder-open
glyphicon glyphicon-size-vertical
glyphicon glyphicon-size-horizontal
glyphicon glyphicon-hdd
glyphicon glyphicon-bullhorn
glyphicon glyphicon-bell
glyphicon glyphicon-certifikát
glyphicon glyphicon-thumb-up
glyphicon glyphicon-thumbs-down
glyphicon glyphicon-hand-right
glyphicon glyphicon-hand-left
glyphicon glyphicon-hand-up
glyphicon glyphicon-hand-down
glyphicon glyphicon-circle-arrow-right
glyphicon glyphicon-circle-arrow-left
glyphicon glyphicon-circle-arrow-up
glyphicon glyphicon-circle-arrow-down
glyphicon glyphicon-globe
glyphicon glyphicon-klíč
glyphicon glyphicon-úkoly
glyphicon glyphicon-filtr
glyphicon glyphicon-aktovka
glyphicon glyphicon-fullscreen
glyphicon glyphicon-dashboard
glyphicon glyphicon-paperclip
glyphicon glyphicon-srdce-prázdné
glyphicon glyphicon-link
glyphicon glyphicon-phone
glyphicon glyphicon-připínáček
glyphicon glyphicon-usd
glyphicon glyphicon-gbp
glyphicon glyphicon-sort
glyphicon glyphicon-sort-by-alphabet
glyphicon glyphicon-sort-by-alphabet-alt
glyphicon glyphicon-sort-by-order
glyphicon glyphicon-sort-by-order-alt
glyphicon glyphicon-sort-by-atributes
glyphicon glyphicon-sort-by-atributes-alt
glyphicon glyphicon-nezaškrtnuto
glyphicon glyphicon-expand
glyphicon glyphicon-collapse-down
glyphicon glyphicon-collapse-up
glyphicon glyphicon-log-in
glyphicon glyphicon-blesk
glyphicon glyphicon-log-out
glyphicon glyphicon-new-window
glyphicon glyphicon-record
glyphicon glyphicon-save
glyphicon glyphicon-open
glyphicon glyphicon-uloženo
glyphicon glyphicon-import
glyphicon glyphicon-export
glyphicon glyphicon-poslat
glyphicon glyphicon-floppy-disk
glyphicon glyphicon-floppy-saved
glyphicon glyphicon-floppy-remove
glyphicon glyphicon-floppy-save
glyphicon glyphicon-floppy-open
glyphicon glyphicon-credit-card
glyphicon glyphicon-transfer
glyphicon glyphicon-příbory
glyphicon glyphicon-header
glyphicon glyphicon-compressed
glyphicon glyphicon-sluchátka
glyphicon glyphicon-phone-alt
glyphicon glyphicon-tower
glyphicon glyphicon-stats
glyphicon glyphicon-sd-video
glyphicon glyphicon-hd-video
glyphicon glyphicon-titulky
glyphicon glyphicon-sound-stereo
glyphicon glyphicon-sound-dolby
glyphicon glyphicon-sound-5-1
glyphicon glyphicon-sound-6-1
glyphicon glyphicon-sound-7-1
glyphicon glyphicon-copyright-mark
glyphicon glyphicon-registration-mark
glyphicon glyphicon-cloud-download
glyphicon glyphicon-cloud-upload
glyphicon glyphicon-tree-conifer
glyphicon glyphicon-tree-listnatý
glyphicon glyphicon-cd
glyphicon glyphicon-save-file
glyphicon glyphicon-open-file
glyphicon glyphicon-level-up
glyphicon glyphicon-copy
glyphicon glyphicon-paste
glyphicon glyphicon-upozornění
glyphicon glyphicon-ekvalizér
glyphicon glyphicon-král
glyphicon glyphicon-queen
glyphicon glyphicon-pěšák
glyphicon glyphicon-biskup
glyphicon glyphicon-rytíř
glyphicon glyphicon-baby-formule
glyphicon glyphicon-stan
glyphicon glyphicon-blackboard
glyphicon glyphicon-bed
glyphicon glyphicon-jablko
glyphicon glyphicon-erase
glyphicon glyphicon-přesýpací hodiny
glyphicon glyphicon-lamp
glyphicon glyphicon-duplicate
glyphicon glyphicon-prasátko-banka
glyphicon glyphicon-nůžky
glyphicon glyphicon-bitcoin
glyphicon glyphicon-btc
glyphicon glyphicon-xbt
glyphicon glyphicon-yen
glyphicon glyphicon-jpy
glyphicon glyphicon-rubl
glyphicon glyphicon-rub
glyphicon glyphicon-scale
glyphicon glyphicon-ice-lolly
glyphicon glyphicon-ice-lolly-ochutnal
glyphicon glyphicon-vzdělávání
glyphicon glyphicon-option-horizontal
glyphicon glyphicon-option-vertical
glyphicon glyphicon-menu-hamburger
glyphicon glyphicon-modal-window
glyphicon glyphicon-olej
glyphicon glyphicon-zrno
glyphicon glyphicon-sluneční brýle
glyphicon glyphicon-text-size
glyphicon glyphicon-text-color
glyphicon glyphicon-text-background
glyphicon glyphicon-object-align-top
glyphicon glyphicon-object-align-bottom
glyphicon glyphicon-object-align-horizontal
glyphicon glyphicon-object-align-left
glyphicon glyphicon-object-align-vertical
glyphicon glyphicon-object-align-right
glyphicon glyphicon-trojúhelník-vpravo
glyphicon glyphicon-trojúhelník-levý
glyphicon glyphicon-trojúhelník-dole
glyphicon glyphicon-trojúhelník-top
glyphicon glyphicon-console
glyphicon glyphicon-horní index
glyphicon glyphicon-dolní index
glyphicon glyphicon-menu-left
glyphicon glyphicon-menu-right
glyphicon glyphicon-menu-down
glyphicon glyphicon-menu-up
Jak používat
Z důvodů výkonu vyžadují všechny ikony základní třídu a individuální třídu ikon. Chcete-li použít, umístěte následující kód téměř kamkoli. Nezapomeňte ponechat mezeru mezi ikonou a textem pro správné odsazení.
Nemíchejte s jinými komponenty
Třídy ikon nelze přímo kombinovat s jinými komponentami. Neměly by se používat spolu s jinými třídami na stejném prvku. Místo toho přidejte vnořené <span>a aplikujte třídy ikon na <span>.
Pouze pro použití na prázdné prvky
Třídy ikon by se měly používat pouze u prvků, které neobsahují žádný textový obsah a nemají žádné podřízené prvky.
Změna umístění písma ikony
Bootstrap předpokládá, že soubory písem ikon budou umístěny v ../fonts/adresáři vzhledem ke zkompilovaným souborům CSS. Přesunutí nebo přejmenování těchto souborů písem znamená aktualizaci CSS jedním ze tří způsobů:
Použijte jakoukoli možnost, která nejlépe vyhovuje vašemu konkrétnímu nastavení vývoje.
Přístupné ikony
Moderní verze asistenčních technologií oznámí obsah generovaný CSS a také specifické znaky Unicode. Abychom se vyhnuli nezamýšlenému a matoucímu výstupu v programech pro čtení z obrazovky (zejména když se ikony používají čistě pro ozdobu), skryjeme je pomocí aria-hidden="true"atributu.
Používáte-li ikonu k vyjádření významu (spíše než pouze jako dekorativní prvek), zajistěte, aby byl tento význam přenesen také do asistenčních technologií – například zahrňte další obsah, vizuálně skrytý s .sr-onlytřídou.
Pokud vytváříte ovládací prvky bez dalšího textu (například <button>obsahující pouze ikonu), měli byste vždy poskytnout alternativní obsah k identifikaci účelu ovládacího prvku, aby dával uživatelům asistenčních technologií smysl. V tomto případě můžete přidat aria-labelatribut na samotný ovládací prvek.
Příklady
Použijte je v tlačítkách, skupinách tlačítek pro panel nástrojů, navigaci nebo vstupy do formuláře.
Ikona použitá ve výstraze sdělující, že se jedná o chybovou zprávu, s dalším .sr-onlytextem, který tuto nápovědu sděluje uživatelům asistenčních technologií.
Zabalte spouštěč rozbalovací nabídky a rozbalovací nabídku do .dropdown, nebo jiného prvku, který deklaruje position: relative;. Poté přidejte HTML nabídky.
Ve výchozím nastavení je rozbalovací nabídka automaticky umístěna 100 % shora a podél levé strany nadřazené položky. Přidat .dropdown-menu-rightdo a .dropdown-menuzarovnat rozbalovací nabídku doprava.
Může vyžadovat dodatečné umístění
Rozbalovací seznamy jsou automaticky umístěny pomocí CSS v rámci běžného toku dokumentu. To znamená, že rozbalovací seznamy mohou být oříznuty rodiči s určitými overflowvlastnostmi nebo se mohou objevit mimo hranice výřezu. Řešte tyto problémy sami, jakmile se objeví.
Zastaralé .pull-rightzarovnání
Od verze 3.1.0 jsme přestali podporovat .pull-rightrozevírací nabídky. Chcete-li nabídku zarovnat vpravo, použijte .dropdown-menu-right. Komponenty navigace zarovnané doprava v navigační liště používají smíšenou verzi této třídy k automatickému zarovnání nabídky. Chcete-li jej přepsat, použijte .dropdown-menu-left.
Záhlaví
Přidejte záhlaví k označení částí akcí v libovolné rozbalovací nabídce.
Seskupte řadu tlačítek na jeden řádek se skupinou tlačítek. Pomocí našeho pluginu pro tlačítka přidejte volitelný přepínač JavaScriptu a styl zaškrtávacího políčka .
Popisky a vyskakovací okna ve skupinách tlačítek vyžadují speciální nastavení
Při používání popisků nástrojů nebo vyskakovacích oken na prvky v rámci .btn-group, budete muset určit volbu container: 'body', abyste se vyhnuli nežádoucím vedlejším efektům (jako je například zvětšení prvku nebo ztráta zaoblených rohů při spuštění popisku nebo vyskakovacího okna).
Ujistěte se, že jsou správné rolea poskytněte štítek
Aby asistenční technologie – jako jsou čtečky obrazovky – sdělily, že je řada tlačítek seskupena, je třeba poskytnout vhodný roleatribut. Pro skupiny tlačítek by to bylo role="group", zatímco panely nástrojů by měly mít role="toolbar".
Jedinou výjimkou jsou skupiny, které obsahují pouze jeden ovládací prvek (například zarovnané skupiny tlačítek s <button>prvky) nebo rozevírací seznam.
Skupiny a panely nástrojů by navíc měly být označeny explicitně, protože většina asistenčních technologií je jinak neoznámí, a to i přes přítomnost správného roleatributu. Ve zde uvedených příkladech používáme , ale lze použít i aria-labelalternativy jako např .aria-labelledby
Vytvořte skupinu tlačítek, která se natáhne ve stejné velikosti, aby se rozprostírala po celé šířce jejího rodiče. Funguje také s rozevíracími seznamy tlačítek ve skupině tlačítek.
Manipulace s hranicemi
Kvůli specifickému HTML a CSS použitému k zarovnání tlačítek (jmenovitě display: table-cell), jsou hranice mezi nimi zdvojené. V běžných skupinách tlačítek margin-left: -1pxse používá ke skládání okrajů namísto jejich odstraňování. marginNefunguje však s display: table-cell. V důsledku toho, v závislosti na vašich přizpůsobeních Bootstrapu, možná budete chtít odstranit nebo přebarvit okraje.
IE8 a hranice
Internet Explorer 8 nevykresluje okraje na tlačítkách ve skupině zarovnaných tlačítek, ať už jsou zapnuté <a>nebo <button>prvky. Chcete-li to obejít, zabalte každé tlačítko do jiného .btn-group.
Pokud se <a>prvky používají k tomu, aby fungovaly jako tlačítka – spouštějí funkcionalitu na stránce, spíše než pro navigaci do jiného dokumentu nebo sekce na aktuální stránce – měly by mít také odpovídající role="button".
S <button>prvky
Chcete-li použít zarovnané skupiny tlačítek s <button>prvky, musíte každé tlačítko zabalit do skupiny tlačítek . Většina prohlížečů správně nepoužívá naše CSS pro zdůvodnění <button>prvků, ale protože podporujeme rozevírací seznamy tlačítek, můžeme to obejít.
Rozbalovací seznamy tlačítek
Pomocí libovolného tlačítka spustíte rozevírací nabídku tak, že ji umístíte do a .btn-groupa poskytnete správnou značku nabídky.
Závislost na pluginech
Rozbalovací seznamy tlačítek vyžadují, aby byl ve vaší verzi Bootstrapu zahrnut rozbalovací plugin .
Rozbalovací seznamy s jedním tlačítkem
Proměňte tlačítko na rozbalovací přepínač s některými základními změnami označení.
Rozšiřte ovládací prvky formuláře přidáním textu nebo tlačítek před, za nebo na obě strany jakéhokoli textového <input>. Použijte .input-groups .input-group-addonnebo .input-group-btnk předřazení nebo připojení prvků k jedné .form-control.
Pouze textové <input>s
Nepoužívejte <select>zde prvky, protože v prohlížečích WebKit nemohou být plně stylizovány.
Nepoužívejte <textarea>zde prvky, protože jejich rowsatribut nebude v některých případech respektován.
Popisky a vyskakovací okna ve vstupních skupinách vyžadují speciální nastavení
Při použití popisků nástrojů nebo vyskakovacích oken na prvky v rámci .input-group, budete muset určit volbu container: 'body', abyste se vyhnuli nežádoucím vedlejším efektům (jako je například zvětšení prvku nebo ztráta zaoblených rohů při spuštění popisku nebo vyskakovacího okna).
Nemíchejte s jinými komponenty
Nemíchejte skupiny formulářů nebo třídy sloupců mřížky přímo se vstupními skupinami. Místo toho vnořte vstupní skupinu do skupiny formulářů nebo prvku souvisejícího s mřížkou.
Vždy přidávejte štítky
Čtečky obrazovky budou mít potíže s vašimi formuláři, pokud pro každý vstup neuvedete štítek. U těchto vstupních skupin zajistěte, aby byly do pomocných technologií přeneseny všechny další štítky nebo funkce.
Přesná technika, která se má použít (viditelné <label>prvky, <label>prvky skryté pomocí .sr-onlytřídy nebo použití atributu aria-label, aria-labelledby, aria-describedby, titlenebo placeholderatributu) a jaké další informace bude třeba předat, se bude lišit v závislosti na přesném typu widgetu rozhraní, který implementujete. Příklady v této části poskytují několik navrhovaných přístupů specifických pro jednotlivé případy.
Základní příklad
Umístěte jeden doplněk nebo tlačítko na obě strany vstupu. Můžete také umístit jeden na obě strany vstupu.
Nepodporujeme více doplňků ( .input-group-addonnebo .input-group-btn) na jedné straně.
Nepodporujeme více ovládacích prvků formuláře v jedné vstupní skupině.
Dimenzování
Přidejte relativní třídy velikosti formuláře k .input-groupsobě a obsah uvnitř automaticky změní velikost – není třeba opakovat třídy velikosti ovládacích prvků formuláře na každém prvku.
Zaškrtávací políčka a rádiové doplňky
Místo textu umístěte libovolné zaškrtávací políčko nebo přepínač do doplňku vstupní skupiny.
Doplňky tlačítek
Tlačítka ve vstupních skupinách jsou trochu jiná a vyžadují jednu úroveň vnoření navíc. Místo .input-group-addon, budete muset použít .input-group-btnk zabalení tlačítek. To je vyžadováno kvůli výchozím stylům prohlížeče, které nelze přepsat.
Tlačítka s rozevíracími seznamy
Segmentovaná tlačítka
Více tlačítek
Zatímco na každé straně můžete mít pouze jeden doplněk, můžete mít více tlačítek v jednom .input-group-btn.
Nav
Navigační systémy dostupné v Bootstrapu mají sdílené označení, počínaje základní .navtřídou, a také sdílené stavy. Zaměňte třídy modifikátorů pro přepínání mezi jednotlivými styly.
Používání navigací pro panely záložek vyžaduje plugin záložek JavaScript
Pro karty s oblastmi, které lze zobrazit pomocí tabel, musíte použít plugin JavaScript tabs . Označení bude také vyžadovat další roleatributy a atributy ARIA – další podrobnosti naleznete v příkladu označení pluginu .
Zpřístupněte navigace používané jako navigace
Pokud k poskytování navigačního panelu používáte navigace, nezapomeňte přidat a role="navigation"do nejlogičtějšího nadřazeného kontejneru <ul>, nebo obklopit <nav>prvek kolem celé navigace. Nepřidávejte roli k <ul>samotné roli, protože by to zabránilo tomu, aby byla asistenčními technologiemi oznámena jako skutečný seznam.
Karty
Všimněte si, že .nav-tabstřída vyžaduje .navzákladní třídu.
Snadno vytvořte karty nebo pilulky stejné šířky jako jejich rodiče na obrazovkách širších než 768 pixelů pomocí .nav-justified. Na menších obrazovkách jsou navigační odkazy naskládané.
Zarovnané navigační odkazy navbar nejsou aktuálně podporovány.
Safari a responzivní odůvodněné navigace
Od verze 9.1.2 Safari vykazuje chybu, při které horizontální změna velikosti vašeho prohlížeče způsobuje chyby vykreslování v zarovnané navigaci, které se po obnovení vymažou. Tato chyba je také zobrazena v příkladu zarovnané navigace .
Navbary jsou responzivní metakomponenty, které slouží jako navigační záhlaví pro vaši aplikaci nebo web. V mobilních zobrazeních se začínají sbalovat (a lze je přepínat) a s rostoucí šířkou dostupného výřezu se stávají vodorovnými.
Zarovnané navigační odkazy navbar nejsou aktuálně podporovány.
Přetékající obsah
Protože Bootstrap neví, kolik místa obsah ve vaší navigační liště potřebuje, můžete narazit na problémy se zalamováním obsahu do druhého řádku. Chcete-li to vyřešit, můžete:
Zmenšete množství nebo šířku položek navigační lišty.
Změňte bod, ve kterém se navigační lišta přepíná mezi sbaleným a vodorovným režimem. Přizpůsobte @grid-float-breakpointproměnnou nebo přidejte svůj vlastní mediální dotaz.
Vyžaduje plugin JavaScript
Pokud je JavaScript zakázán a zobrazovaná oblast je dostatečně úzká, aby se navigační panel sbalil, nebude možné rozbalit navigační panel a zobrazit obsah v .navbar-collapse.
Responzivní navigační panel vyžaduje, aby byl ve vaší verzi Bootstrapu zahrnut plugin pro sbalení .
Změna zarážky sbaleného mobilního navigačního panelu
Navigační lišta se sbalí do svého vertikálního mobilního zobrazení, když je výřez užší než @grid-float-breakpoint, a rozbalí se do svého horizontálního nemobilního zobrazení, když má výřez alespoň @grid-float-breakpointšířku. Upravte tuto proměnnou ve zdroji Méně, abyste řídili, kdy se navigační panel sbalí/rozbalí. Výchozí hodnota je 768px(nejmenší obrazovka „malý“ nebo „tablet“).
Zpřístupněte navigační panely
Ujistěte se, že používáte <nav>prvek nebo, pokud používáte obecnější prvek, jako je <div>, přidejte a role="navigation"na každý navigační panel, abyste jej explicitně označili jako orientační oblast pro uživatele asistenčních technologií.
Obrázek značky
Nahraďte značku navbar svým vlastním obrázkem výměnou textu za <img>. Protože .navbar-brandmá vlastní výplň a výšku, možná budete muset přepsat některé CSS v závislosti na vašem obrázku.
formuláře
Umístěte obsah formuláře dovnitř .navbar-formpro správné vertikální zarovnání a sbalené chování v úzkých výřezech. Pomocí voleb zarovnání rozhodněte, kde bude umístěn v obsahu navigační lišty.
Jako heads up .navbar-formsdílí většinu svého kódu s .form-inlinepřes mixin. Některé ovládací prvky formuláře, jako jsou vstupní skupiny, mohou vyžadovat, aby se v navigační liště správně zobrazily pevné šířky.
Čtečky obrazovky budou mít potíže s vašimi formuláři, pokud pro každý vstup neuvedete štítek. U těchto vložených formulářů můžete štítky skrýt pomocí .sr-onlytřídy. Existují další alternativní způsoby poskytování označení pro asistenční technologie, jako je atribut aria-label, aria-labelledbynebo . titlePokud není přítomen žádný z těchto atributů, mohou se čtečky obrazovky uchýlit k použití placeholderatributu, pokud je přítomen, ale uvědomte si, že použití placeholderjako náhrady za jiné metody označování se nedoporučuje.
Tlačítka
Přidejte .navbar-btntřídu k <button>prvkům, které se nenacházejí v a <form>, abyste je svisle vycentrovali v navigační liště.
Kontextově specifické použití
Stejně jako standardní třídy tlačítek lze .navbar-btnpoužít na prvcích <a>a . <input>Nicméně .navbar-btnani standardní třídy tlačítek by se neměly používat na <a>prvky v .navbar-nav.
Text
Zabalte řetězce textu do prvku s .navbar-text, obvykle na <p>značku pro správné prokládání a barvu.
Odkazy bez navigace
Pro uživatele, kteří používají standardní odkazy, které nejsou součástí běžné navigační komponenty navbar, použijte .navbar-linktřídu k přidání správných barev pro výchozí a inverzní možnosti navbar.
Zarovnání součástí
Zarovnejte navigační odkazy, formuláře, tlačítka nebo text pomocí tříd .navbar-leftnebo . .navbar-rightObě třídy přidají CSS float v určeném směru. Chcete-li například zarovnat navigační odkazy, umístěte je samostatně <ul>s příslušnou použitou třídou utility.
Tyto třídy jsou smíšenými verzemi .pull-lefta .pull-right, ale jsou určeny pro dotazy na média pro snazší manipulaci s komponentami navigační lišty v různých velikostech zařízení.
Zarovnání více komponent doprava
Navbary mají v současnosti omezení s více .navbar-righttřídami. Abychom správně rozložili obsah, použijeme na posledním .navbar-rightprvku záporný okraj. Pokud tuto třídu používá více prvků, tyto okraje nefungují tak, jak bylo zamýšleno.
Znovu se k tomu vrátíme, až budeme moci přepsat tuto komponentu ve v4.
Pevně nahoře
Přidejte .navbar-fixed-topa zahrňte .containernebo .container-fluiddo středu a obsahu navigační lišty pad.
Vyžaduje se polstrování těla
Pevný navigační panel překryje váš další obsah, pokud ho nepřidáte paddingna začátek <body>. Vyzkoušejte své vlastní hodnoty nebo použijte náš úryvek níže. Tip: Ve výchozím nastavení je navigační lišta vysoká 50 pixelů.
Ujistěte se, že to zahrnete za základní CSS Bootstrap.
Pevně dole
Přidejte .navbar-fixed-bottoma zahrňte .containernebo .container-fluiddo středu a obsahu navigační lišty pad.
Vyžaduje se polstrování těla
Pevný navigační panel překryje váš další obsah, pokud ho nepřidáte paddingna konec <body>. Vyzkoušejte své vlastní hodnoty nebo použijte náš úryvek níže. Tip: Ve výchozím nastavení je navigační lišta vysoká 50 pixelů.
Ujistěte se, že to zahrnete za základní CSS Bootstrap.
Statický vršek
Vytvořte navigační panel s plnou šířkou, který se posune se stránkou, přidáním .navbar-static-topa zahrnutím .containernebo .container-fluiddo středu a obsahu navigačního panelu.
Na rozdíl od .navbar-fixed-*tříd nemusíte měnit žádné odsazení na body.
Poskytněte stránkovací odkazy pro váš web nebo aplikaci pomocí vícestránkové stránky stránkování nebo jednodušší alternativy pageru .
Výchozí stránkování
Jednoduché stránkování inspirované Rdio, skvělé pro aplikace a výsledky vyhledávání. Velký blok je těžké přehlédnout, je snadno škálovatelný a poskytuje velké klikací plochy.
Označení složky stránkování
Komponenta stránkování by měla být zabalena do <nav>prvku, který ji identifikuje jako navigační sekci pro čtečky obrazovky a další pomocné technologie. Kromě toho, protože stránka pravděpodobně již obsahuje více než jednu takovou navigační sekci (jako je primární navigace v záhlaví nebo navigace na postranním panelu), je vhodné poskytnout popis aria-label, <nav>který odráží její účel. Pokud se například komponenta stránkování používá k navigaci mezi sadou výsledků vyhledávání, může být vhodný štítek aria-label="Search results pages".
Deaktivované a aktivní stavy
Odkazy lze přizpůsobit různým okolnostem. Použijte .disabledpro odkazy, na které nelze kliknout, a .activepro označení aktuální stránky.
Doporučujeme zaměnit aktivní nebo deaktivované kotvy za <span>nebo vynechat kotvu v případě předchozích/následujících šipek, abyste odstranili funkci kliknutí a zachovali zamýšlené styly.
Dimenzování
Máte chuť na větší nebo menší stránkování? Přidejte .pagination-lgnebo .pagination-smpro další velikosti.
Pager
Rychlé předchozí a následující odkazy pro jednoduché implementace stránkování s lehkým značením a styly. Je to skvělé pro jednoduché weby, jako jsou blogy nebo časopisy.
Výchozí příklad
Ve výchozím nastavení pager vycentruje odkazy.
Zarovnané odkazy
Případně můžete každý odkaz zarovnat ke stranám:
Volitelný deaktivovaný stav
Odkazy na pager také používají .disabledtřídu obecného nástroje ze stránkování.
Výchozí primární informace o úspěchu Varování Nebezpečí
Máte tuny štítků?
Problémy s vykreslováním mohou nastat, když máte v úzkém kontejneru desítky vložených štítků, z nichž každý obsahuje svůj vlastní inline-blockprvek (jako ikonu). Cesta kolem je nastavení display: inline-block;. Kontext a příklad viz #13219 .
Odznaky
Snadno zvýrazněte nové nebo nepřečtené položky přidáním <span class="badge">odkazů na, Bootstrap nav a dalších.
Lehká a flexibilní komponenta, která může volitelně rozšířit celou zobrazovanou oblast a předvést klíčový obsah na vašem webu.
Ahoj světe!
Jedná se o jednoduchou jednotku hrdiny, jednoduchou komponentu ve stylu jumbotronu, která přitahuje zvláštní pozornost k doporučenému obsahu nebo informacím.
Chcete-li mít jumbotron plnou šířku a bez zaoblených rohů, umístěte jej mimo všechna .containersa a místo toho přidejte .containeruvnitř.
Záhlaví stránky
Jednoduchý shell pro h1náležité rozmístění a segmentaci částí obsahu na stránce. Může využívat h1výchozí smallprvek 's, stejně jako většinu ostatních komponent (s dalšími styly).
Příklad záhlaví stránky Podtext pro záhlaví
Miniatury
Rozšiřte mřížkový systém Bootstrapu o komponentu miniatur, abyste mohli snadno zobrazovat mřížky obrázků, videí, textu a dalších.
Pokud hledáte prezentaci miniatur s různou výškou a/nebo šířkou podobnou Pinterestu, budete muset použít plugin třetí strany, jako je Masonry , Isotope nebo Salvattore .
Výchozí příklad
Ve výchozím nastavení jsou miniatury Bootstrapu navrženy tak, aby zobrazovaly připojené obrázky s minimálním požadovaným označením.
Vlastní obsah
S trochou zvláštního označení je možné do miniatur přidat jakýkoli druh obsahu HTML, jako jsou nadpisy, odstavce nebo tlačítka.
Miniatura štítku
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
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.
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.
Poskytujte kontextové zprávy zpětné vazby pro typické akce uživatele pomocí několika dostupných a flexibilních výstražných zpráv.
Příklady
Zabalte libovolný text a volitelné tlačítko pro zrušení do .alertjedné ze čtyř kontextových tříd (např. .alert-success) pro základní výstražné zprávy.
Žádná výchozí třída
Upozornění nemají výchozí třídy, pouze základní a modifikační třídy. Výchozí šedé upozornění nedává příliš smysl, takže musíte zadat typ pomocí kontextové třídy. Vyberte si z úspěchu, informací, varování nebo nebezpečí.
Výborně! Úspěšně jste si přečetli tuto důležitou výstražnou zprávu.
Hlavy vzhůru! Toto upozornění vyžaduje vaši pozornost, ale není příliš důležité.
Varování! Raději se přesvědčte, nevypadáte moc dobře.
Kruci! Změňte pár věcí a zkuste odeslání znovu.
Zamítatelné výstrahy
Stavte na jakékoli upozornění přidáním volitelného .alert-dismissiblea zavíracího tlačítka.
Poskytujte aktuální zpětnou vazbu o průběhu pracovního postupu nebo akce pomocí jednoduchých, ale flexibilních ukazatelů průběhu.
Kompatibilita mezi prohlížeči
Ukazatele průběhu používají přechody a animace CSS3 k dosažení některých svých efektů. Tyto funkce nejsou podporovány v prohlížeči Internet Explorer 9 a nižších nebo starších verzích Firefoxu. Opera 12 nepodporuje animace.
Kompatibilita se zásadami zabezpečení obsahu (CSP).
Pokud má váš web Zásady zabezpečení obsahu (CSP) , které nepovolují style-src 'unsafe-inline', nebudete moci použít vložené styleatributy k nastavení šířky ukazatele průběhu, jak je znázorněno v našich příkladech níže. Alternativní metody pro nastavení šířek, které jsou kompatibilní s přísnými CSP, zahrnují použití malého vlastního JavaScriptu (který nastavuje element.style.width) nebo použití vlastních tříd CSS.
Základní příklad
Výchozí ukazatel průběhu.
60% kompletní
Se štítkem
Odeberte třídu <span>with .sr-onlyz indikátoru průběhu, abyste zobrazili viditelné procento.
60 %
Chcete-li zajistit, aby text štítku zůstal čitelný i při nízkých procentech, zvažte přidání znaku min-widthdo ukazatele průběhu.
0 %
2 %
Kontextové alternativy
Ukazatele průběhu používají některé stejné třídy tlačítek a výstrah pro konzistentní styly.
40 % dokončeno (úspěch)
20% kompletní
60 % hotovo (varování)
80 % hotovo (nebezpečí)
Pruhovaný
Používá přechod k vytvoření pruhovaného efektu. Není k dispozici v IE9 a nižších.
40 % dokončeno (úspěch)
20% kompletní
60 % hotovo (varování)
80 % hotovo (nebezpečí)
Animovaný
Přidat .activek .progress-bar-stripedanimaci pruhů zprava doleva. Není k dispozici v IE9 a nižších.
45 % kompletní
Naskládané
Umístěte více tyčí do stejné .progressa stohujte je.
35 % dokončeno (úspěch)
20 % hotovo (varování)
10 % dokončeno (nebezpečí)
Mediální objekt
Styly abstraktních objektů pro vytváření různých typů komponent (jako jsou komentáře blogu, tweety atd.), které obsahují vedle textového obsahu obrázek zarovnaný doleva nebo doprava.
Výchozí médium
Výchozí médium zobrazuje objekt média (obrázky, video, zvuk) vlevo nebo vpravo od bloku obsahu.
Mediální nadpis
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Mediální nadpis
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Vnořený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Mediální nadpis
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Mediální nadpis
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Třídy .pull-lefta .pull-righttaké existují a byly dříve používány jako součást mediální komponenty, ale od verze 3.3.0 jsou pro toto použití zastaralé. Jsou přibližně ekvivalentní .media-lefta .media-right, kromě toho, že .media-rightby měly být umístěny za .media-bodyv html.
Zarovnání médií
Obrázky nebo jiná média mohou být zarovnána nahoře, uprostřed nebo dole. Výchozí nastavení je zarovnáno shora.
Média zarovnaná nahoru
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Média zarovnaná na střed
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Médium zarovnané dole
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Seznam médií
S trochou zvláštního označení můžete použít média uvnitř seznamu (užitečné pro vlákna komentářů nebo seznamy článků).
Mediální nadpis
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Vnořený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Vnořený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Vnořený nadpis média
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
Seznam skupiny
Skupiny seznamů jsou flexibilní a výkonná komponenta pro zobrazení nejen jednoduchých seznamů prvků, ale i komplexních s vlastním obsahem.
Základní příklad
Nejzákladnější skupina seznamů je jednoduše neuspořádaný seznam s položkami seznamu a správnými třídami. Stavte na něm pomocí následujících možností nebo podle potřeby pomocí vlastního CSS.
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erosu
Odznaky
Přidejte komponentu odznaků do libovolné položky skupiny seznamu a bude automaticky umístěna vpravo.
14Cras justo odio
2Dapibus ac facilisis v
1Morbi leo risus
Propojené položky
Propojte položky skupiny seznamu pomocí značek ukotvení namísto položek seznamu (to také znamená nadřazený <div>prvek namísto <ul>). Není potřeba, aby kolem každého prvku byli jednotliví rodiče.
Položky skupiny seznamu mohou být tlačítka namísto položek seznamu (to také znamená nadřazený znak <div>namísto <ul>). Není potřeba, aby kolem každého prvku byli jednotliví rodiče. Zde nepoužívejte standardní .btntřídy.
Zakázané položky
Přidejte .disableddo a , chcete-li .list-group-itemjej zašednout, aby se jevil jako zakázán.
I když to není vždy nutné, někdy musíte svůj DOM vložit do krabice. Pro tyto situace vyzkoušejte komponentu panelu.
Základní příklad
Ve výchozím nastavení .panelstačí použít základní ohraničení a výplň, aby obsahoval nějaký obsah.
Příklad základního panelu
Panel s nadpisem
Snadno přidejte kontejner záhlaví na svůj panel pomocí .panel-heading. Můžete také zahrnout libovolné <h1>- <h6>s .panel-titletřídou a přidat předstylovaný nadpis. Velikosti písem <h1>- <h6>jsou však přepsány .panel-heading.
Pro správné vybarvení odkazů nezapomeňte umístit odkazy do nadpisů v rámci .panel-title.
Záhlaví panelu bez názvu
Obsah panelu
Název panelu
Obsah panelu
Panel se zápatím
Zalamujte tlačítka nebo sekundární text do .panel-footer. Všimněte si, že zápatí panelu nedědí barvy a ohraničení při použití kontextových variant, protože nemají být v popředí.
Obsah panelu
Kontextové alternativy
Stejně jako ostatní komponenty můžete snadno učinit panel smysluplnějším pro konkrétní kontext přidáním jakékoli z tříd kontextuálního stavu.
Název panelu
Obsah panelu
Název panelu
Obsah panelu
Název panelu
Obsah panelu
Název panelu
Obsah panelu
Název panelu
Obsah panelu
Se stoly
Přidejte .tabledo panelu jakékoli neohraničené pro bezproblémový design. Pokud existuje .panel-body, přidáme k horní části tabulky další ohraničení pro oddělení.
Záhlaví panelu
Zde je nějaký výchozí obsah panelu. Nulla vitae elitní libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
#
Jméno
Příjmení
Uživatelské jméno
1
Označit
Otto
@mdo
2
Jacobe
Thornton
@Tlustý
3
Larry
pták
@cvrlikání
Pokud není k dispozici tělo panelu, komponenta se bez přerušení přesune z hlavičky panelu do tabulky.
Záhlaví panelu
#
Jméno
Příjmení
Uživatelské jméno
1
Označit
Otto
@mdo
2
Jacobe
Thornton
@Tlustý
3
Larry
pták
@cvrlikání
Se skupinami seznamů
Do libovolného panelu snadno zahrňte skupiny seznamů v plné šířce .
Záhlaví panelu
Zde je nějaký výchozí obsah panelu. Nulla vitae elitní libero, pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
Cras justo odio
Dapibus ac facilisis v
Morbi leo risus
Porta ac consectetur ac
Vestibulum na erosu
Responzivní vložení
Umožněte prohlížečům určit rozměry videa nebo prezentace na základě šířky bloku, který obsahuje, vytvořením vnitřního poměru, který se bude správně škálovat na jakémkoli zařízení.
Pravidla jsou přímo aplikována na prvky <iframe>, <embed>, <video>a <object>; volitelně použijte explicitní podřízenou třídu .embed-responsive-item, když chcete přizpůsobit styl pro jiné atributy.
Profesionální tip! frameborder="0"Do svého s nemusíte zahrnout <iframe>, protože to za vás přepíšeme.
Wells
Výchozí studna
Použijte studnu jako jednoduchý efekt na prvek, abyste získali vložený efekt.
Podívej, jsem ve studni!
Volitelné třídy
Ovládejte výplň a zaoblené rohy pomocí dvou volitelných tříd modifikátorů.