Přístup
Seznamte se s hlavními principy, strategiemi a technikami používanými k vytvoření a údržbě Bootstrapu, abyste si jej mohli snadněji přizpůsobit a rozšířit sami.
Zatímco stránky Začínáme poskytují úvodní prohlídku projektu a toho, co nabízí, tento dokument se zaměřuje na to, proč děláme věci, které v Bootstrapu děláme. Vysvětluje naši filozofii budování na webu, aby se od nás ostatní mohli učit, přispívat s námi a pomáhat nám zlepšovat se.
Vidíte něco, co nezní správně, nebo by to možná šlo udělat lépe? Otevřete problém – rádi ho s vámi probereme.
Do každého z nich se ponoříme více v průběhu, ale na vysoké úrovni, zde je to, co řídí náš přístup.
- Komponenty by měly být responzivní a především mobilní
- Komponenty by měly být sestaveny se základní třídou a rozšířeny pomocí tříd modifikátorů
- Stavy komponent by se měly řídit běžnou stupnicí z-indexu
- Kdykoli je to možné, upřednostňujte implementaci HTML a CSS před JavaScriptem
- Kdykoli je to možné, používejte nad vlastními styly nástroje
- Kdykoli je to možné, vyhněte se vynucování přísných požadavků na HTML (dětské selektory)
Responzivní styly Bootstrapu jsou vytvořeny tak, aby byly responzivní, což je přístup, který je často označován jako mobile-first . Tento termín používáme v našich dokumentech a do značné míry s ním souhlasíme, ale někdy může být příliš široký. I když ne každá komponenta musí být v Bootstrapu zcela responzivní, tento citlivý přístup spočívá v omezení přepisů CSS tím, že vás nutí přidávat styly, když se výřez zvětšuje.
V rámci Bootstrapu to nejzřetelněji uvidíte v dotazech na média. Ve většině případů používáme min-widthdotazy, které se začnou uplatňovat v určitém bodu přerušení a procházejí vyššími body přerušení. Například a .d-noneplatí od min-width: 0do nekonečna. Na druhou stranu .d-md-noneplatí a od středního bodu zlomu a výše.
Někdy použijeme, max-widthkdyž to vyžaduje složitost součásti. Někdy je implementace a podpora těchto přepsání funkčně a mentálně jasnější než přepisování základních funkcí z našich komponent. Snažíme se tento přístup omezit, ale čas od času jej využijeme.
Kromě našeho Reboot, šablony stylů pro normalizaci napříč prohlížeči, se všechny naše styly zaměřují na použití tříd jako selektorů. To znamená vyhýbat se selektorům typu (např. input[type="text"]) a cizím nadřazeným třídám (např. .parent .child), které činí styly příliš specifickými, aby je bylo možné snadno přepsat.
Komponenty jako takové by měly být postaveny se základní třídou, která obsahuje společné, nepřepisovatelné páry vlastnost-hodnota. Například .btna .btn-primary. Používáme .btnpro všechny běžné styly jako display, padding, a border-width. Poté používáme modifikátory, jako .btn-primaryje přidání barvy, barvy pozadí, barvy okraje atd.
Třídy modifikátorů by se měly používat pouze v případě, že existuje více vlastností nebo hodnot, které lze změnit ve více variantách. Modifikátory nejsou vždy nutné, takže se ujistěte, že skutečně ukládáte řádky kódu a předcházíte zbytečným přepisům při jejich vytváření. Dobrými příklady modifikátorů jsou naše barevné třídy motivů a varianty velikostí.
Bootstrap má dvě z-indexměřítka – prvky v rámci komponenty a překryvné komponenty.
- Některé komponenty v Bootstrap jsou vytvořeny s překrývajícími se prvky, aby se zabránilo dvojitým okrajům bez úpravy
bordervlastnosti. Například skupiny tlačítek, vstupní skupiny a stránkování. - Tyto komponenty sdílejí standardní
z-indexměřítko0průchozí3. 0is default (Initial),1is:hover,2is:active/.active, and ,3is:focus.- Tento přístup odpovídá našim očekáváním nejvyšší uživatelské priority. Pokud je prvek zaměřen, je v dohledu a v pozornosti uživatele. Aktivní prvky jsou druhé nejvyšší, protože indikují stav. Umístění kurzoru je třetí nejvyšší, protože naznačuje záměr uživatele, ale umístit lze téměř cokoli .
Bootstrap obsahuje několik komponent, které fungují jako určitý druh překrytí. To zahrnuje, v pořadí od nejvyššího z-index, rozbalovací nabídky, pevné a pevné navigační panely, modály, popisky a vyskakovací okna. Tyto komponenty mají svou vlastní z-indexstupnici, která začíná na 1000. Toto počáteční číslo je náhodné a slouží jako malá vyrovnávací paměť mezi našimi styly a vlastními styly vašeho projektu.
Každá překryvná komponenta mírně zvyšuje svou z-indexhodnotu takovým způsobem, že běžné principy uživatelského rozhraní umožňují, aby prvky zaměřené na uživatele nebo prvky, na které se vznáší, zůstaly neustále v dohledu. Například modal je blokování dokumentů (např. nemůžete provést žádnou jinou akci kromě akce modalu), takže to dáme nad naše navigační lišty.
Více se o tom dozvíte na naší z-indexstránce rozvržení .
Kdykoli je to možné, dáváme přednost psaní HTML a CSS před JavaScriptem. Obecně platí, že HTML a CSS jsou plodnější a přístupné více lidem na různých úrovních zkušeností. HTML a CSS jsou také ve vašem prohlížeči rychlejší než JavaScript a váš prohlížeč vám obecně poskytuje mnoho funkcí.
Tento princip je naším prvotřídním dataatributem JavaScript API. Abyste mohli používat naše JavaScript pluginy, nepotřebujete psát téměř žádný JavaScript; místo toho napište HTML. Přečtěte si o tom více na naší stránce s přehledem JavaScriptu .
A konečně, naše styly staví na základním chování běžných webových prvků. Kdykoli je to možné, dáváme přednost tomu, co poskytuje prohlížeč. Například můžete umístit .btntřídu na téměř jakýkoli prvek, ale většina prvků neposkytuje žádnou sémantickou hodnotu ani funkčnost prohlížeče. Takže místo toho použijeme <button>s a <a>s.
Totéž platí pro složitější komponenty. I když bychom mohli napsat vlastní plugin pro ověřování formulářů, který by přidával třídy do nadřazeného prvku na základě stavu vstupu, což nám umožňuje stylovat text řekněme červeně, dáváme přednost použití :valid/ :invalidpseudoprvků, které nám poskytuje každý prohlížeč.
Obslužné třídy – dříve pomocníci v Bootstrap 3 – jsou mocným spojencem v boji proti nadýmání CSS a špatnému výkonu stránky. Užitková třída je typicky jeden neměnný pár vlastnost-hodnota vyjádřený jako třída (např. .d-blockreprezentuje display: block;). Jejich primární přitažlivost je rychlost použití při psaní HTML a omezení množství vlastních CSS, které musíte napsat.
Konkrétně pokud jde o vlastní CSS, mohou nástroje pomoci v boji proti zvětšující se velikosti souboru tím, že zredukují nejčastěji se opakující páry vlastnost-hodnota do jednotlivých tříd. To může mít ve vašich projektech dramatický efekt.
I když to není vždy možné, snažíme se vyhnout přílišnému dogmatismu v našich požadavcích HTML na komponenty. V našich selektorech CSS se tedy zaměřujeme na jednotlivé třídy a snažíme se vyhnout okamžitým selektorům dětí ( ~). To vám dává větší flexibilitu při implementaci a pomáhá udržovat naše CSS jednodušší a méně konkrétní.