Pristop

Medtem ko strani za začetek ponujajo uvodni ogled projekta in njegove ponudbe, se ta dokument osredotoča na to, zakaj počnemo stvari, ki jih počnemo v Bootstrapu. Pojasnjuje našo filozofijo gradnje na spletu, tako da se lahko drugi učijo od nas, prispevajo z nami in nam pomagajo izboljšati.

Vidite nekaj, kar ne zveni prav, ali pa bi morda lahko naredili bolje? Odprite težavo – z veseljem bi razpravljali z vami.

Povzetek

Vseskozi se bomo podrobneje poglobili v vsakega od teh, a na visoki ravni je tukaj tisto, kar vodi naš pristop.

• Komponente morajo biti odzivne in mobilne
• Komponente je treba zgraditi z osnovnim razredom in razširiti z modifikatorskimi razredi
• Stanja komponent bi morala upoštevati skupno lestvico indeksa z
• Kadarkoli je mogoče, raje uporabite implementacijo HTML in CSS kot JavaScript
• Če je le mogoče, uporabite pripomočke namesto slogov po meri
• Kadarkoli je mogoče, se izogibajte uveljavljanju strogih zahtev HTML (izbirniki otrok)

Odzivna

Odzivni slogi Bootstrapa so ustvarjeni tako, da so odzivni, pristop, ki se pogosto imenuje mobilno na prvem mestu . Ta izraz uporabljamo v naših dokumentih in se z njim večinoma strinjamo, vendar je včasih lahko preširok. Čeprav ne sme biti vsaka komponenta popolnoma odzivna v Bootstrapu, gre pri tem odzivnem pristopu za zmanjšanje preglasitev CSS tako, da vas prisili, da dodate sloge, ko se vidno polje poveča.

V Bootstrapu boste to najbolj jasno videli v naših medijskih poizvedbah. V večini primerov uporabljamo min-widthpoizvedbe, ki se začnejo uporabljati na določeni prelomni točki in se prenašajo skozi višje prelomne točke. Na primer, a .d-nonevelja od min-width: 0do neskončno. Po drugi strani pa a .d-md-nonevelja od srednje prelomne točke naprej.

Včasih ga bomo uporabili max-width, ko to zahteva inherentna zapletenost komponente. Včasih so te preglasitve funkcionalno in miselno jasnejše za implementacijo in podporo kot prepisovanje osnovne funkcionalnosti iz naših komponent. Prizadevamo si omejiti ta pristop, vendar ga bomo občasno uporabili.

Razredi

Poleg našega ponovnega zagona, tabele slogov za normalizacijo med brskalniki, vsi naši slogi uporabljajo razrede kot izbirnike. To pomeni izogibanje izbirnikom tipov (npr. input[type="text"]) in tujim nadrejenim razredom (npr. .parent .child), zaradi katerih so slogi preveč specifični, da bi jih zlahka preglasili.

Kot take bi morale biti komponente zgrajene z osnovnim razredom, ki vsebuje običajne pare lastnost-vrednost, ki jih ni treba preglasiti. Na primer, .btnin .btn-primary. Uporabljamo .btnza vse pogoste sloge, kot displayso padding, in border-width. Nato uporabimo modifikatorje, kot .btn-primaryje dodajanje barve, barve ozadja, barve obrobe itd.

Razrede modifikatorjev je treba uporabiti le, če obstaja več lastnosti ali vrednosti, ki jih je treba spremeniti v več različicah. Modifikatorji niso vedno potrebni, zato se prepričajte, da dejansko shranjujete vrstice kode in preprečujete nepotrebne preglasitve, ko jih ustvarjate. Dobri primeri modifikatorjev so naši tematski barvni razredi in različice velikosti.

z-indeks lestvice

V Bootstrapu sta dve z-indexlestvici – elementi znotraj komponente in prekrivne komponente.

Sestavni elementi

• Nekatere komponente v Bootstrapu so zgrajene s prekrivajočimi se elementi, da preprečijo dvojne obrobe brez spreminjanja borderlastnosti. Na primer skupine gumbov, skupine vnosov in številčenje strani.
• Te komponente imajo skupno standardno z-indexlestvico 0skozi 3.
• 0je privzeto (začetno), 1je :hover, 2je :active/ .activein 3je :focus.
• Ta pristop ustreza našim pričakovanjem o najvišji uporabniški prioriteti. Če je element fokusiran, je v vidnem polju in v uporabnikovi pozornosti. Aktivni elementi so drugi najvišji, ker označujejo stanje. Lebdenje je tretje najvišje, ker označuje namen uporabnika, vendar je mogoče premakniti skoraj vse .

