Source

Pristup

Naučite o vodećim načelima, strategijama i tehnikama koje se koriste za izgradnju i održavanje Bootstrapa kako biste ga sami lakše prilagodili i proširili.

Dok početne stranice pružaju uvodni obilazak projekta i onoga što nudi, ovaj se dokument fokusira na to zašto radimo stvari koje radimo u Bootstrapu. Objašnjava našu filozofiju izgradnje na webu kako bi drugi mogli učiti od nas, pridonositi s nama i pomoći nam da se poboljšamo.

Vidite nešto što ne zvuči kako treba ili bi se možda moglo bolje? Otvorite problem — voljeli bismo razgovarati s vama.

Sažetak

Detaljnije ćemo se pozabaviti svakim od njih, ali na visokoj razini, evo što vodi naš pristup.

  • Komponente bi trebale biti osjetljive i na prvom mjestu mobilne
  • Komponente bi trebale biti izgrađene s baznom klasom i proširene putem modifikatorskih klasa
  • Stanja komponenti trebaju se pridržavati zajedničke skale z-indeksa
  • Kad god je moguće, dajte prednost HTML i CSS implementaciji umjesto JavaScripta
  • Kad god je moguće, koristite pomoćne programe umjesto prilagođenih stilova
  • Kad god je to moguće, izbjegavajte provođenje strogih HTML zahtjeva (selektori djece)

Uzvratni

Bootstrapovi responzivni stilovi izgrađeni su da budu responzivni, pristup koji se često naziva " mobilno na prvom mjestu" . Koristimo ovaj izraz u našim dokumentima i uglavnom se s njim slažemo, ali ponekad može biti preširok. Iako ne mora svaka komponenta biti u potpunosti responzivna u Bootstrapu, ovaj responzivni pristup se odnosi na smanjenje nadjačavanja CSS-a tjerajući vas da dodajete stilove kako prozor za prikaz postaje veći.

U cijelom Bootstrapu to ćete najjasnije vidjeti u našim medijskim upitima. U većini slučajeva koristimo min-widthupite koji se počinju primjenjivati ​​na određenoj prijelomnoj točki i prenose se kroz više prijelomne točke. Na primjer, a .d-nonevrijedi od min-width: 0do beskonačno. S druge strane, a .d-md-nonese primjenjuje od srednje prijelomne točke naviše.

Ponekad ćemo ga koristiti max-widthkada to zahtijeva inherentna složenost komponente. Ponekad je ova nadjačavanja funkcionalno i mentalno jasnija za implementaciju i podršku od ponovnog pisanja temeljne funkcionalnosti iz naših komponenti. Nastojimo ograničiti ovaj pristup, ali ćemo ga koristiti s vremena na vrijeme.

Nastava

Osim našeg ponovnog pokretanja, tablice stilova za normalizaciju na više preglednika, svi naši stilovi imaju za cilj korištenje klasa kao selektora. To znači da se klonite selektora tipa (npr. input[type="text"]) i stranih roditeljskih klasa (npr. .parent .child) koje stilove čine previše specifičnima da bi se lako nadjačali.

Kao takve, komponente bi trebale biti izgrađene s osnovnom klasom koja sadrži uobičajene parove svojstvo-vrijednost koji se ne smiju poništiti. Na primjer, .btni .btn-primary. Koristimo .btnza sve uobičajene stilove kao što su display, paddingi border-width. Zatim koristimo modifikatore poput .btn-primarydodavanja boje, boje pozadine, boje ruba itd.

Klase modifikatora trebaju se koristiti samo kada postoji više svojstava ili vrijednosti koje treba promijeniti u više varijanti. Modifikatori nisu uvijek potrebni, stoga budite sigurni da stvarno spremate retke koda i sprječavate nepotrebna nadjačavanja kada ih stvarate. Dobri primjeri modifikatora su naše tematske klase boja i varijante veličine.

ljestvice z-indeksa

U Bootstrapu postoje dvije z-indexljestvice — elementi unutar komponente i preklapajuće komponente.

