Panoramica di Bootstrap
Bootstrap è un framework front-end che ti aiuta a progettare le interfacce Web con componenti CSS e JavaScript già pronti per elementi comuni come navigazione, moduli e pulsanti. Dispone inoltre di un sistema efficace di layout della griglia che adatta il tuo sito a dispositivi con schermi di dimensioni diverse, come telefoni e tablet. Utilizzando il layout di sistema di Bootstrap, puoi creare un singolo sito ideale per tutti i dispositivi che i clienti possono utilizzare.
I modelli Power Pages utilizzano componenti Bootstrap standard con stili personalizzati minimi. Utilizzando questi modelli, puoi facilmente modificare il tema (caratteri, colori e così via) per adattarlo al tuo marchio e alle tue preferenze in modo coerente nell'intero sito.
Power Pages supporta Bootstrap versione 3.3.6 e Bootstrap versione 5. Bootstrap versione 5 offre funzionalità migliorate per l'esperienza utente (UX) e nuovi componenti come accordion, offcanvas e supporto RTL.
Per i nuovi siti Power Pages, dovrai configurare Bootstrap versione 5 nel tuo ambiente. Puoi anche eseguire la migrazione dei tuoi siti Web esistenti da Bootstrap versione 3 alla versione 5.
Personalizzare Bootstrap
Per personalizzare Bootstrap, puoi modificare i valori delle variabili e scaricare una versione di Bootstrap compilata in base a valori personalizzati.
Il potere delle variabili di Bootstrap è che definiscono tutti gli stili nel framework, non solo un elemento. Ad esempio, la variabile @font-size-base specifica la dimensione predefinita del testo sul tuo sito: testo del corpo, intestazioni e tutti gli altri elementi di testo. Un'intestazione H1 può essere definita come il 300% di @font-size-base. Impostando questa variabile, controlli l'intera scala tipografica del sito Web in modo coerente.
Puoi creare una versione personalizzata di Bootstrap tramite il sito Bootstrap ufficiale o utilizzare un sito di terze parti che potrebbe offrire un'interfaccia più semplice o temi predefiniti. Il sito ufficiale della personalizzazione di Bootstrap offre maggiori informazioni sulla personalizzazione di Bootstrap.
Quando scarichi una versione personalizzata di Bootstrap, la struttura di directory è la seguente:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
A seconda della funzione di personalizzazione utilizzata, la struttura della directory può contenere bootstrap.min.css. È il file che contiene le tue personalizzazioni. Gli altri file sono uguali per tutte le versioni personalizzate di Bootstrap e quindi sono già inclusi nel sito Web.