Oanpak

Wylst de startpagina's in ynliedende rûnlieding jouwe fan it projekt en wat it biedt, rjochtet dit dokumint him op wêrom't wy de dingen dogge dy't wy dogge yn Bootstrap. It ferklearret ús filosofy om te bouwen op it web, sadat oaren fan ús kinne leare, mei ús bydrage en ús helpe kinne ferbetterje.

Sjoch wat dat net goed klinkt, of miskien better kin wurde? Iepenje in probleem - wy wolle it graach mei jo beprate.

Gearfetting

Wy sille troch elk fan dizze mear yngean, mar op in heech nivo is hjir wat ús oanpak liedt.

• Komponinten moatte responsyf en mobyl-earst wêze
• Komponinten moatte wurde boud mei in basis klasse en útwreide fia modifier klassen
• Komponint steaten moatte folgje in mienskiplike z-yndeks skaal
• As it mooglik is, leaver in HTML- en CSS-ymplemintaasje boppe JavaScript
• As it mooglik is, brûk nutsbedriuwen oer oanpaste stilen
• As it mooglik is, foarkom it hanthavenjen fan strange HTML-easken (bernselektors)

Responsive

De responsive stilen fan Bootstrap binne boud om responsyf te wêzen, in oanpak dy't faaks wurdt oantsjutten as mobyl-earst . Wy brûke dizze term yn ús dokuminten en binne it der foar in grut part mei iens, mar soms kin it te breed wêze. Hoewol net elke komponint folslein responsyf moat wêze yn Bootstrap, giet dizze responsive oanpak oer it ferminderjen fan CSS-overrides troch jo te drukken om stilen ta te foegjen as de viewport grutter wurdt.

Oer Bootstrap sille jo dit it dúdlikst sjen yn ús mediafragen. Yn 'e measte gefallen brûke wy min-widthqueries dy't begjinne te passen op in spesifyk brekpunt en trochgean troch de hegere brekpunten. Bygelyks, a .d-nonejildt fan min-width: 0oant ûneinich. Oan de oare kant, a .d-md-nonejildt út it medium breakpoint en omheech.

Soms sille wy brûke max-widthas de ynherinte kompleksiteit fan in komponint it fereasket. Soms binne dizze oerienkomsten funksjoneel en mentaal dúdliker te ymplementearjen en te stypjen dan it herskriuwen fan kearnfunksjonaliteit fan ús komponinten. Wy stribje dernei om dizze oanpak te beheinen, mar sille it sa no en dan brûke.

Klassen

Njonken ús Reboot, in stylblêd foar normalisearring fan cross-browser, binne al ús stilen fan doel om klassen as selektors te brûken. Dit betsjut steuring dúdlik fan type selectors (bgl. input[type="text"]) en bûtenlânske âlder klassen (bgl. .parent .child) dy't meitsje stilen te spesifyk foar maklik oerskriuwe.

As sadanich moatte komponinten boud wurde mei in basisklasse dy't mienskiplike, net te oerskriuwen eigendom-wearde-pearen befettet. Bygelyks, .btnen .btn-primary. Wy brûke .btnfoar alle mienskiplike stilen lykas display, padding, en border-width. Wy brûke dan modifiers lykas .btn-primaryde kleur, eftergrûnkleur, grinskleur, ensfh.

Modifikaasjeklassen moatte allinich brûkt wurde as d'r meardere eigenskippen of wearden binne dy't moatte wurde feroare oer meardere farianten. Modifiers binne net altyd nedich, dus wês der wis fan dat jo koade rigels opslaan en ûnnedige oerskriuwingen foarkomme by it meitsjen fan se. Goede foarbylden fan modifiers binne ús temakleurklassen en grutte farianten.

z-yndeks skalen

D'r binne twa z-indexskalen yn Bootstrap-eleminten binnen in komponint en overlay-komponinten.

Component eleminten

• Guon komponinten yn Bootstrap binne boud mei oerlappende eleminten om dûbele grinzen te foarkommen sûnder it bordereigendom te feroarjen. Bygelyks knopgroepen, ynfiergroepen en paginaasje.
• Dizze komponinten diele in standert z-indexskaal fan 0troch 3.
• 0is standert (begin), 1is :hover, 2is :active/ .active, en 3is :focus.
• Dizze oanpak komt oerien mei ús ferwachtingen fan heechste brûkersprioriteit. As in elemint rjochte is, is it yn sicht en ûnder de oandacht fan de brûker. Aktive eleminten binne twadde heechste omdat se oanjaan steat. Hover is de tredde heechste, om't it de bedoeling fan 'e brûker oanjout, mar hast alles kin hoverje.

