Présentation de Bootstrap
Bootstrap est une infrastructure front-end qui vous aide à concevoir des interfaces Web avec des composants CSS et JavaScript prêts à l’emploi pour des éléments courants tels que la navigation, les formulaires et les boutons. Il dispose également d’un système de disposition de grille dynamique qui ajuste votre site pour les appareils dotés de différentes tailles d’écran, comme les téléphones et les tablettes. En utilisant le système de disposition de Bootstrap, vous pouvez créer un site unique, idéal pour tous les appareils que vos clients pourraient utiliser.
Les modèles Power Pages utilisent des composants Bootstrap standard avec un minimum de styles personnalisés. En utilisant ces modèles, vous pouvez facilement modifier le thème (polices, couleurs, etc.) pour l’adapter de manière cohérente à votre marque et à vos préférences dans l’ensemble de votre site.
Power Pages prend en charge Bootstrap version 3.3.6 et Bootstrap version 5. La version 5 de Bootstrap offre des fonctionnalités améliorées pour l’expérience utilisateur (UX) et de nouveaux composants tels que l’accordéon, le canevas hors connexion et la prise en charge de RTL.
Pour les nouveaux sites Power Pages, vous devrez configurer Bootstrap version 5 dans votre environnement. Vous pouvez également migrer vos sites Web Bootstrap existants de la version 3 vers la version 5.
Personnaliser Bootstrap
Pour personnaliser Bootstrap, vous modifiez les valeurs des variables, puis téléchargez une version de Bootstrap compilée avec vos valeurs personnalisées.
Le pouvoir des variables Bootstrap est qu’elles définissent tous les styles dans l’infrastructure, pas seulement un élément. Par exemple, la variable @font-size-base spécifie la taille par défaut du texte dans votre site : le texte du corps, les titres et tous les autres éléments de texte. Un titre H1 peut être défini comme 300 % de @font-size-base. En définissant cette seule variable, vous contrôlez l’échelle typographique entière de votre site web, de façon cohérente.
Vous pouvez créer une version personnalisée de Bootstrap via le site officiel de Bootstrap ou utiliser un site tiers qui peut offrir une interface plus simple ou des thèmes prédéfinis. Le site officiel de personnalisation de Bootstrap contient plus d’informations sur la personnalisation de Bootstrap.
Quand vous téléchargez une version personnalisée de Bootstrap, elle contient la structure de répertoires suivante :
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
En fonction de l’application de personnalisation que vous avez utilisée, la structure du répertoire peut uniquement contenir bootstrap.min.css. Il s’agit du fichier qui contient vos personnalisations. Les autres fichiers sont les mêmes pour toutes les versions personnalisées de Bootstrap, et ils sont déjà inclus dans votre site web.