Source

Megközelítés

Ismerje meg a Bootstrap felépítéséhez és karbantartásához használt vezérelveket, stratégiákat és technikákat, így könnyebben testreszabhatja és saját maga is bővítheti.

Míg a kezdő oldalak bemutatják a projektet és annak kínálatát, ez a dokumentum arra összpontosít, hogy miért csináljuk azt, amit a Bootstrapben teszünk. Elmagyarázza filozófiánkat, hogy az internetre építkezzünk, hogy mások tanulhassanak tőlünk, hozzájárulhassanak hozzánk, és segítsenek fejlődni.

Látott valamit, ami nem hangzik jól, vagy esetleg lehetne jobban csinálni? Nyisson meg egy kérdést – szívesen megvitatnánk Önnel.

Összegzés

Ezek mindegyikével részletesebben foglalkozunk, de magas szinten a következőképpen vezéreljük megközelítésünket.

  • Az összetevőknek érzékenynek kell lenniük, és elsősorban mobilnak kell lenniük
  • A komponenseket alaposztállyal kell megépíteni, és módosító osztályokkal kell bővíteni
  • A komponensek állapotának követnie kell a közös z-index skálát
  • Amikor csak lehetséges, részesítse előnyben a HTML- és CSS-megvalósítást a JavaScript helyett
  • Amikor csak lehetséges, használjon segédprogramokat az egyéni stílusok helyett
  • Amikor csak lehetséges, kerülje a szigorú HTML-követelmények betartatását (gyermekválasztók)

Fogékony

A Bootstrap reszponzív stílusai reszponzívak legyenek, ezt a megközelítést gyakran mobil-elsőnek nevezik . Ezt a kifejezést használjuk dokumentumainkban, és nagyrészt egyetértünk vele, de időnként túl tág lehet. Bár nem kell minden összetevőnek teljesen érzékenynek lennie a Bootstrapben, ez az érzékeny megközelítés a CSS-felülírások csökkentéséről szól azáltal, hogy a nézetablak nagyobbá válásával stílusok hozzáadására készteti.

A Bootstrap esetében ezt a legvilágosabban a médialekérdezésekben láthatja. A legtöbb esetben olyan min-widthlekérdezéseket használunk, amelyek egy adott töréspontnál kezdenek érvényesülni, és a magasabb töréspontokon keresztül folytatják. Például a .d-nonetól min-width: 0a végtelenig vonatkozik. Másrészt .d-md-nonea közepes törésponttól és felfelé érvényes.

Időnként akkor használjuk max-width, ha egy komponens összetettsége megköveteli. Időnként ezek a felülírások funkcionálisan és mentálisan könnyebben megvalósíthatók és támogathatók, mint az alapvető funkciók átírása összetevőinkből. Igyekszünk korlátozni ezt a megközelítést, de időről időre alkalmazni fogjuk.

osztályok

Eltekintve az Újraindítástól, a böngészők közötti normalizációs stíluslaptól, minden stílusunk célja az osztályok választóként való használata. Ez azt jelenti, hogy kerülni kell a típusválasztókat (pl. input[type="text"]) és az idegen szülőosztályokat (pl. .parent .child), amelyek túlságosan specifikussá teszik a stílusokat ahhoz, hogy könnyen felülbírálhassák.

Mint ilyen, az összetevőket olyan alaposztályba kell építeni, amely közös, nem felülírandó tulajdonság-érték párokat tartalmaz. Például .btnés .btn-primary. Az .btnösszes gyakori stílushoz használjuk, mint például displaya , paddingés border-width. Ezután módosítókat használunk, például .btn-primaryhozzáadjuk a színt, a háttérszínt, a keretszínt stb.

A módosító osztályokat csak akkor szabad használni, ha több tulajdonság vagy érték is módosítható több változatban. A módosítók nem mindig szükségesek, ezért győződjön meg róla, hogy valóban menti a kódsorokat, és megakadályozza a szükségtelen felülírásokat létrehozásukkor. A módosítók jó példái a téma színosztályai és méretváltozataink.

z-index skálák

A Bootstrapben két z-indexskála található: az összetevőn belüli elemek és az átfedő összetevők.

