in English

Approche

Léiert iwwer d'Guideprinzipien, Strategien an Techniken déi benotzt gi fir Bootstrap ze bauen an z'erhalen, sou datt Dir et méi einfach selwer personaliséiere kënnt an ausdehnen.

Wärend d'Startsäiten en Aféierungstour vum Projet ubidden a wat et ubitt, konzentréiert dëst Dokument op firwat mir d'Saachen maachen, déi mir am Bootstrap maachen. Et erkläert eis Philosophie fir um Internet ze bauen sou datt anerer vun eis kënne léieren, mat eis bäidroen an eis hëllefen ze verbesseren.

Gesinn eppes wat net richteg kléngt, oder vläicht besser gemaach ginn? Maacht en Thema op - mir géife gäre mat Iech diskutéieren.

Resumé

Mir dauchen all vun dësen méi duerch, awer op engem héijen Niveau, hei ass wat eis Approche guidéiert.

  • Komponente solle reaktiounsfäeger a mobil-éischt sinn
  • Komponente solle mat enger Basis Klass gebaut ginn an iwwer Modifikatioun Klassen verlängert ginn
  • Komponent Staate sollen eng gemeinsam Z-Index Skala befollegen
  • Wann ëmmer méiglech, léiwer eng HTML an CSS Implementatioun iwwer JavaScript
  • Wann ëmmer méiglech, benotzt Utilities iwwer personaliséiert Stiler
  • Wann ëmmer méiglech, vermeit strikt HTML Ufuerderungen ëmzesetzen (Kannerselektoren)

Reaktiounsfäeger

Dem Bootstrap seng reaktiounsfäeger Stiler si gebaut fir reaktiounsfäeger ze sinn, eng Approche déi dacks als mobile-first bezeechent gëtt . Mir benotzen dëse Begrëff an eisen Dokumenter a si meeschtens domat averstanen, awer heiansdo kann et ze breet sinn. Och wann net all Komponent muss ganz reaktiounsfäeger am Bootstrap sinn, ass dës reaktiounsfäeger Approche iwwer d'Reduktioun vun CSS Iwwerschreiden andeems Dir Iech dréckt fir Stiler ze addéieren wéi de Viewport méi grouss gëtt.

Iwwer Bootstrap gesitt Dir dëst am meeschte kloer an eise Medienufroen. An deene meeschte Fäll benotze mir min-widthUfroen déi ufänken op engem spezifesche Breakpoint ze gëllen an duerch déi méi héich Breakpunkte weiderzekommen. Zum Beispill, a .d-nonegëlt vun min-width: 0bis onendlech. Op der anerer Säit .d-md-nonegëlt a vum mëttleren Breakpunkt an erop.

Heiansdo wäerte mir benotzen max-widthwann d'Inherent Komplexitéit vun engem Komponent et erfuerdert. Heiansdo sinn dës Iwwerschreiden funktionell a geeschteg méi kloer ze implementéieren an z'ënnerstëtzen wéi d'Kärfunktioun vun eise Komponenten ëmzeschreiwen. Mir probéieren dës Approche ze limitéieren, awer wäerte se vun Zäit zu Zäit benotzen.

Klassen

Nieft eisem Reboot, e Cross-Browser Normaliséierungs Stylesheet, zielen all eis Stiler Klassen als Selektor ze benotzen. Dat heescht Leedung kloer vun Typ selectors (zB, input[type="text"]) an auslännesch Elteren Klassen (zB, .parent .child) datt Stiler ze spezifesch maachen einfach iwwerdribblen.

Als solch, Komponente solle mat enger Basisklass gebaut ginn, déi gemeinsam, net-ze-iwwerschreiden Eegentum-Wäertpairen enthält. Zum Beispill, .btnan .btn-primary. Mir benotze .btnfir all déi gemeinsam Stiler wéi display, padding, an border-width. Mir benotzen dann Modifikateure wéi .btn-primaryd'Faarf, Hannergrondfaarf, Grenzfaarf, asw.

Modifikateur Klassen sollen nëmme benotzt ginn wann et verschidde Eegeschaften oder Wäerter sinn, déi iwwer verschidde Varianten geännert ginn. Modifikateure sinn net ëmmer néideg, also gitt sécher datt Dir Codelinne spuert an onnéideg Iwwerschreiden verhënnert wann Dir se erstellt. Gutt Beispiller vu Modifikateure sinn eis Thema Faarf Klassen a Gréisst Varianten.

z-Index Skala

Et ginn zwou z-indexSkalen am Bootstrap-Elementer bannent engem Komponent an Overlay Komponenten.

Komponente Elementer

  • E puer Komponenten am Bootstrap si mat iwwerlappende Elementer gebaut fir duebel Grenzen ze vermeiden ouni d' borderPropriétéit z'änneren. Zum Beispill, Knäppchen Gruppen, Input Gruppen, an Pagination.
  • Dës Komponenten deelen eng Standard z-indexSkala vun 0duerch 3.
  • 0ass Standard (initial), 1ass :hover, 2ass :active/ .active, an 3ass :focus.
  • Dës Approche entsprécht eis Erwaardungen vun héchster Benotzer Prioritéit. Wann en Element fokusséiert ass, ass et an der Sicht an op d'Opmierksamkeet vum Benotzer. Aktiv Elementer sinn zweet héchst well se Staat uginn. Hover ass drëtt héchst well et d'Benotzer Absicht beweist, awer bal alles ka hänke bleiwen.

