Alproksimiĝo

Lernu pri la gvidprincipoj, strategioj kaj teknikoj uzataj por konstrui kaj konservi Bootstrap, por ke vi povu pli facile personecigi kaj etendi ĝin mem.

Dum la komencaj paĝoj disponigas enkondukan turneon de la projekto kaj kion ĝi ofertas, ĉi tiu dokumento fokusiĝas pri kial ni faras tion, kiujn ni faras en Bootstrap. Ĝi klarigas nian filozofion konstrui en la reto por ke aliaj povu lerni de ni, kontribui kun ni kaj helpi nin plibonigi.

Vidu ion, kio ne sonas ĝuste, aŭ eble fareblas pli bone? Malfermu aferon — ni ŝatus diskuti ĝin kun vi.

Resumo

Ni plonĝos en ĉiun el ĉi tiuj pli, sed je alta nivelo, jen kio gvidas nian aliron.

• Komponantoj devas esti respondemaj kaj unue moveblaj
• Komponantoj devus esti konstruitaj kun baza klaso kaj etenditaj per modifiklasoj
• Komponantaj ŝtatoj devus obei oftan z-indeksan skalon
• Kiam ajn eblas, preferu HTML- kaj CSS-efektivigon ol JavaScript
• Kiam ajn eblas, uzu ilojn super kutimaj stiloj
• Kiam ajn eblas, evitu devigi striktajn HTML-postulojn (infanaj elektiloj)

Respondema

La respondemaj stiloj de Bootstrap estas konstruitaj por esti respondemaj, aliro, kiun oni ofte nomas mobile-unue . Ni uzas ĉi tiun terminon en niaj dokumentoj kaj plejparte konsentas kun ĝi, sed foje ĝi povas esti tro larĝa. Kvankam ne ĉiu komponanto devas esti tute respondema en Bootstrap, ĉi tiu respondema aliro temas pri redukti CSS-anstataŭigojn puŝante vin aldoni stilojn dum la vidpunkto pligrandiĝas.

Tra Bootstrap, vi vidos ĉi tion plej klare en niaj amaskomunikilaj demandoj. Plejofte, ni uzas min-widthdemandojn, kiuj komencas apliki ĉe specifa rompopunkto kaj portas supren tra la pli altaj rompopunktoj. Ekzemple, a .d-noneaplikas de min-width: 0ĝis malfinio. Aliflanke, a .d-md-noneaplikas de la meza rompopunkto kaj supren.

Foje ni uzos max-widthkiam la eneca komplekseco de komponento postulas ĝin. Foje, ĉi tiuj anstataŭoj estas funkcie kaj mense pli klaraj por efektivigi kaj subteni ol reverki kernajn funkciojn de niaj komponantoj. Ni strebas limigi ĉi tiun aliron, sed uzos ĝin de tempo al tempo.

Klasoj

Krom nia Reboot, trans-retumila normaliga stilfolio, ĉiuj niaj stiloj celas uzi klasojn kiel elektilojn. Ĉi tio signifas foriri de tipelektiloj (ekz., input[type="text"]) kaj eksterlandaj gepatraj klasoj (ekz., .parent .child) kiuj faras stilojn tro specifaj por facile superregi.

Kiel tia, komponentoj devus esti konstruitaj kun bazklaso kiu enhavas oftajn, ne-estantajn superregatajn posedaĵ-valorajn parojn. Ekzemple, .btnkaj .btn-primary. Ni uzas .btnpor ĉiuj komunaj stiloj kiel display, padding, kaj border-width. Ni tiam uzas modifilojn kiel .btn-primaryaldoni la koloron, fonkoloron, randkoloron ktp.

Modifiklasoj devas esti uzataj nur kiam ekzistas pluraj trajtoj aŭ valoroj ŝanĝendaj tra pluraj variantoj. Modifiloj ne ĉiam estas necesaj, do certiĝu, ke vi efektive konservas liniojn de kodo kaj malhelpas nenecesajn anstataŭojn dum kreado de ili. Bonaj ekzemploj de modifiloj estas niaj temaj kolorklasoj kaj grandvariaĵoj.

z-indeksaj skaloj

