Viac ako tucet opakovane použiteľných komponentov vytvorených tak, aby poskytovali ikonografiu, rozbaľovacie zoznamy, skupiny vstupov, navigáciu, upozornenia a oveľa viac.
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
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.
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.
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í.
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.
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.
Hlavičky
Pridajte hlavičku na označenie sekcií akcií v ľubovoľnej rozbaľovacej ponuke.
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.
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.
Hniezdenie
Ak chcete rozbaľovacie ponuky zmiešané so sériou tlačidiel, umiestnite .btn-groupdo iného ..btn-group
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.
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ť.
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.
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.
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.
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.
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ť.
Tlačidlá s rozbaľovacími ponukami
Segmentované tlačidlá
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.
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.
Karty
Všimnite si, že .nav-tabstrieda vyžaduje .navzákladnú triedu.
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 .
Navigačné panely sú responzívne meta komponenty, ktoré slúžia ako navigačné hlavičky pre vašu aplikáciu alebo lokalitu. V mobilných zobrazeniach sa začínajú zbaliť (a dajú sa prepínať) a stávajú sa horizontálnymi, keď sa zväčšuje dostupná šírka výrezu.
Zarovnané navigačné odkazy navigačnej lišty momentálne nie sú podporované.
Preplnený obsah
Keďže Bootstrap nevie, koľko miesta potrebuje obsah vo vašom navigačnom paneli, môžete naraziť na problémy so zalamovaním obsahu do druhého riadku. Ak to chcete vyriešiť, môžete:
Znížte množstvo alebo šírku položiek navigačnej lišty.
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í.
Obrázok značky
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.
Formuláre
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.
Čí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.
Tlačidlá
Pridajte .navbar-btntriedu k <button>prvkom, ktoré sa nenachádzajú v a <form>, aby ste ich vertikálne vycentrovali na navigačnom paneli.
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.
Text
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.
Odkazy bez navigácie
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.
Zarovnanie komponentov
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.
Upevnené navrchu
Pridajte .navbar-fixed-topa pridajte .containeralebo .container-fluiddo stredu a obsahu navigačnej lišty pad.
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.
Uistite sa, že ste to zahrnuli za základný CSS Bootstrap.
Upevnené na dne
Pridajte .navbar-fixed-bottoma pridajte .containeralebo .container-fluiddo stredu a obsahu navigačnej lišty pad.
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.
Uistite sa, že ste to zahrnuli za základný CSS Bootstrap.
Statický vrch
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.
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.
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.
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.
Dimenzovanie
Máte chuť na väčšie alebo menšie stránkovanie? Pridajte .pagination-lgalebo .pagination-smpre ďalšie veľkosti.
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.
Zarovnané odkazy
Prípadne môžete zarovnať každý odkaz na strany:
Voliteľný vypnutý stav
Odkazy na pager tiež používajú všeobecnú .disabledpomocnú triedu zo stránkovania.
Š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ý
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
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.
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.
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.
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).
Príklad hlavičky stránky Podtext pre hlavičku
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.
Vlastný obsah
S trochou extra značenia je možné pridať akýkoľvek druh obsahu HTML, ako sú nadpisy, odseky alebo tlačidlá, do miniatúr.
Menovka s miniatúrou
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.
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é správy so spätnou väzbou pre typické akcie používateľa pomocou niekoľkých dostupných a flexibilných výstražných správ.
Príklady
Zabaľte ľubovoľný text a voliteľné tlačidlo na zrušenie do .alertjednej zo štyroch kontextových tried (napr. .alert-success) pre základné výstražné správy.
Žiadna predvolená trieda
Výstrahy nemajú predvolené triedy, iba základné triedy a triedy modifikátorov. Predvolené šedé upozornenie nedáva príliš zmysel, takže musíte zadať typ prostredníctvom kontextovej triedy. Vyberte si z úspechu, informácií, varovania alebo nebezpečenstva.
Výborne! Úspešne ste si prečítali túto dôležitú výstražnú správu.
Hlavy hore! Toto upozornenie si vyžaduje vašu pozornosť, ale nie je mimoriadne dôležité.
POZOR! Radšej sa skontrolujte, nevyzeráte príliš dobre.
Och, rýchlo! Zmeňte pár vecí a skúste odoslať znova.
Odmietnuť upozornenia
Stavte na akékoľvek upozornenie pridaním voliteľného .alert-dismissibletlačidla a tlačidla zavrieť.
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 %.
So štítkom
Odstráňte triedu <span>with .sr-onlyz indikátora priebehu, aby sa zobrazilo viditeľné percento.
60 %
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%
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)
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)
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 %.
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)
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.
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.
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.
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
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
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.
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.
Zakázané položky
Pridajte .disableddo a .list-group-item, ak chcete, aby sa javil ako deaktivovaný.
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
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
Panel s pätou
Zalamujte tlačidlá alebo sekundárny text do .panel-footer. Všimnite si, že päty panelov nededia farby a okraje pri používaní kontextových variácií, pretože nemajú byť v popredí.
Obsah panela
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
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
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
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
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.
Wells
Predvolená studňa
Použite studňu ako jednoduchý efekt na prvok, aby ste získali vložený efekt.
Pozri, som v studni!
Voliteľné triedy
Ovládajte výplň a zaoblené rohy pomocou dvoch voliteľných tried modifikátorov.