Översikt över Bootstrap
Bootstrap är ett front-end-ramverk som hjälper dig att designa webbgränssnitt med färdiga CSS och JavaScript-komponenter för vanliga element som navigering, formulär och knappar. Den har också ett responsivt layoutsystem för rutnät som justerar din webbplats för enheter med olika skärmstorlekar, som telefoner och surfplattor. Med hjälp av Bootstrap-layoutsystemet kan du skapa en enda webbplats som ser bra ut på alla enheter som dina kunder kan använda.
Power Pages mallar använder standard Bootstrap-komponenter med minimala anpassade stilar. Med hjälp av dessa mallar kan du enkelt ändra temat (teckensnitt, färger och så vidare) för att matcha ditt varumärke och preferenser konsekvent på hela webbplatsen.
Power Pages har stöd för Bootstrap version 3.3.6 och Bootstrap version 5. Bootstrap version 5 erbjuder förbättrade funktioner för användarupplevelsen (UX) och nya komponenter som stöd för dragspel, offcanvas och RTL.
För nya Power Pages webbplatser måste du konfigurera Bootstrap version 5 i miljön. Du kan också migrera din befintliga Bootstrap version 3 webbplats till version 5.
Anpassa Bootstrap
För att anpassa Bootstrap ändrar du variablernas värden och laddar sedan ner en version av Bootstrap som är kompilerad med dina anpassade värden.
Styrkan med Bootstrap-variabler är att de definierar alla stilar i ramverket, inte bara ett element. Till exempel variabeln @font-size-base anger standardstorleken för text på din webbplats – brödtext, rubriker och alla andra textelement. En H1-rubrik kan definieras som 300 procent av @font-size-base. Genom att ange denna enskilda variabel kan du styra hela webbplatsens typografiska skala på ett konsekvent sätt.
Du kan skapa en anpassad version av Bootstrap via den officiella Bootstrap-webbplatsen eller använd en tredje parts webbplats som kan erbjuda ett enklare gränssnitt eller fördesignade teman. Den officiella Bootstrap-anpassaren-webbplatsen ger mer information om Bootstrap-anpassning.
När du hämtar en anpassad version av Bootstrap innehåller den följande katalogstruktur:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Beroende på vilket anpassningsprogram som används kan katalogstrukturen endast innehålla bootstrap.min.css. Det är filen som innehåller dina anpassningar. De andra filerna är samma för alla anpassade versioner av Bootstrap och finns redan inkluderade i din webbplats.