Source

Prístup

Dozviete sa 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 sami 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-widthdotazy, ktoré sa začínajú uplatňovať v konkrétnom bode zlomu a pokračujú cez vyššie body zlomu. Napríklad a .d-noneplatí od min-width: 0do nekonečna. Na druhej strane .d-md-noneplatí a od stredného bodu zlomu vyššie.

Niekedy použijeme, max-widthkeď 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 .btna .btn-primary. Používame .btnpre všetky bežné štýly ako display, padding, a border-width. Potom používame modifikátory, ako .btn-primaryje 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 bordervlastnosti. Napríklad skupiny tlačidiel, skupiny vstupov a stránkovanie.
  • Tieto komponenty zdieľajú štandardnú z-indexškálu 0cez 3.
  • 0je predvolené (počiatočné), 1je :hover, 2je :active/ .activea , 3je :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-indexstupnicu, ktorá začína na 1000. Toto počiatočné číslo je náhodné 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 mierne zvyšuje svoju z-indexhodnotu 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 viditeľné. 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-indexstrá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í.

Tento princíp je náš prvotriedny JavaScript API je dataatribú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ť .btntriedu 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, čo nám umožňuje upraviť text na červenú, uprednostňujeme používanie :valid/ :invalidpseudoprvkov, 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-blockpredstavuje 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é.