O Bootstrap é um framework web com código-fonte aberto para o desenvolvimento de componentes de interface e front-end, utiliza HTML, CSS e JavaScript. Foi criado no ano de 2011 por uma equipe do Twitter com o objetivo de melhorar a experiência do usuário em um site amigável e responsivo.
Por ser open-source, qualquer pessoa pode baixa, alterar ou criar temas próprios e distribuí-los. Dessa forma, são necessários poucos passos para deixar o seu sistema de cara nova!
Mas antes de procurar por temas, é necessário saber a versão do Bootstrap que seu sistema usa e, a depender do quanto queira personalizar seu sistema, a versão de outros plugins que possam ser requisitados. Atualmente o Cronapp utilizar a versão 3.3.4 do Bootstrap e o AngularJS na versão 1.5.9.
Temas internos
Além do Material, tema padrão do Cronapp e com suporte à acessibilidade, existem mais 16 temas disponíveis. Estes temas podem ser selecionados durante a criação do projeto (Figura 1.1) ou posteriormente (Figura 1.2).
![](/download/attachments/176660543/temas_SelecaoCriarProjeto.png?version=1&modificationDate=1586995351000&api=v2)
Figura 1.1 - Etapa de seleção de tema durante a criação do projeto
Após a criação do projeto, será necessário acessar o arquivo index.html
, localizado em src / main / webapp / index.html (Visualização de pastas), para alterar o tema. Procure o elemento <link> com o id "themeSytleSheet":
<link id="themeSytleSheet" rel="stylesheet" href="plugins/cronapp-framework-js/css/themes/material.min.css">
Exclua o nome do tema no final do atributo href
, pressione Ctrl + Espaço
para exibir a lista de temas e selecione uma opção de CSS minificado: <nome do tema>.min.css
.
![](/download/attachments/176660543/Temas_selecaoTemas.png?version=2&modificationDate=1616521332000&api=v2)
Figura 1.2 - Selecionando um dos temas inclusos no Cronapp
Concluída a seleção do tema no arquivo index.html
, salve e rode o projeto em um navegador web. (Figura 1.3)
![](/download/attachments/176660543/Temas_MaterialFlatly.png?version=1&modificationDate=1586999893000&api=v2)
Figura 1.3 - Tela de login com o tema Material (esquerdo) e flatly (direito)
Temas externos
asd