Ugrás a fő tartalomhoz Ugrás a dokumentumok navigációjához
in English

Testreszab

Tanulja meg, hogyan témázhatja, testreszabhatja és bővítheti a Bootstrap programot a Sass segítségével, amely számos globális opció, kiterjedt színrendszer stb.

Sass Használja forrás Sass fájljainkat a változók, térképek, mixinek és függvények előnyeinek kihasználásához.
Lehetőségek A Bootstrap testreszabása beépített változókkal a globális CSS-beállítások egyszerű váltásához.
Szín Ismerje meg és szabja testre a teljes eszközkészletet támogató színrendszereket.
Alkatrészek Tanulja meg, hogyan építjük fel szinte minden összetevőnket érzékenyen, alap- és módosító osztályokkal.
CSS-változók Használja a Bootstrap CSS egyéni tulajdonságait a gyors és előremutató tervezéshez és fejlesztéshez.
Optimalizálás Tartsa projektjeit karcsú, érzékeny és karbantartható formában, hogy a legjobb élményt nyújthassa.

Áttekintés

A Bootstrap testreszabásának többféle módja van. A legjobb út a projekttől, az összeállítási eszközök összetettségétől, a Bootstrap használt verziójától, a böngésző támogatásától és egyebektől függhet.

Két előnyben részesített módszerünk a következő:

  1. A Bootstrap használata a csomagkezelőn keresztül, így használhatja és bővítheti forrásfájljainkat.
  2. A Bootstrap lefordított terjesztési fájljait vagy a jsDelivr -t használva hozzáadhat vagy felülírhat Bootstrap stílusokat.

Bár itt nem részletezhetjük, hogyan kell minden csomagkezelőt használni, adhatunk némi útmutatást a Bootstrap használatához a saját Sass fordítójával .

Azok számára, akik szeretnék használni a terjesztési fájlokat, tekintse át a Kezdő lépések oldalt , ahol megtudhatja, hogyan veheti fel ezeket a fájlokat, valamint egy példa HTML-oldalt. Innentől kezdve tekintse meg a dokumentumokat a használni kívánt elrendezésről, összetevőkről és viselkedésekről.

A Bootstrap megismerése közben folytassa ennek a szakasznak a felfedezését, ha többet szeretne megtudni arról, hogyan használhatjuk globális lehetőségeinket, hogyan használjuk és változtassuk meg színrendszerünket, hogyan építjük fel összetevőinket, hogyan használjuk az egyéni CSS-tulajdonságok növekvő listáját, és hogyan. hogy optimalizálja a kódot a Bootstrap használatával történő építés során.

CSP-k és beágyazott SVG-k

Számos Bootstrap-összetevő tartalmaz beágyazott SVG-ket a CSS-ben, hogy az összetevőket konzisztensen és egyszerűen stílusozzák a böngészők és eszközök között. A szigorúbb CSP - konfigurációkkal rendelkező szervezetek esetében dokumentáltuk a beágyazott SVG-ink összes példányát (melyek mindegyike a következőn keresztül kerül alkalmazásra background-image), így alaposabban áttekintheti a lehetőségeit.

A közösségi beszélgetések alapján néhány lehetőség ennek megoldására a saját kódbázisában: az URL-ek helyben tárolt elemekkel való helyettesítése, a képek eltávolítása és a soron belüli képek használata (nem minden összetevőben lehetséges), valamint a CSP módosítása. Azt javasoljuk, hogy gondosan tekintse át saját biztonsági szabályzatát, és szükség esetén döntse el a legjobb utat.