Sastavni elementi

  • Neke komponente u Bootstrapu izgrađene su s preklapajućim elementima kako bi se spriječile dvostruke granice bez izmjene bordersvojstva. Na primjer, grupe gumba, grupe unosa i označavanje stranica.
  • Ove komponente dijele standardnu z-index​​skalu od 0kroz 3.
  • 0je zadano (početno), 1je :hover, 2je :active/ .activei , 3je :focus.
  • Ovaj pristup odgovara našim očekivanjima najvišeg korisničkog prioriteta. Ako je element fokusiran, on je u vidokrugu i na korisnikovoj je pozornosti. Aktivni elementi su drugi po veličini jer označavaju stanje. Lebdenje je treće po veličini jer ukazuje na namjeru korisnika, ali može se lebdjeti gotovo sve .

Prekrivajuće komponente

Bootstrap uključuje nekoliko komponenti koje funkcioniraju kao neka vrsta preklapanja. To uključuje, redoslijedom najviših z-index, padajuće izbornike, fiksne i ljepljive navigacijske trake, modalne prikaze, opise alata i skočne prozore. Ove komponente imaju vlastitu z-indexljestvicu koja počinje na 1000. Ovaj početni broj je slučajan i služi kao mali međuspremnik između naših stilova i prilagođenih stilova vašeg projekta.

Svaka komponenta preklapanja malo povećava svoju z-indexvrijednost na takav način da zajednički principi korisničkog sučelja dopuštaju da elementi usmjereni korisniku ili elementi nad kojima lebde mišem ostanu u pogledu cijelo vrijeme. Na primjer, modal je blokiranje dokumenta (npr. ne možete poduzeti nijednu drugu radnju osim radnje modala), pa smo to postavili iznad naših navigacijskih traka.

Saznajte više o tome na našoj z-indexstranici izgleda .

HTML i CSS preko JS-a

Kad god je to moguće, radije pišemo HTML i CSS umjesto JavaScripta. Općenito, HTML i CSS su plodniji i pristupačniji većem broju ljudi različitih razina iskustva. HTML i CSS također su brži u vašem pregledniku od JavaScripta, a vaš preglednik vam općenito pruža mnogo funkcionalnosti.

Ovo načelo su naši prvoklasni JavaScript API dataatributi. Ne morate pisati gotovo nikakav JavaScript da biste koristili naše JavaScript dodatke; umjesto toga napišite HTML. Pročitajte više o tome na našoj stranici s pregledom JavaScripta .

Na kraju, naši se stilovi grade na temeljnom ponašanju uobičajenih web elemenata. Kad god je to moguće, radije koristimo ono što preglednik nudi. Na primjer, možete staviti .btnklasu na gotovo bilo koji element, ali većina elemenata ne pruža nikakvu semantičku vrijednost ili funkcionalnost preglednika. Umjesto toga, koristimo <button>s i <a>s.

Isto vrijedi i za složenije komponente. Iako bismo mogli napisati vlastiti dodatak za provjeru valjanosti obrasca za dodavanje klasa nadređenom elementu na temelju stanja unosa, čime bismo mogli stilizirati tekst tako da kažemo crveno, radije koristimo :valid/ :invalidpseudo-elemente koje nam nudi svaki preglednik.

Komunalije

Klase korisnih programa—nekadašnji pomagači u Bootstrapu 3—moćan su saveznik u borbi protiv prenapuhanosti CSS-a i loše izvedbe stranice. Klasa korisnosti obično je jedno, nepromjenjivo uparivanje svojstva-vrijednosti izraženo kao klasa (npr. .d-blockpredstavlja display: block;). Njihova primarna privlačnost je brzina korištenja tijekom pisanja HTML-a i ograničenje količine prilagođenog CSS-a koji morate napisati.

Konkretno što se tiče prilagođenog CSS-a, uslužni programi mogu pomoći u borbi protiv povećanja veličine datoteke reduciranjem parova svojstava-vrijednosti koji se najčešće ponavljaju u pojedinačne klase. To može imati dramatičan učinak na razini vaših projekata.

Fleksibilni HTML

Iako to nije uvijek moguće, nastojimo izbjeći pretjeranu dogmatičnost u našim HTML zahtjevima za komponente. Stoga se fokusiramo na pojedinačne klase u našim CSS selektorima i pokušavamo izbjeći neposredne podređene selektore ( >). To vam daje veću fleksibilnost u vašoj implementaciji i pomaže da naš CSS bude jednostavniji i manje specifičan.