Uma configuração de front-end / back-end para um site simples e múltiplo usando o Bootstrap 4 com a estrutura PHP sem gordura, mas nenhum banco de dados.
Eu queria uma estrutura PHP para usar com o Bootstrap 4 para criar sites que seriam:
Minha escolha era livre de gordura- "um micro-quadro de php poderoso, mas fácil de usar"
Para ter certeza de que poderia construir um site, criei um; Um site sobre como eu usei o bootstrap e sem gordura para criar um site. E o site é o meu registro para o que eu fiz e por quê.
Este não é um CMS. Não há banco de dados. Todo o conteúdo está no arquivo de configuração, nos arquivos do controlador e nos modelos de conteúdo.
*NOTA: Eu tenho um repositório semelhante para o Bootstrap 5 em https://github.com/richdebourke/simple-f3-bootstrap-5-multi-lang-site.
Todo o código deste repositório está em operação em http://sbf-testing.byethost7.com. A intenção é que o código seja um pacote como possível, em vez de apenas um ponto de partida dos ossos nus para a construção de um site. A demonstração está em execução em um serviço de hospedagem gratuito que fornece PHP e Apache, mas nenhum email e a maioria dos bots está bloqueada, portanto, nenhum formulário de contato e nenhum SSL 1 (é por isso que digo um site "quase completo"), mas esses devem ser fáceis de implementar em um host de produção.
Nota 1 : O Serviço de Hosting oferece certificados autoassinados, mas não tenho certeza se o Google aceita aqueles para classificação de pesquisa. Como o serviço de hospedagem bloqueia a maioria dos bots, é difícil validar minha propriedade, por isso estou executando o site sem SSL.
Todos os meus arquivos para o site de demonstração, configuração sem gordura, controlador e arquivos de modelo e os arquivos SCSS, imagem e JavaScript associados estão neste repositório do GitHub. O bootstrap e os arquivos sem gordura estão disponíveis na bootstrap e sem gordura.
Deve ser fácil o suficiente substituir o conteúdo específico do meu site por conteúdo para um site diferente.
Os arquivos sem gordura não estão incluídos-esses arquivos estão disponíveis na FAT sem gordura
O bootstrap é fácil de estruturar com as classes disponíveis e usar o SASS. Houve duas coisas que mudei no código de bootstrap padrão:
Os arquivos de bootstrap não estão incluídos - esses arquivos estão disponíveis no bootstrap
Embora o conteúdo do site de demonstração esteja em inglês, a demonstração tem páginas chinesas e coreanas para demonstrar a operação multi-idioma. As páginas domésticas chinesas e coreanas foram criadas a partir da página inicial inglesa usando o Google Translate. O restante das páginas chinesas e coreanas, que são fornecidas apenas para demonstrar a navegação, basta ter traduções do Google dos títulos e descrições das páginas em inglês.
Para a atualização de julho de 2022, além de verificar se o site funciona com as versões mais recentes do Bootstrap 4 e JQuery sem gordura, também revisei o site para:
Use fontes do sistema-mudou do uso do Google Fontes para usar fontes system-ui . O uso do Google Fontes exige que o navegador do usuário envie uma solicitação ao Google para a folha de estilo e os arquivos de fonte necessários. Isso envolve o envio do endereço IP do usuário ao Google, que o Regulamento Geral de Proteção de Dados (GDPR) da UE não é permitido. system-ui instrui o navegador a usar a mesma fonte que o sistema operacional usa para exibir o texto. Isso fornece uma aparência semelhante ao que o usuário vê nas telas do sistema e acelera o tempo de inicialização da página, pois não há fontes para baixar.
O Bootstrap & JQuery Arquivos de auto-host-mudou do uso de redes de entrega de conteúdo para arquivos de estrutura e biblioteca para fornecer os arquivos do meu servidor, novamente devido ao requisito do GDPR para não compartilhar endereços IP do usuário com outros sites. Agora estou usando o webpack para combinar jQuery, bootstrap javaScript, jQuery Easing Plugin e o javascript para o site em um arquivo (um arquivo baixará mais rápido).
O suporte prefere movimento reduzido-enquanto o Boostrap já suportou a configuração do usuário para movimento reduzido, não ajustei as animações do jQuery. Eu faço agora.
Suporte Prefere-C-Color-Scheme-Adicionado um formato de modo escuro para usuários que preferem um formato escuro em vez de um formato de luz.
O site de demonstração funciona com as versões mais recentes de:
E com:
Este código é fornecido sob uma licença do MIT. Consulte o arquivo de licença para obter detalhes.
A gordura é fornecida sob uma licença pública da GNU (GPL V3)
Bootstrap é fornecido sob uma licença do MIT
A navegação offcanvas é fornecida sob uma licença do MIT
2018/09/23 - liberação inicial.
2019/01/02 -Validou o site funciona com 3.6.5 sem gordura e atualizou parte do conteúdo da página para obter melhores resultados dos mecanismos de pesquisa.
2019/05/05 - validado O site funciona com o JQuery 3.4.1 e o bootstrap 4.3.1.
2019/05/27 - moveu a seção para o Aviso de Cookie da UE para a parte inferior da página, pois o Google às vezes incluía o texto do aviso no snippet em algumas páginas de resultados do mecanismo de pesquisa.
2019/07/02 - display=swap nas fontes do Google, que elimina a necessidade de um gerente de font, pelo menos para o Google Fontes (eu estava usando o Font Face Observer).
2020/01/20 -Validado O site funciona com 3.7.1 e bootstrap 4.4.1, sem gordura e fez algumas edições menores com o conteúdo.
2020/07/05 -Validou o site que trabalha com 3.7.2, sem gordura, Bootstrap 4.5.0 e JQuery 3.5.1, eliminaram os arquivos CSS não minificados (apenas fornecendo arquivos CSS minificados no site) e fiz algumas edições menores para o conteúdo (incluindo uma explicação sobre como estou fazendo SASS no código VS).
2022/07/15 -Validado O site funciona com 3.8.0 sem gordura, bootstrap 4.6.1 e jQuery 3.6.0, mudou de fontes do Google para o uso de fontes do sistema, adicionou suporte para movimento reduzido e modo escuro e atualizou o conteúdo.
2022/11/17 - Validado O site funciona com o JQuery 3.6.1 e mudou para fornecer imagens WebP normais e de alta resolução para modos claros e escuros usando elementos de imagem e origem.
2023/07/09 -Adicione o link ao Bootstrap 5.3 com o repositório de estrutura PHP sem gordura.
2023/10/07 - Validado O site funciona com o Bootstrap 4.6.2 e o JQuery 3.7.1. O host do site de demonstração agora está executando o Php 8.2, então a demonstração agora está usando 3.8.2 sem gordura.