Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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).
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":
Bloco de código | ||||
---|---|---|---|---|
| ||||
<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
.
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)
Figura 1.3 - Tela de login com o tema Material (esquerdo) e flatly (direito)
Temas externos
Para adicionarmos um tema externo, é necessário algumas informações sobre a estrutura de arquivos do Cronapp.
Estrutura de arquivos
<Nome do projeto>/
??? src/
??? main/
??? webapp/
??? cronapp-framework-js/
??? css/
??? themes/
??? custom/
? ??? cerulean/
? ? ??? custom-cerulean.min.css
? ??? material/
? ??? custom-material.min.css
??? cerulean.min.css
??? material.min.css
Bloco de código | ||||
---|---|---|---|---|
| ||||
"Nome do projeto" ??? src/ ? ??? main/ ? ? ??? webapp/ ? ? ? ??? cronapp-framework-js/ ? ? ? ? ??? css/ ? ? ? ? ? ??? fonts/ ? ? ? ? ? ??? themes/ ? ? ? ? ? ? ??? custom/ ? ? ? ? ? ? ? ??? cerulean/ ? ? ? ? ? ? ? ? ??? custom-cerulean.min.css ? ? ? ? ? ? ? ??? material/ ? ? ? ? ? ? ? ? ??? custom-material.min.css ? ? ? ? ? ? ??? cerulean.min.css ? ? ? ? ? ? ??? material.min.css |
Nessa página
Índice | ||
---|---|---|
|