Alkotóelemek

  • A Bootstrap egyes összetevői átfedő elemekből állnak, hogy elkerüljék a kettős szegélyeket a bordertulajdonság módosítása nélkül. Például gombcsoportok, beviteli csoportok és oldalszámozás.
  • Ezek az összetevők egy szabványos z-indexskálán osztoznak .03
  • 0az alapértelmezett (kezdeti), 1a :hover, 2az :active/ .active, és a , 3az :focus.
  • Ez a megközelítés megfelel a legmagasabb felhasználói prioritásra vonatkozó elvárásainknak. Ha egy elem fókuszálva van, akkor látható és a felhasználó figyelmébe kerül. Az aktív elemek a második legmagasabbak, mert állapotot jeleznek. A lebegtetés a harmadik legmagasabb, mert jelzi a felhasználói szándékot, de szinte bármit le lehet mozgatni.

Fedőelemek

A Bootstrap számos olyan összetevőt tartalmaz, amelyek valamilyen fedvényként funkcionálnak. Ez magában foglalja a legmagasabb sorrendben a z-indexlegördülő listákat, a rögzített és ragadós navigációs sávokat, a modálisokat, az eszköztippeket és az előugró ablakokat. Ezeknek az összetevőknek saját z-indexskálájuk van, amelyek kezdete 1000. Ez a kezdő szám véletlenszerű, és kis pufferként szolgál a stílusaink és a projekt egyéni stílusai között.

Minden fedvénykomponens kis mértékben növeli z-indexértékét oly módon, hogy a felhasználói felület általános elvei lehetővé teszik, hogy a felhasználóra fókuszált vagy lebegtetett elemek mindig láthatóak maradjanak. Például egy modális dokumentum blokkolja (pl. nem tehet mást, csak a modális műveletét), ezért ezt a navigációs sávok fölé helyezzük.

Tudjon meg többet erről az z-indexelrendezési oldalunkon .

HTML és CSS JS felett

Amikor csak lehetséges, inkább HTML-t és CSS-t írunk a JavaScript helyett. Általánosságban elmondható, hogy a HTML és a CSS sokkal termékenyebb, és több, különböző szintű tapasztalattal rendelkező ember számára elérhető. A HTML és a CSS is gyorsabb a böngészőben, mint a JavaScript, és a böngészője általában számos funkciót biztosít az Ön számára.

Ez az elv az első osztályú JavaScript API dataattribútumunk. Nem kell szinte semmilyen JavaScriptet írnia JavaScript-bővítményeink használatához; ehelyett írjon HTML-t. Erről bővebben a JavaScript áttekintő oldalán olvashat .

Végül stílusaink a gyakori webes elemek alapvető viselkedésére építenek. Amikor csak lehetséges, inkább azt használjuk, amit a böngésző biztosít. Például .btnszinte bármilyen elemre elhelyezhet egy osztályt, de a legtöbb elem nem biztosít szemantikai értéket vagy böngészőfunkciót. Tehát helyette az s-t <button>és az <a>s-t használjuk.

Ugyanez vonatkozik a bonyolultabb alkatrészekre is. Bár megírhatnánk saját űrlapellenőrző bővítményünket, hogy osztályokat adjunk a szülőelemhez a bemenet állapota alapján, és ezáltal lehetővé tegyük, hogy a szöveget mondjuk pirosra alakítsuk, inkább a :valid/ :invalidpszeudoelemeket használjuk, amelyeket minden böngésző biztosít számunkra.

segédprogramok

A segédprogramok – korábban a Bootstrap 3 segítői – hatékony szövetségesek a CSS felfúvódása és a gyenge oldalteljesítmény elleni küzdelemben. A használati osztály jellemzően egyetlen, változtathatatlan tulajdonság-érték párosítás, amelyet osztályként fejeznek ki (pl. .d-blockreprezentálja display: block;). Elsődleges vonzerejük a HTML írása közbeni használat gyorsasága és a megírandó egyéni CSS mennyiségének korlátozása.

Kifejezetten az egyéni CSS-t illetően, a segédprogramok segíthetnek leküzdeni a fájlméret növekedését azáltal, hogy a leggyakrabban ismétlődő tulajdonság-érték párokat egyetlen osztályokká csökkentik. Ennek drámai léptékű hatása lehet a projektjeiben.

Rugalmas HTML

Bár nem mindig lehetséges, igyekszünk elkerülni, hogy túlzottan dogmatikusak legyünk az összetevőkre vonatkozó HTML-követelményeinkben. Így CSS-választóinkban az egyes osztályokra összpontosítunk, és igyekszünk elkerülni az azonnali gyermekválasztókat ( >). Ez nagyobb rugalmasságot biztosít a megvalósítás során, és segít abban, hogy a CSS egyszerűbb és kevésbé specifikus.