kavlan html bootstrap
1.0.0
Kavlan é o modelo de painel de administração escuro perfeito para tornar seu sistema de administração fácil de navegar e manter. Limpo, responsivo e fácil de usar, Kavlan oferece uma experiência de usuário que o ajudará a criar uma interface de sucesso. E acima de tudo, é grátis!
Ver demonstração | Baixar ZIP
Requisitos
Início rápido
Páginas de modelo
Link de demonstração
Principais recursos do modelo
Estrutura de arquivo de modelo
Guidão
Dados JSON do modelo
Personalize estilos de modelo
Crie novas páginas
Documentação de inicialização
Créditos
Contate-nos
Se você não pretende trabalhar com o código-fonte do modelo (e isso significa que não irá compilá-lo ou executar o servidor de desenvolvimento Webpack), não será necessário instalar nada. Você pode simplesmente navegar até a pasta dist e começar a editar os arquivos.
A maioria dos desenvolvedores editará o código-fonte e também executará o Webpack para recompilar os arquivos de modelo. Se for esse o caso, certifique-se de ter o Node.js instalado. Você pode baixá-lo aqui
Baixe a versão mais recente OU clone o repositório: git clone https://github.com/PixelRocket-Shop/kavlan-html-bootstrap.git
Instale o Node.js se ainda não o tiver em seu sistema.
Abra a raiz do projeto em sua linha de comando.
execute npm install em sua linha de comando.
execute npm start para iniciar o devserver Webpack.
se você deseja recompilar os arquivos de modelo (que são enviados para a pasta dist), execute npm run build
O modelo consiste em 6 páginas:
Painel
Página de login
Página de registro
Esqueci a senha da página
Página 404
Página em branco
Para manter a repetição de código ao mínimo, usamos Handlebars.js como mecanismo de modelagem e parciais para adicionar rapidamente o mesmo código a páginas diferentes. Também usamos um plugin Handlebars para dados JSON - isso nos permite usar loops e gerar um único bloco de código HTML em vez de repetir o mesmo HTML.
URL de demonstração
Observe que este é apenas um modelo HTML. Ele não se conecta a um banco de dados e não funciona automaticamente em um sistema de gerenciamento de conteúdo (Wordpress, etc.). Você precisará incorporar nosso código em seu aplicativo.
Integração Chart.js com 3 tipos de gráficos diferentes
Construído com Bootstrap 5
Totalmente responsivo
Componente de pedidos mais recentes
Barra lateral recolhível (recolhida automaticamente ao redimensionar o navegador)
Componente de notificações
Componente avatar
Componente de login/registro
dist - Versão gerada do modelo. Clique aqui se não quiser trabalhar com o código-fonte do modelo. Mas esteja avisado: se você personalizar qualquer coisa nesta pasta diretamente e depois recompilar o modelo usando o webpack, a menos que você mova a pasta dist para fora do modelo, suas alterações serão substituídas.
node_modules – Diretório onde o NPM instala dependências. Você não verá esta pasta até concluir a instalação do modelo. Você não precisa criar esta pasta.
src - Código fonte do modelo. Clique aqui para personalizar seu modelo.
src/assets - Ativos de modelo como CSS, JS, Imagens etc.
src/data - Arquivos de dados JSON de modelo. Usamos esses arquivos JSON para facilitar seu trabalho de inserção de conteúdo no modelo.
src/html - Páginas de modelo. Clique aqui para editar páginas existentes ou adicionar novas páginas.
src/partials - Modelos parciais do guiador.
Handlebars é um mecanismo de modelo que nos permite manter o código-fonte do nosso modelo o mais organizado e limpo possível. Ele reduz a duplicação de código e, por meio do uso de funções auxiliares, permite que os desenvolvedores de modelos produzam rapidamente grandes quantidades de dados com o mínimo de código. Você pode ler mais sobre isso aqui.
Abra o seguinte arquivo em nosso modelo: src/html/index.html.
Perto da linha 21 você verá o seguinte código:
{{> content/breadcrumbs }}Isso é uma parcial do guiador. Esse código diz ao Handlebars para procurar dentro de uma pasta chamada content (localizada na pasta parciais) e então encontrar um arquivo chamado breadcrumbs e inseri-lo no arquivo index.html quando for compilado.
Existem algumas notas importantes sobre o uso de parciais do guiador:
Todos os nossos parciais são armazenados dentro de src/partials. Não coloque parciais em nenhum outro lugar.
Usamos .html como nossa extensão de arquivo parcial. Também adicionamos .svg como uma extensão de arquivo parcial válida.
Se você tiver pastas dentro de pastas dentro de sua pasta parcial, faça referência apenas à pasta em que a parcial reside. Portanto, "partials/header/navbars/navbar.html" seria referenciado como "navbars/navbar".
Não inclua a extensão de arquivo parcial. Observe no exemplo acima que geramos "breadcrumbs" e não "breadcrumbs.html"
O plugin Webpack Handlebars que usamos vem com um utilitário muito útil que nos permite passar arquivos JSON como dados de modelo.
Navegue até: src/data. É aqui que residem nossos arquivos JSON de dados de modelo. Você pode editar, remover ou adicionar seus próprios arquivos a esta pasta.
Todos os arquivos CSS/SASS de origem do modelo são mantidos dentro da pasta de ativos do modelo. Navegue até src/assets/scss. Abra theme.scss com seu editor.
Este é o principal ponto de entrada para todos os outros arquivos SASS/CSS.
Para criar uma nova página, navegue em seu editor de código para: src/html. Para facilitar a instalação do HTML correto, clone uma página existente. Renomeie o arquivo recém-criado para qualquer URL necessário. E é isso. Agora você está livre para abrir a nova página com seu editor de código, fazer as alterações e salvar o arquivo. Saia do Webpack devserver e reinicie-o para que a página apareça.
O Bootstrap já possui um site de documentação abrangente que irá guiá-lo na configuração e uso de todos os recursos padrão do Bootstrap. Bootstrap 5 está totalmente integrado ao código fonte do nosso template. Consulte primeiro o site de documentos do Bootstrap para obter quaisquer recursos padrão do Bootstrap: Visite o site de documentos do Bootstrap
Inicialização
gráfico.js
Remover respingo
Pexels
Pixabay
Barra simples.js
Você pode encontrar nosso site aqui ou pode nos enviar um e-mail para [email protected]
