apollo html bootstrap
Apollo Initial Release
Apollo é um modelo de administração Bootstrap 5 limpo e com resposta mínima.
Ver demonstração | Baixar ZIP
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
git clone https://github.com/PixelRocket-Shop/apollo-html-bootstrap.gitnpm install em sua linha de comando.npm start para iniciar o devserver Webpack.npm run build O modelo consiste nas seguintes páginas:
Bem como os seguintes widgets:
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.
? 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:
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]