Estas du z-indexskvamoj en Bootstrap—elementoj ene de komponanto kaj tegmentaj komponantoj.

Komponantaj elementoj

• Iuj komponantoj en Bootstrap estas konstruitaj kun imbrikitaj elementoj por malhelpi duoblajn randojn sen modifi la borderposedaĵon. Ekzemple, butongrupoj, enigogrupoj kaj paĝigo.
• Ĉi tiuj komponantoj dividas norman z-indexskalon de 0tra 3.
• 0estas defaŭlta (komenca), 1estas :hover, 2estas :active/ .active, kaj 3estas :focus.
• Ĉi tiu aliro kongruas kun niaj atendoj de plej alta uzantprioritato. Se elemento estas fokusita, ĝi estas en vido kaj ĉe la atento de la uzanto. Aktivaj elementoj estas due plej altaj ĉar ili indikas staton. Ŝvebi estas la tria plej alta ĉar ĝi indikas uzantan intencon, sed preskaŭ io ajn povas ŝvebi.

Overlay komponantoj

Bootstrap inkluzivas plurajn komponantojn, kiuj funkcias kiel ia superkovraĵo. Ĉi tio inkluzivas, en ordo de plej altaj z-index, falmenuoj, fiksaj kaj gluiĝemaj navbaroj, modaloj, konsiletoj kaj popovers. Ĉi tiuj komponantoj havas sian propran z-indexskalon, kiu komenciĝas je 1000. Ĉi tiu komenca nombro estis elektita arbitre kaj servas kiel malgranda bufro inter niaj stiloj kaj la kutimaj stiloj de via projekto.

Ĉiu tegmenta komponanto pliigas sian z-indexvaloron iomete tiel, ke komunaj UI-principoj permesas al uzantoj fokusitaj aŭ ŝvebitaj elementoj resti ĉiam videblaj. Ekzemple, modalo estas dokumentblokado (ekz., vi ne povas fari ajnan alian agon krom la ago de la modalo), do ni metas tion super niaj navbaroj.

Lernu pli pri tio en nia z-indexaranĝa paĝo .

HTML kaj CSS super JS

Kiam ajn eblas, ni preferas skribi HTML kaj CSS super JavaScript. Ĝenerale, HTML kaj CSS estas pli produktivaj kaj alireblaj por pli da homoj de ĉiuj malsamaj spertaj niveloj. HTML kaj CSS ankaŭ estas pli rapidaj en via retumilo ol JavaScript, kaj via retumilo ĝenerale provizas multajn funkciojn por vi.

Ĉi tiu principo estas nia unuaklasa JavaScript API uzante dataatributojn. Vi ne bezonas skribi preskaŭ ajnan JavaScript por uzi niajn JavaScript kromaĵojn; anstataŭe, skribu HTML. Legu pli pri tio en nia JavaScript-superrigardpaĝo .

Lastly, our styles build on the fundamental behaviors of common web elements. Whenever possible, we prefer to use what the browser provides. For example, you can put a .btn class on nearly any element, but most elements don’t provide any semantic value or browser functionality. So instead, we use <button>s and <a>s.

The same goes for more complex components. While we could write our own form validation plugin to add classes to a parent element based on an input’s state, thereby allowing us to style the text say red, we prefer using the :valid/:invalid pseudo-elements every browser provides us.

Utilities

Utility classes—formerly helpers in Bootstrap 3—are a powerful ally in combatting CSS bloat and poor page performance. A utility class is typically a single, immutable property-value pairing expressed as a class (e.g., .d-block represents display: block;). Their primary appeal is speed of use while writing HTML and limiting the amount of custom CSS you have to write.

Specifically regarding custom CSS, utilities can help combat increasing file size by reducing your most commonly repeated property-value pairs into single classes. This can have a dramatic effect at scale in your projects.

Flexible HTML

Kvankam ne ĉiam eblas, ni strebas eviti tro dogmajn en niaj HTML-postuloj por komponantoj. Tiel, ni fokusiĝas al unuopaj klasoj en niaj CSS-elektiloj kaj provas eviti tujajn filajn elektilojn ( >). Ĉi tio donas al vi pli da fleksebleco en via efektivigo kaj helpas konservi nian CSS pli simpla kaj malpli specifa.