Overlay Komponente

Bootstrap enthält verschidde Komponenten déi als Iwwerlagerung vun enger Aart funktionnéieren. Dëst beinhalt, an der Uerdnung vun héchsten z-index, Dropdowns, fixen a plakeg Navbaren, Modale, Tooltips a Popovers. Dës Komponente hunn hir eege z-indexSkala déi fänkt um 1000. Dës Startnummer gouf arbiträr gewielt an déngt als klenge Puffer tëscht eise Stiler an de personaliséierte Stiler vun Ärem Projet.

All Overlay Komponent erhéicht säi z-indexWäert liicht sou datt déi gemeinsam UI Prinzipien erlaben Benotzer fokusséiert oder hovered Elementer zu all Moment ze gesinn. Zum Beispill, e Modal ass Dokumentblockéierung (zB Dir kënnt keng aner Handlung ënnerhuelen ausser fir d'Aktioun vum Modal), also setzen mir dat iwwer eis Navbaren.

Léiert méi iwwer dëst an eiser z-indexLayout Säit .

HTML an CSS iwwer JS

Wa méiglech, hu mir léiwer HTML an CSS iwwer JavaScript ze schreiwen. Am Allgemengen, HTML an CSS si méi produktiv an zougänglech fir méi Leit vun all verschidden Erfahrung Niveauen. HTML an CSS sinn och méi séier an Ärem Browser wéi JavaScript, an Äre Browser bitt allgemeng vill Funktionalitéit fir Iech.

Dëse Prinzip ass eis éischt Klass JavaScript API mat dataAttributer. Dir musst bal kee JavaScript schreiwen fir eis JavaScript Plugins ze benotzen; amplaz, schreiwen HTML. Liest méi iwwer dëst an eiser JavaScript Iwwersiichtssäit .

Schlussendlech bauen eis Stiler op d'fundamental Behuelen vun allgemenge Webelementer. Wa méiglech, benotze mir léiwer dat wat de Browser ubitt. Zum Beispill kënnt Dir eng .btnKlass op bal all Element setzen, awer déi meescht Elementer bidden kee semantesche Wäert oder Browserfunktionalitéit. Also amplaz benotze mir <button>s an <a>s.

Dat selwecht gëllt fir méi komplex Komponenten. Iwwerdeems mir eisen eegene Form Validatioun Plugin schreiwen kéint Klassen zu engem Elterendeel Element baséiert op engem Input Staat ze schreiwen, an domat erlaabt eis den Text ze Stil soen rout, mir léiwer benotzen d' :valid/ :invalidPseudo-Elementer all Browser eis gëtt.

Utilities

Utilitéitsklassen - fréier Helfer am Bootstrap 3 - sinn e mächtege Alliéierten am Kampf géint CSS Bloat a schlecht Säit Leeschtung. Eng Utility-Klass ass typesch eng eenzeg, onverännerbar Eegentum-Wäert-Paaring ausgedréckt als Klass (zB .d-blockrepresentéiert display: block;). Hir primär Appel ass d'Geschwindegkeet vun der Benotzung beim Schreiwen vun HTML an d'Limitatioun vun der Quantitéit vu personaliséierten CSS déi Dir schreiwt.

Besonnesch betreffend personaliséiert CSS, Utilities kënnen hëllefen, d'Erhéijung vun der Dateigréisst ze bekämpfen andeems Dir Är meeschtens widderholl Eegeschafte-Wäertpaaren an eenzel Klassen reduzéiert. Dëst kann en dramateschen Effekt op Skala an Äre Projeten hunn.

Flexibel HTML

Och wa mir net ëmmer méiglech sinn, beméie mir eis ze vermeiden ze dogmatesch ze sinn an eisen HTML Ufuerderunge fir Komponenten. Also konzentréiere mir eis op eenzel Klassen an eise CSS Selektoren a probéieren direkt Kanner Selektoren ze vermeiden ( >). Dëst gëtt Iech méi Flexibilitéit an Ärer Ëmsetzung an hëlleft eis CSS méi einfach a manner spezifesch ze halen.

Code Konventioune

Code Guide (vum Bootstrap Co-Creator, @mdo) dokumentéiert wéi mir eis HTML an CSS iwwer Bootstrap schreiwen. Et spezifizéieren Richtlinnen fir allgemeng Formatéierung, gesonde Mënscheverstand Defaults, Eegentum an Attributer Uerder, a méi.

Mir benotzen Stylelint fir dës Standarden a méi an eisem Sass / CSS ëmzesetzen. Eis personaliséiert Stylelint Config ass Open Source a verfügbar fir anerer ze benotzen an ze verlängeren.

Mir benotzen vnu-jar fir Standard an semantesch HTML ëmzesetzen, souwéi gemeinsam Feeler z'entdecken.