Benadering

Terwyl die beginbladsye 'n inleidende toer van die projek bied en wat dit bied, fokus hierdie dokument op hoekom ons die dinge doen wat ons in Bootstrap doen. Dit verduidelik ons ​​filosofie om op die web te bou sodat ander by ons kan leer, saam met ons kan bydra en ons kan help om te verbeter.

Sien jy iets wat nie reg klink nie, of dalk beter gedoen kan word? Maak 'n kwessie oop — ons bespreek dit graag met jou.

Opsomming

Ons sal deurgaans meer in elk van hierdie duik, maar op 'n hoë vlak is dit wat ons benadering rig.

• Komponente moet reageer en mobiel-eerste wees
• Komponente moet met 'n basisklas gebou word en met wysigerklasse uitgebrei word
• Komponenttoestande moet 'n algemene z-indeks skaal gehoorsaam
• Indien moontlik, verkies 'n HTML- en CSS-implementering bo JavaScript
• Waar moontlik, gebruik nutsprogramme oor persoonlike style
• Waar moontlik, vermy die afdwinging van streng HTML-vereistes (kinderkeurders)

Responsief

Bootstrap se responsiewe style is gebou om responsief te wees, 'n benadering wat dikwels na verwys word as mobiele eerste . Ons gebruik hierdie term in ons dokumente en stem grootliks daarmee saam, maar soms kan dit te wyd wees. Alhoewel nie elke komponent heeltemal responsief in Bootstrap hoef te wees nie, gaan hierdie responsiewe benadering oor die vermindering van CSS-oortredings deur jou te druk om style by te voeg namate die viewport groter word.

Regoor Bootstrap sal jy dit die duidelikste sien in ons media-navrae. In die meeste gevalle gebruik ons min-width​​navrae wat by 'n spesifieke breekpunt begin toepas en deur die hoër breekpunte gaan. Byvoorbeeld, a .d-nonegeld van min-width: 0tot oneindig. Aan die ander kant is a .d-md-nonevan toepassing vanaf die medium breekpunt en op.

Soms sal ons gebruik max-widthwanneer 'n komponent se inherente kompleksiteit dit vereis. Soms is hierdie oortredings funksioneel en verstandelik duideliker om te implementeer en te ondersteun as om kernfunksies van ons komponente te herskryf. Ons streef daarna om hierdie benadering te beperk, maar sal dit van tyd tot tyd gebruik.

Klasse

Afgesien van ons Reboot, 'n kruisblaaier-normaliseringstylblad, poog al ons style om klasse as keurders te gebruik. Dit beteken om weg te bly van tipe keurders (bv. input[type="text"]) en vreemde ouerklasse (bv. .parent .child) wat style te spesifiek maak om maklik te ignoreer.

As sodanig, moet komponente gebou word met 'n basisklas wat algemene, nie-om-oorskryfbare eiendomswaarde-pare huisves nie. Byvoorbeeld, .btnen .btn-primary. Ons gebruik .btnvir al die algemene style soos display, padding, en border-width. Ons gebruik dan wysigers soos .btn-primaryom die kleur, agtergrondkleur, randkleur, ens.

Wysigerklasse moet slegs gebruik word wanneer daar veelvuldige eienskappe of waardes is wat oor verskeie variante verander moet word. Wysigers is nie altyd nodig nie, so maak seker dat jy werklik reëls kode stoor en onnodige oorskrywings voorkom wanneer jy dit skep. Goeie voorbeelde van wysigers is ons temakleurklasse en groottevariante.

z-indeks skale

Daar is twee z-indexskale in Bootstrap—elemente binne 'n komponent en oorlegkomponente.

Komponente

• Sommige komponente in Bootstrap is gebou met oorvleuelende elemente om dubbele grense te voorkom sonder om die bordereiendom te verander. Byvoorbeeld, knoppiegroepe, invoergroepe en paginering.
• Hierdie komponente deel 'n standaardskaal z-indexvan 0deur 3.
• 0is verstek (aanvanklik), 1is :hover, 2is :active/ .active, en 3is :focus.
• Hierdie benadering pas by ons verwagtinge van hoogste gebruikerprioriteit. As 'n element gefokus is, is dit in die oog en onder die gebruiker se aandag. Aktiewe elemente is tweede hoogste omdat hulle toestand aandui. Hover is derde hoogste omdat dit die gebruiker se bedoeling aandui, maar byna enigiets kan gesweef word.

