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 az interneten való építkezésről, 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 is továbbhaladnak. 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 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 a felugró ablakokat. Ezeknek az összetevőknek saját z-indexskálájuk van, amelyek kezdete 1000. Ezt a kezdőszámot önkényesen választották ki, és kis pufferként szolgál a stílusaink és a projekt egyéni stílusai között.

Minden fedvénykomponens z-indexkis mértékben növeli az é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 gyorsabb is 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.

dataEz az elv az attribútumokat használó első osztályú JavaScript API-nk . 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 webelemek 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 adhassunk a szülőelemhez a bemenet állapota alapján, ezáltal lehetővé tegyük, hogy a szöveget mondjuk pirosra szabjuk, inkább a :valid/ :invalidpszeudoelemeket használjuk, amelyeket minden böngésző biztosít számunkra.

segédprogramok

A segédosztályok – 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, megvá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 az í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 növekvő fájlméretet azáltal, hogy a leggyakrabban ismétlődő tulajdonság-érték párokat egyetlen osztályba redukálják. 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.

Kódkonvenciók

A Code Guide (a Bootstrap társ-alkotójától, @mdo) dokumentálja, hogyan írjuk meg a HTML-t és a CSS-t a Bootstrapben. Meghatározza az általános formázásra, a józan ész alapértelmezéseire, a tulajdonságok és attribútumok sorrendjére és egyebekre vonatkozó irányelveket.

A Stylelint segítségével kényszerítjük ki ezeket a szabványokat és még sok mást a Sass/CSS-ben. Egyedi Stylelint konfigurációnk nyílt forráskódú, és mások számára is elérhető és bővíthető.

A vnu-jar- t használjuk a szabványos és szemantikus HTML kényszerítésére, valamint a gyakori hibák észlelésére.