Overlay komponinten

Bootstrap omfettet ferskate komponinten dy't funksjonearje as in overlay fan ien of oare soarte. Dit omfettet, yn folchoarder fan heechste z-index, dropdowns, fêste en kleverige navbars, modalen, tooltips en popovers. Dizze komponinten hawwe har eigen z-indexskaal dy't begjint by 1000. Dit startnûmer is willekeurich keazen en tsjinnet as in lytse buffer tusken ús stilen en de oanpaste stilen fan jo projekt.

Elke overlay-komponint fergruttet syn z-indexwearde in bytsje op sa'n manier dat mienskiplike UI-prinsipes tastean brûker rjochte of hovered eleminten te bliuwen yn it sicht op alle tiden. Bygelyks, in modaal is it blokkearjen fan dokuminten (jo kinne bygelyks gjin oare aksje nimme behalve foar de aksje fan 'e modal), dus wy sette dat boppe ús navbars.

Learje hjir mear oer yn ús z-indexlayoutside .

HTML en CSS oer JS

As it mooglik is, skriuwe wy leaver HTML en CSS oer JavaScript. Yn 't algemien binne HTML en CSS produktiver en tagonkliker foar mear minsken fan alle ferskillende ûnderfiningsnivo's. HTML en CSS binne ek flugger yn jo blêder dan JavaScript, en jo blêder leveret oer it algemien in protte funksjonaliteit foar jo.

Dit prinsipe is ús earste-klasse JavaScript API mei dataattributen. Jo hoege hast gjin JavaScript te skriuwen om ús JavaScript-plugins te brûken; ynstee, skriuw HTML. Lês hjir mear oer yn ús JavaScript-oersjochside .

As lêste bouwe ús stilen op it fûnemintele gedrach fan mienskiplike webeleminten. As it mooglik is, brûke wy leaver wat de browser biedt. Jo kinne bygelyks in .btnklasse op hast elk elemint sette, mar de measte eleminten jouwe gjin semantyske wearde of browserfunksjonaliteit. Dus ynstee brûke wy <button>s en <a>s.

Itselde jildt foar mear komplekse komponinten. Wylst wy ús eigen plugin foar formuliervalidaasje kinne skriuwe om klassen ta te foegjen oan in âlderelemint op basis fan in ynputstatus, wêrtroch't wy de tekst kinne stylje sizze read, wy brûke leaver de :valid/ :invalidpseudo-eleminten dy't elke browser ús leveret.

Utilities

Utility-klassen - eartiids helpers yn Bootstrap 3 - binne in krêftige bûnsmaat yn it bestriden fan CSS-bloat en minne sideprestaasjes. In nutsklasse is typysk in inkele, ûnferoarlike eigendom-wearde-kearing útdrukt as in klasse (bygelyks .d-blockfertsjintwurdiget display: block;). Har primêre berop is de snelheid fan gebrûk by it skriuwen fan HTML en it beheinen fan it bedrach fan oanpaste CSS dat jo moatte skriuwe.

Spesifyk oangeande oanpaste CSS, nutsbedriuwen kinne helpe by it bestriden fan tanimmende triemgrutte troch it ferminderjen fan jo meast werhelle eigendom-wearde-pearen yn inkele klassen. Dit kin in dramatysk effekt hawwe op skaal yn jo projekten.

Fleksibele HTML

Hoewol it net altyd mooglik is, stribje wy dernei om net te dogmatysk te wêzen yn ús HTML-easken foar komponinten. Sa rjochtsje wy ús op inkele klassen yn ús CSS-selektors en besykje direkte bernselektors te foarkommen ( >). Dit jout jo mear fleksibiliteit yn jo ymplemintaasje en helpt ús CSS ienfâldiger en minder spesifyk te hâlden.

Koade konvinsjes

Code Guide (fan Bootstrap co-creator, @mdo) dokumintearret hoe't wy ús HTML en CSS skriuwe oer Bootstrap. It spesifisearret rjochtlinen foar algemiene opmaak, standerts foar sûn ferstân, oarders foar eigendom en attribút, en mear.

Wy brûke Stylelint om dizze noarmen en mear te hanthavenjen yn ús Sass / CSS. Us oanpaste Stylelint-konfiguraasje is iepen boarne en beskikber foar oaren om te brûken en út te wreidzjen.

Wy brûke vnu-jar foar it hanthavenjen fan standert en semantyske HTML, en ek foar it opspoaren fan mienskiplike flaters.