Teman

Bootstrap Studio kommer med ett antal alternativa teman som du kan välja för din design. Du kan också importera en helt anpassad version av Bootstrap och använda den i appen.

Tema kontra Templates

I Bootstrap Studio med "teman" hänvisas till anpassade versioner av Bootstrap-ramverket. Medan "mallar" är de kompletta förmonterade designerna som du kan se i dialogrutan Ny design (Ctrl/Cmd + N).

Inbyggda teman

För att välja ett annat tema för din design måste du öppna dialogrutan Inställningar och välja ett annat tema från rullgardinsmenyn. Detta kommer att ändra färgerna och utseendet på saker som navigeringsfält, knappar, kort och mer.

Anpassade teman

Appen stöder även import av anpassade versioner av Bootstrap-ramverket. Det finns många sätt att skapa anpassade Bootstrap-byggen:

• Använda SASS för att utöka ramverkets källfiler och åsidosätta temavariabler (rekommenderas).
• Ändring av CSS-variabler) Bootstrap exponerar för att ändra standardtemafärger och -stilar.
• Manuell redigering av Bootstrap-kompilerade distributions-CSS-fil.
• Andra metoder beroende på dina byggverktyg och versionen av Bootstrap du använder.

Oavsett vilket tillvägagångssätt du använder, bör slutresultatet alltid vara en vanlig CSS-fil som innehåller kärnan i Bootstrap-ramverket tillsammans med eventuella stiländringar du har lagt till.

tips

Du kan se några trevliga temaexempel på bootswatch, som också driver Bootstrap Studios inbyggda teman.

För att importera den kompilerade CSS-filen för ditt tema, öppna dialogrutan Inställningar och klicka på knappen Hantera teman. Där kan du importera ditt tema och det kommer att dyka upp i rullgardinsmenyn för teman, tillsammans med de inbyggda.

Efter att ha importerat ett tema kommer det att ta namnet på filen du angav. Du kan sedan ändra namnet efter eget tycke med hjälp av redigera-knapp ().

Notering

Importerade teman tar Bootstrap-versionen av din nuvarande design. Om du har en Bootstrap 5-design öppen och importerar ett anpassat tema, kommer Bootstrap Studio att anta att temat också är Bootstrap 5. Om du sedan öppnar en Bootstrap 4-design kommer ditt anpassade tema inte att vara tillgängligt i listan eftersom olika ramverk är inte kompatibla.