Prístup
Získajte informácie o hlavných princípoch, stratégiách a technikách používaných na vytvorenie a údržbu Bootstrapu, aby ste si ho mohli jednoduchšie prispôsobiť a rozšíriť.
Zatiaľ čo stránky Začíname poskytujú úvodnú prehliadku projektu a toho, čo ponúka, tento dokument sa zameriava na to, prečo robíme veci, ktoré robíme v Bootstrape. Vysvetľuje našu filozofiu budovania na webe, aby sa ostatní mohli od nás učiť, prispievať s nami a pomáhať nám zlepšovať sa.
Vidíte niečo, čo neznie správne, alebo by sa to možno dalo urobiť lepšie? Otvorte problém – radi ho s vami preberieme.
Zhrnutie
Budeme sa ponoriť do každého z nich podrobnejšie, ale na vysokej úrovni, tu je to, čo riadi náš prístup.
- Komponenty by mali byť responzívne a predovšetkým mobilné
- Komponenty by mali byť zostavené so základnou triedou a rozšírené prostredníctvom tried modifikátorov
- Stavy komponentov by sa mali riadiť bežnou stupnicou z-indexu
- Vždy, keď je to možné, uprednostňujte implementáciu HTML a CSS pred JavaScriptom
- Vždy, keď je to možné, používajte pomocné programy namiesto vlastných štýlov
- Vždy, keď je to možné, vyhnite sa presadzovaniu prísnych požiadaviek HTML (detské selektory)
Responzívne
Responzívne štýly Bootstrapu sú vytvorené tak, aby boli responzívne, čo je prístup, ktorý sa často označuje ako mobile-first . Tento výraz používame v našich dokumentoch a vo veľkej miere s ním súhlasíme, no niekedy môže byť príliš široký. Aj keď nie každý komponent musí byť v Bootstrape úplne responzívny, tento citlivý prístup je o redukcii prepisov CSS tým, že vás núti pridávať štýly, keď sa zväčšuje zobrazovaná oblasť.
V rámci Bootstrapu to najzreteľnejšie uvidíte v našich mediálnych dopytoch. Vo väčšine prípadov používame min-width
dotazy, ktoré sa začínajú uplatňovať v konkrétnom bode zlomu a pokračujú cez vyššie body zlomu. Napríklad a .d-none
platí od min-width: 0
do nekonečna. Na druhej strane .d-md-none
platí a od stredného bodu zlomu vyššie.
Niekedy použijeme, max-width
keď si to vyžaduje prirodzená zložitosť komponentu. Niekedy sú tieto prepísania funkčne a mentálne jasnejšie na implementáciu a podporu ako prepisovanie základných funkcií z našich komponentov. Snažíme sa obmedziť tento prístup, ale z času na čas ho použijeme.
triedy
Okrem nášho Reboot, šablóny so štýlmi normalizácie medzi prehliadačmi, sa všetky naše štýly zameriavajú na používanie tried ako selektorov. To znamená vyhýbať sa selektorom typu (napr. input[type="text"]
) a cudzím nadradeným triedam (napr. .parent .child
), ktoré spôsobujú, že štýly sú príliš špecifické na to, aby ich bolo možné jednoducho prepísať.
Komponenty ako také by mali byť postavené so základnou triedou, v ktorej sú umiestnené spoločné, neprepisovateľné páry vlastnosť-hodnota. Napríklad .btn
a .btn-primary
. Používame .btn
pre všetky bežné štýly ako display
, padding
, a border-width
. Potom používame modifikátory, ako .btn-primary
je pridanie farby, farby pozadia, farby okraja atď.
Triedy modifikátorov by sa mali používať iba vtedy, ak existuje viacero vlastností alebo hodnôt, ktoré sa majú zmeniť vo viacerých variantoch. Modifikátory nie sú vždy potrebné, takže sa uistite, že skutočne ukladáte riadky kódu a predchádzate zbytočným prepisom pri ich vytváraní. Dobrými príkladmi modifikátorov sú naše farebné triedy motívov a varianty veľkostí.
z-indexové škály
Bootstrap má dve z-index
škály – prvky v rámci komponentu a komponenty prekrytia.
Prvky komponentov
- Niektoré komponenty v Bootstrape sú vytvorené s prekrývajúcimi sa prvkami, aby sa zabránilo dvojitým okrajom bez úpravy
border
vlastnosti. Napríklad skupiny tlačidiel, skupiny vstupov a stránkovanie. - Tieto komponenty zdieľajú štandardnú
z-index
škálu0
cez3
. 0
je predvolené (počiatočné),1
je:hover
,2
je:active
/.active
a3
je:focus
.- Tento prístup zodpovedá našim očakávaniam najvyššej užívateľskej priority. Ak je prvok zameraný, je viditeľný a v pozornosti používateľa. Aktívne prvky sú druhé najvyššie, pretože označujú stav. Ukážka je tretia najvyššia, pretože naznačuje zámer používateľa, ale umiestniť sa dá takmer na čokoľvek .
Prekrývacie komponenty
Bootstrap obsahuje niekoľko komponentov, ktoré fungujú ako nejaké prekrytie. To zahŕňa, v poradí od najvyššej z-index
, rozbaľovacie ponuky, pevné a pevné navigačné panely, modály, popisy a kontextové okná. Tieto komponenty majú svoju vlastnú z-index
stupnicu, ktorá začína na 1000
. Toto štartovacie číslo bolo zvolené ľubovoľne a slúži ako malý nárazník medzi našimi štýlmi a vlastnými štýlmi vášho projektu.
Každý prekryvný komponent z-index
mierne zvyšuje svoju hodnotu takým spôsobom, že bežné princípy používateľského rozhrania umožňujú, aby prvky zamerané na používateľa alebo prvky, na ktoré sa vznášali, zostali stále v dohľade. Napríklad modal je blokovanie dokumentov (napr. nemôžete vykonať žiadnu inú akciu okrem akcie modalu), takže to umiestnime nad naše navigačné lišty.
Viac sa o tom dozviete na našej z-index
stránke rozloženia .
HTML a CSS cez JS
Vždy, keď je to možné, uprednostňujeme písanie HTML a CSS pred JavaScriptom. Vo všeobecnosti sú HTML a CSS produktívnejšie a prístupnejšie pre viac ľudí na rôznych úrovniach skúseností. HTML a CSS sú vo vašom prehliadači tiež rýchlejšie ako JavaScript a váš prehliadač vám vo všeobecnosti poskytuje veľa funkcií.
Týmto princípom je naše prvotriedne JavaScript API využívajúce data
atribúty. Na používanie našich pluginov JavaScript nemusíte písať takmer žiadny JavaScript; namiesto toho napíšte HTML. Prečítajte si o tom viac na našej stránke s prehľadom JavaScriptu .
Napokon, naše štýly stavajú na základnom správaní bežných webových prvkov. Vždy, keď je to možné, uprednostňujeme používanie toho, čo ponúka prehliadač. Napríklad môžete umiestniť .btn
triedu na takmer akýkoľvek prvok, ale väčšina prvkov neposkytuje žiadnu sémantickú hodnotu ani funkčnosť prehliadača. Takže namiesto toho používame <button>
s a <a>
s.
To isté platí pre zložitejšie komponenty. Aj keď by sme mohli napísať vlastný doplnok na overenie formulárov na pridávanie tried do nadradeného prvku na základe stavu vstupu, čím by sme mohli upraviť text na červenú, uprednostňujeme používanie :valid
/ :invalid
pseudoprvkov, ktoré nám poskytuje každý prehliadač.
Verejné služby
Užitočné triedy – predtým pomocníci v Bootstrap 3 – sú silným spojencom v boji proti nafúknutiu CSS a slabému výkonu stránky. Užitočná trieda je zvyčajne jeden nemenný pár vlastnosť-hodnota vyjadrený ako trieda (napr. .d-block
predstavuje display: block;
). Ich primárnou príťažlivosťou je rýchlosť používania pri písaní HTML a obmedzenie množstva vlastných CSS, ktoré musíte napísať.
Najmä pokiaľ ide o vlastné CSS, nástroje môžu pomôcť v boji proti zvyšujúcej sa veľkosti súboru znížením vašich najčastejšie sa opakujúcich párov hodnota-vlastnosť do jednotlivých tried. To môže mať vo vašich projektoch dramatický efekt.
Flexibilné HTML
Aj keď to nie je vždy možné, snažíme sa vyhnúť prílišnej dogmatickosti v našich požiadavkách HTML na komponenty. Preto sa v našich selektoroch CSS zameriavame na jednotlivé triedy a snažíme sa vyhnúť okamžitým selektorom detí ( >
). To vám dáva väčšiu flexibilitu pri implementácii a pomáha udržiavať naše CSS jednoduchšie a menej špecifické.
Kódové konvencie
Sprievodca kódom (od spolutvorcu Bootstrap, @mdo) dokumentuje, ako píšeme naše HTML a CSS v Bootstrape. Špecifikuje pokyny pre všeobecné formátovanie, predvolené hodnoty zdravého rozumu, poradie vlastností a atribútov a ďalšie.
Používame Stylelint na presadzovanie týchto a ďalších štandardov v našom Sass/CSS. Naša vlastná konfigurácia Stylelint je open source a je k dispozícii pre ostatných na použitie a rozšírenie.
Vnu-jar používame na presadzovanie štandardného a sémantického HTML, ako aj na zisťovanie bežných chýb.