Téléchargement simple f3 bootstrap 5 multi lang site - simple f3 bootstrap 5 multi lang site Téléchargement

simple f3 bootstrap 5 multi lang site

Autres catégories

1.0.0

Télécharger

Un site Web simple et multi-langues utilisant des gras

Une configuration frontend / backend pour un site Web simple et multi-langues utilisant Bootstrap 5 et le cadre PHP sans gras ( mais pas de base de données - ce n'est pas un CMS ).

Aperçu

Combiner Bootstrap 5 avec le cadre PHP sans gras pour créer des sites Web:

Utilisez des modèles pour assembler les pages
fournir des URL propres
Prise en charge de la sélection automatique des langues
travailler sur un serveur partagé
sont faciles à installer (il suffit de copier et de coller, aucun gestionnaire de packages requis)

Auparavant, pour acquérir de l'expérience avec sans gras et bootstrap 4, j'ai créé un site de démonstration à l'aide de bootstrap 4 et sans gras, et partagé les fichiers via un référentiel GitHub.

Pour la sortie de Bootstrap 5.3, qui prend en charge le mode Dark (et ne prend plus en charge Internet Explorer), j'ai créé un nouveau site de démonstration et un nouveau référentiel.

Démo

Le code de ce référentiel est en fonctionnement sur https://sbf-bootstrap5.alwaysdata.net/, fonctionnant sur un service d'hébergement gratuit qui fournit PHP et Apache. L'intention est que le code soit un package tel que possible, plutôt qu'un simple point de départ à nu pour la construction d'un site.

Cette conception n'est pas un CMS. Il n'y a pas de base de données. Tout le contenu est dans le fichier de configuration, les fichiers de contrôleur et les modèles de contenu, qui fonctionnent bien pour les sites statiques.

Application de la configuration

Tous mes fichiers pour le site de démonstration, les fichiers de configuration, de contrôleur et de modèle sans gras, et les fichiers SCSS, image et JavaScript associés sont dans ce référentiel GitHub. Les fichiers bootstrap et sans gras sont disponibles auprès de Bootstrap et sans gras.

Il devrait être possible de remplacer le contenu spécifique de mon site par du contenu pour un site Web différent.

Ce qui est inclus (pas une liste complète)

Sans matières grasses

config.ini
routes.ini
Tous les fichiers du contrôleur
Tous les modèles pour les pages

Les fichiers sans gras ne sont pas inclus - ces fichiers sont disponibles à partir de

Amorce

Bootstrap est facile à structurer avec ses classes disponibles et à utiliser SASS. Il y a quelques choses que j'ai changé par rapport au code bootstrap standard:

Pour le menu Offcanvas de Bootstrap:
- Utilisez le bouton à bascule de Navbar pour ouvrir et fermer le menu (élimine le besoin d'un bouton de fermeture dans le menu)
- Fermez automatiquement le menu lorsqu'un lien de même page est cliqué
- Ajout d'une option pour que Focus soit sur la cible plutôt que sur le bouton de menu - nécessite de modifier le fichier source module.js
Pour des images d'arrière-plan complet avec des modaux
- Ajout is-fixed à l'image statique d'arrière-plan afin qu'elle fonctionne avec les modaux (bootstrap a la fonction, mais elle n'est pas bien documentée)

Les fichiers bootstrap ne sont pas inclus - ces fichiers sont disponibles à partir de bootstrap

Trucs de site Web général

Génération dynamique du site de site avec XHTML: liens pour les langues alternatives
Utilisez preload et picture pour fournir une sélection d'images de héros (4 smartphones, 4 tablettes et 5 ordinateur portable / moniteur) pour que le navigateur puisse sélectionner pour améliorer la vitesse de chargement des pages
Utilise le plug-in SMTP de Fatfree pour les e-mails
Pages de réponse d'erreur personnalisée

Support multi-langues

Bien que le contenu du site de démonstration soit en anglais, la démo a des pages chinoises et coréennes pour démontrer l'opération multi-langues. Les pages d'accueil chinois et coréennes ont été créées à partir de la page d'accueil anglaise à l'aide de Google Translate. Le reste des pages chinoises et coréennes, qui ne sont fournies que pour démontrer la navigation, ont simplement des traductions Google des titres et descriptions des pages anglaises.

Utilisation des polices système

Les styles de police utilisent system-ui, la même police utilisée par le système d'exploitation pour afficher le texte. Cela fournit un look similaire à ce que l'utilisateur voit sur les écrans du système, et il accélère le temps de démarrage de la page car il n'y a pas de polices à télécharger.