Pristup

Dok stranice za početak pružaju uvodni obilazak projekta i onoga što nudi, ovaj dokument se 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, doprinijeti 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 učiniti bolje? Otvorite pitanje — voljeli bismo da o njemu razgovaramo s vama.

Sažetak

Detaljnije ćemo uroniti u svaki od njih, ali na visokom nivou, evo šta vodi naš pristup.

• Komponente bi trebale biti osjetljive i prvenstveno mobilne
• Komponente bi trebale biti izgrađene s osnovnom klasom i proširene putem modifikatorskih klasa
• Stanja komponenti treba da se pridržavaju uobičajene skale z indeksa
• Kad god je moguće, preferirajte HTML i CSS implementaciju u odnosu na JavaScript
• Kad god je moguće, koristite uslužne programe umjesto prilagođenih stilova
• Kad god je moguće, izbjegavajte nametanje strogih HTML zahtjeva (dječiji selektori)

Responsive

Bootstrap-ovi responzivni stilovi su napravljeni da budu responzivni, pristup koji se često naziva mobile-first . Koristimo ovaj izraz u našim dokumentima i u velikoj mjeri se slažemo s njim, ali ponekad može biti preširok. Iako ne mora svaka komponenta biti u potpunosti prilagodljiva u Bootstrapu, ovaj responzivni pristup se odnosi na smanjenje CSS nadjačavanja tako što vas tjera da dodate stilove kako okvir za prikaz postaje veći.

Preko Bootstrapa, to ćete najjasnije vidjeti u našim medijskim upitima. U većini slučajeva koristimo min-widthupite koji počinju da se primenjuju na određenoj tački prekida i prenose se kroz više tačke prekida. Na primjer, a .d-noneprimjenjuje se od min-width: 0do beskonačnosti. S druge strane, a .d-md-noneprimjenjuje se od srednje tačke prekida i naviše.

Ponekad ćemo koristiti max-widthkada inherentna složenost komponente to zahtijeva. S vremena na vrijeme, ova nadjačavanja su funkcionalno i mentalno jasnija za implementaciju i podršku nego prepisivanje osnovne funkcionalnosti iz naših komponenti. Nastojimo da ograničimo ovaj pristup, ali ćemo ga s vremena na vrijeme koristiti.

Casovi

Osim našeg Reboot-a, lista stilova za normalizaciju među pretraživačima, svi naši stilovi imaju za cilj korištenje klasa kao selektora. To znači izbjegavanje selektora tipova (npr. input[type="text"]) i stranih roditeljskih klasa (npr. .parent .child) koje stilove čine previše specifičnim da bi ih se lako moglo zamijeniti.

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

Modifikatorske klase treba koristiti samo kada postoji više svojstava ili vrijednosti koje treba promijeniti u više varijanti. Modifikatori nisu uvijek potrebni, stoga budite sigurni da zapravo spremate redove koda i sprječavate nepotrebna nadjačavanja prilikom njihovog kreiranja. Dobri primjeri modifikatora su naše klase boja teme i varijante veličine.

z-indeks skale

Postoje dvije z-indexskale u Bootstrapu – elementi unutar komponente i komponente preklapanja.

Komponentni elementi

• Neke komponente u Bootstrapu su izgrađene sa elementima koji se preklapaju kako bi se spriječile dvostruke granice bez mijenjanja bordersvojstva. Na primjer, grupe dugmadi, grupe unosa i paginacija.
• Ove komponente dijele standardnu z-index​​skalu od 0do 3.
• 0je zadano (početno), 1je :hover, 2je :active/ .activei 3je :focus.
• Ovaj pristup odgovara našim očekivanjima najvišeg prioriteta korisnika. Ako je element fokusiran, on je na vidiku i na pažnji korisnika. Aktivni elementi su drugi po veličini jer ukazuju na stanje. Hover je treći po veličini jer ukazuje na namjeru korisnika, ali gotovo sve se može lebdeti.

Komponente preklapanja

