Descrição geral do Bootstrap
O Bootstrap é uma estrutura front-end que ajuda a projetar interfaces web com componentes CSS prontos e JavaScript para elementos comuns como navegação, formulários e botões. Também tem um sistema de esquema de grelha reativo que ajusta o seu site para dispositivos com diferentes tamanhos de ecrã, como telefones e tablets. Ao utilizar o sistema de esquema do Bootstrap, pode criar um site individual que fique bem em todos os dispositivos que os seus clientes utilizam.
Os modelos do Power Pages usam componentes padrão do Bootstrap com estilos personalizados mínimos. Utilizando estes modelos, pode alterar facilmente o tema (tipos de letra, cores e assim por diante) para combinar com a sua marca e preferências de forma consistente em todo o site.
O Power Pages suporta as versões 3.3.6 e 5 do Bootstrap. O Bootstrap versão 5 oferece recursos melhorados de experiência do utilizador (UX) e novos componentes como acordeão, offcanvas e suporte RTL.
Para novos sites do Power Pages, terá de configurar a versão 5 do Bootstrap no seu ambiente. Também pode migrar os sites existentes da versão 3 do Bootstrap para a versão 5.
Personalizar o Bootstrap
Para personalizar o Bootstrap, altere os valores das variáveis e, em seguida, transfira uma versão do Bootstrap que seja compilada com os seus valores personalizados.
O poder das variáveis do Bootstrap é que definem todos os estilos da estrutura, não apenas um elemento. Por exemplo, a variável @font-size-base especifica o tamanho predefinido 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 por cento de @font-size-base. Ao definir esta variável individual, controla o intervalo tipográfico completo do seu site de forma consistente.
Pode criar uma versão personalizada do Bootstrap através do site oficial do Bootstrap ou usar um site de terceiros que possa oferecer uma interface mais fácil ou temas predefinidos. O site do personalizador oficial do Bootstrap tem mais informações sobre a personalização do Bootstrap.
Quando transfere uma versão personalizada do Bootstrap, esta contém a seguinte estrutura de diretórios:
css/
|-- bootstrap.min.css
img/
|-- glyphicons-halflings-white.png
|-- glyphicons-halflings.png
js/
|-- bootstrap.min.js
Consoante a aplicação de personalizador que utilizou, a estrutura do diretório poderá conter apenas bootstrap.min.css. É o ficheiro que contém as suas personalizações. Os outros ficheiros são iguais em todas as versões personalizadas do Bootstrap e já estão incluídos no seu site.