Prekrivne komponente

Bootstrap vključuje več komponent, ki delujejo kot neke vrste prekrivanje. To vključuje, po najvišjem vrstnem redu z-index, spustne menije, fiksne in lepljive vrstice za krmarjenje, modale, namige orodij in pojavna okna. Te komponente imajo lastno z-indexlestvico, ki se začne pri 1000. Ta začetna številka je bila izbrana poljubno in služi kot majhen medpomnilnik med našimi slogi in slogi po meri vašega projekta.

Vsaka prekrivna komponenta z-indexnekoliko poveča svojo vrednost na tak način, da skupna načela uporabniškega vmesnika omogočajo, da elementi, osredotočeni na uporabnika ali na katere lebdi lebdeč, ostanejo ves čas vidni. Na primer, modal blokira dokument (npr. ne morete izvesti nobenega drugega dejanja, razen dejanja modala), zato smo to postavili nad naše vrstice za krmarjenje.

Več o tem na naši z-indexstrani s postavitvijo .

HTML in CSS prek JS

Če je le mogoče, raje pišemo HTML in CSS namesto JavaScripta. Na splošno sta HTML in CSS bolj plodna in dostopna več ljudem z različnimi stopnjami izkušenj. HTML in CSS sta tudi v vašem brskalniku hitrejša od JavaScripta in vaš brskalnik vam na splošno ponuja veliko funkcij.

To načelo je naš prvorazredni JavaScript API, ki uporablja dataatribute. Za uporabo naših vtičnikov JavaScript vam ni treba napisati skoraj nobenega JavaScripta; namesto tega napišite HTML. Preberite več o tem na naši strani s pregledom JavaScripta .

Nazadnje naši slogi temeljijo na temeljnem vedenju običajnih spletnih elementov. Če je le mogoče, raje uporabimo tisto, kar ponuja brskalnik. Na primer, razred lahko postavite .btnna skoraj kateri koli element, vendar večina elementov ne zagotavlja nobene semantične vrednosti ali funkcionalnosti brskalnika. Namesto tega uporabljamo <button>s in <a>s.

Enako velja za bolj zapletene komponente. Medtem ko bi lahko napisali lasten vtičnik za preverjanje obrazca, da bi dodali razrede nadrejenemu elementu na podlagi stanja vnosa, s čimer bi nam omogočili, da besedilo oblikujemo rdeče, raje uporabljamo psevdoelemente :valid/ :invalid, ki nam jih ponuja vsak brskalnik.

Pripomočki

Razredi pripomočkov – prej pomočniki v Bootstrap 3 – so močan zaveznik v boju proti napihnjenosti CSS in slabemu delovanju strani. Razred uporabnosti je običajno en sam, nespremenljiv par lastnost-vrednost, izražen kot razred (npr. .d-blockpredstavlja display: block;). Njihova glavna privlačnost je hitrost uporabe med pisanjem HTML in omejevanje količine CSS po meri, ki ga morate napisati.

Zlasti v zvezi s CSS po meri lahko pripomočki pomagajo pri boju proti povečanju velikosti datoteke tako, da zmanjšajo najpogosteje ponavljajoče se pare lastnost-vrednost v posamezne razrede. To ima lahko dramatičen učinek v obsegu vaših projektov.

Prilagodljiv HTML

Čeprav to ni vedno mogoče, se trudimo, da ne bi bili preveč dogmatični v naših zahtevah HTML za komponente. Zato se osredotočamo na posamezne razrede v naših izbirnikih CSS in se poskušamo izogniti neposrednim podrejenim izbirnikom ( >). To vam daje večjo prilagodljivost pri izvajanju in pomaga ohranjati naš CSS preprostejši in manj specifičen.

Kodne konvencije

Vodnik po kodi (od soustvarjalca Bootstrapa, @mdo) dokumentira, kako pišemo naš HTML in CSS v Bootstrapu. Določa smernice za splošno oblikovanje, zdravorazumske privzete nastavitve, vrstni red lastnosti in atributov in drugo.

Uporabljamo Stylelint za uveljavljanje teh standardov in več v našem Sass/CSS. Naša prilagojena konfiguracija Stylelint je odprtokodna in na voljo drugim za uporabo in razširitev.

Vnu -jar uporabljamo za uveljavljanje standardnega in semantičnega HTML-ja ter za odkrivanje pogostih napak.