Bootstrap uključuje nekoliko komponenti koje funkcioniraju kao neka vrsta preklapanja. Ovo uključuje, prema najvišem redu z-index, padajuće menije, fiksne i ljepljive navigacijske trake, modale, opise alata i skočne prozore. Ove komponente imaju svoju z-indexskalu koja počinje na 1000. Ovaj početni broj je odabran proizvoljno i služi kao mali tampon između naših stilova i prilagođenih stilova vašeg projekta.

Svaka komponenta preklapanja malo povećava svoju z-indexvrijednost na način da uobičajeni principi korisničkog sučelja omogućavaju da elementi fokusirani na korisnika ili lebdeći lebde u svakom trenutku ostanu u vidokrugu. Na primjer, modal je blokiranje dokumenta (npr. ne možete poduzeti nijednu drugu radnju osim radnje modala), tako da smo to stavili iznad naših navigacijskih traka.

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

HTML i CSS preko JS-a

Kad god je to moguće, radije pišemo HTML i CSS u odnosu na JavaScript. Općenito, HTML i CSS su plodniji i dostupniji većem broju ljudi svih različitih nivoa iskustva. HTML i CSS su takođe brži u vašem pretraživaču od JavaScripta, a vaš pretraživač vam generalno pruža veliku funkcionalnost.

Ovaj princip je naš prvoklasni JavaScript API koji koristi dataatribute. 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 sa pregledom JavaScripta .

Konačno, naši stilovi se grade na fundamentalnom ponašanju uobičajenih web elemenata. Kad god je to moguće, radije koristimo ono što pretraživač nudi. Na primjer, možete staviti .btnklasu na gotovo svaki element, ali većina elemenata ne pruža nikakvu semantičku vrijednost ili funkcionalnost pretraživača. Dakle, umjesto toga, koristimo <button>s i <a>s.

Isto važi i za složenije komponente. Iako bismo mogli napisati naš vlastiti dodatak za provjeru valjanosti obrasca za dodavanje klasa roditeljskom elementu na osnovu stanja unosa, omogućavajući nam na taj način da stiliziramo tekst, recimo crveni, mi više volimo koristiti :valid/ :invalidpseudo-elemente koji nam svaki pretraživač nudi.

Komunalne usluge

Uslužne klase—ranije pomoćnice u Bootstrapu 3—su moćan saveznik u borbi protiv prenatrpanosti CSS-a i loših performansi stranica. Uslužna klasa je tipično jedno, nepromjenljivo uparivanje svojstvo-vrijednost izraženo kao klasa (npr. .d-blockpredstavlja display: block;). Njihova primarna privlačnost je brzina upotrebe prilikom pisanja HTML-a i ograničavanje količine prilagođenog CSS-a koji morate napisati.

Konkretno u vezi sa prilagođenim CSS-om, uslužni programi mogu pomoći u borbi protiv povećanja veličine datoteke smanjenjem vaših najčešće ponavljanih parova svojstva-vrijednost u jednu klasu. Ovo može imati dramatičan efekat u vašim projektima.

Fleksibilan HTML

Iako to nije uvijek moguće, nastojimo izbjeći pretjeranu dogmatiku 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 selektore djece ( >). Ovo vam daje veću fleksibilnost u implementaciji i pomaže da naš CSS bude jednostavniji i manje specifičan.

Kodne konvencije

Vodič za kode (od ko-kreatora Bootstrapa, @mdo) dokumentira kako pišemo naš HTML i CSS preko Bootstrapa. On navodi smjernice za općenito formatiranje, zadane postavke zdravog razuma, redoslijed svojstava i atributa i još mnogo toga.

Koristimo Stylelint za provođenje ovih standarda i više u našem Sass/CSS-u. Naša prilagođena Stylelint konfiguracija je otvorenog koda i dostupna je drugima za korištenje i proširenje.

Koristimo vnu-jar za sprovođenje standardnog i semantičkog HTML-a, kao i za otkrivanje uobičajenih grešaka.