Visão geral do bootstrap
Bootstrap é uma estrutura front-end que ajuda você a projetar interfaces web com componentes CSS prontos e JavaScript para elementos comuns como navegação, formulários e botões. Ele também possui um sistema de layout de grade responsivo que ajusta seu site para dispositivos com diferentes tamanhos de tela, como telefones e tablets. Usando o sistema de layout do Bootstrap, é possível criar um único site que tenha uma boa visualização em qualquer dispositivo que os clientes possam usar.
Os modelos do Power Pages usam componentes padrão do Bootstrap com estilos personalizados mínimos. Usando esses modelos, você pode alterar facilmente o tema (fontes, cores e assim por diante) para combinar com sua marca e preferências de forma consistente em todo o site.
Power Pages oferece suporte ao Bootstrap versão 3.3.6 e ao Bootstrap versão 5. Bootstrap versão 5 oferece recursos aprimorados de experiência do usuário (UX) e novos componentes como acordeão, offcanvas e suporte RTL.
Para novos sites do Power Pages, você precisará configurar o Bootstrap versão 5 em seu ambiente. Você também pode migrar seus sites existentes do Bootstrap versão 3 para a versão 5.
Personalizar Bootstrap
Para personalizar o Bootstrap, você altera os valores das variáveis e baixa uma versão personalizada do Bootstrap compilada com base em seus valores personalizados.
O poder das variáveis Bootstrap é que elas definem todos os estilos do framework, não apenas um elemento. Por exemplo, a variável @font-size-base especifica o tamanho padrão do texto no seu site: corpo do texto, títulos e todos os outros elementos de texto. Um título H1 pode ser definido como 300% de @font-size-base. Definindo essa variável, você pode controlar toda a escala tipográfica do site de modo consistente.
Você pode criar uma versão personalizada do Bootstrap por meio do site oficial do Bootstrap ou usar um site de terceiros que possa oferecer uma interface mais fácil ou temas predefinidos. O site oficial do personalizador do Bootstrap tem mais informações sobre a personalização do Bootstrap.
Quando você baixar uma versão personalizada do Bootstrap, ela conterá a estrutura de diretórios a seguir:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Dependendo do aplicativo personalizador utilizado, a estrutura do diretório só podem conter bootstrap.min.css. É o arquivo que contém suas personalizações. Os outros arquivos são iguais para todas as versões personalizadas do Bootstrap e, portanto, já estão incluídos no seu site.