Oorleg komponente

Bootstrap bevat verskeie komponente wat as 'n oorleg van een of ander aard funksioneer. Dit sluit in, in volgorde van die hoogste z-index, aftreklys, vaste en taai navigasiebalke, modale, nutswenke en popovers. Hierdie komponente het hul eie z-indexskaal wat begin by 1000. Hierdie beginnommer is arbitrêr gekies en dien as 'n klein buffer tussen ons style en jou projek se pasgemaakte style.

Elke oorlegkomponent verhoog sy z-indexwaarde effens op so 'n manier dat algemene UI-beginsels gebruikersgefokusde of gesweefde elemente te alle tye in sig laat bly. Byvoorbeeld, 'n modaal is dokumentblokkering (bv. jy kan geen ander aksie neem behalwe vir die modaal se aksie nie), so ons sit dit bo ons navigasiebalke.

Kom meer te wete hieroor in ons z-indexuitlegbladsy .

HTML en CSS oor JS

Waar moontlik, verkies ons om HTML en CSS oor JavaScript te skryf. Oor die algemeen is HTML en CSS meer produktief en toeganklik vir meer mense van alle verskillende ervaringsvlakke. HTML en CSS is ook vinniger in jou blaaier as JavaScript, en jou blaaier bied oor die algemeen baie funksionaliteit vir jou.

Hierdie beginsel is ons eersteklas JavaScript API wat datakenmerke gebruik. Jy hoef nie byna enige JavaScript te skryf om ons JavaScript-inproppe te gebruik nie; skryf eerder HTML. Lees meer hieroor in ons JavaScript-oorsigbladsy .

Laastens bou ons style op die fundamentele gedrag van algemene webelemente. Waar moontlik, verkies ons om te gebruik wat die blaaier bied. Byvoorbeeld, jy kan 'n .btnklas op byna enige element plaas, maar die meeste elemente bied geen semantiese waarde of blaaierfunksies nie. Dus gebruik ons ​​eerder <button>s en <a>s.

Dieselfde geld vir meer komplekse komponente. Alhoewel ons ons eie vormvalidasie-inprop kan skryf om klasse by 'n ouerelement te voeg gebaseer op 'n invoer se toestand, waardeur ons die teks kan styl, sê rooi, verkies ons om die :valid/ :invalidpseudo-elemente te gebruik wat elke blaaier ons verskaf.

Nutsprogramme

Nutsklasse - voorheen helpers in Bootstrap 3 - is 'n kragtige bondgenoot in die stryd teen CSS-opblaas en swak bladsyprestasie. 'n Nutklas is tipies 'n enkele, onveranderlike eiendom-waarde-paring uitgedruk as 'n klas (bv. .d-blockverteenwoordig display: block;). Hul primêre aantrekkingskrag is die spoed van gebruik tydens die skryf van HTML en die beperking van die hoeveelheid persoonlike CSS wat u moet skryf.

Spesifiek met betrekking tot pasgemaakte CSS, kan nutsprogramme help om toenemende lêergrootte te bekamp deur jou mees algemeen herhaalde eiendom-waarde-pare in enkele klasse te verminder. Dit kan 'n dramatiese effek op skaal in jou projekte hê.

Buigsame HTML

Alhoewel dit nie altyd moontlik is nie, streef ons daarna om te vermy om te dogmaties te wees in ons HTML-vereistes vir komponente. Ons fokus dus op enkelklasse in ons CSS-keurders en probeer om onmiddellike kinderkeurders te vermy ( >). Dit gee jou meer buigsaamheid in jou implementering en help om ons CSS eenvoudiger en minder spesifiek te hou.

Kode konvensies

Kodegids (van Bootstrap mede-skepper, @mdo) dokumenteer hoe ons ons HTML en CSS oor Bootstrap skryf. Dit spesifiseer riglyne vir algemene formatering, gesonde verstand verstek, eiendom en kenmerk bestellings, en meer.

Ons gebruik Stylelint om hierdie standaarde en meer in ons Sass/CSS af te dwing. Ons pasgemaakte Stylelint-konfigurasie is oopbron en beskikbaar vir ander om te gebruik en uit te brei.

Ons gebruik vnu-jar om standaard en semantiese HTML af te dwing, sowel as om algemene foute op te spoor.