Comment introduire l'interface utilisateur frontale dans Laravel

Avec le développement continu des applications Web et l'augmentation des besoins des utilisateurs, le cadre d'interface utilisateur frontale est progressivement devenu une partie importante du développement d'applications Web. Parmi les nombreux concours dans ce domaine, Bootstrap et Foundation sont les deux frameworks les plus populaires et les plus couramment adoptés. Cependant, les deux frameworks ont des processus d’installation et de configuration relativement fastidieux qui nécessitent beaucoup de temps et d’efforts. Dans le framework Laravel, ces problèmes sont bien résolus.

Laravel est un framework d'application Web PHP et l'un des frameworks PHP les plus populaires actuellement. Le framework Laravel intègre un grand nombre d'outils, tels que les outils de ligne de commande Artisan, Eloquent ORM, les modèles Blade, etc. Ces outils permettent aux développeurs de créer des applications Web rapidement et efficacement. De plus, Laravel fournit un moyen simple d'introduire une interface utilisateur frontale, notamment Bootstrap et Foundation. Ci-dessous, nous détaillerons comment introduire l'interface utilisateur frontale dans les applications Laravel.

Présentation de Bootstrap

Bootstrap est un framework d'interface utilisateur frontal populaire développé par Twitter et est idéal pour créer des applications Web réactives et adaptées aux mobiles. Dans Laravel, l'installation de Bootstrap est rapide et facile avec Composer.

Tout d'abord, vous devez vous assurer que Composer est installé sur votre application. Accédez ensuite au répertoire de votre application Laravel dans le terminal et exécutez la commande suivante :

composer require twbs/bootstrap

Cela téléchargera et installera la dernière version de Bootstrap dans le dossier fournisseur de votre projet.

Ensuite, vous devez introduire Bootstrap dans votre application. Dans Laravel, vous pouvez facilement y parvenir en suivant les étapes suivantes.

1. Téléchargez le fichier de ressources dans votre répertoire public (généralement le répertoire public).

php artisan vendor:publish --tag=bootstrap --force

Cela téléchargera le CSS, le JS et les polices de Bootstrap dans votre répertoire public/vendor/bootstrap.

2. Introduisez les ressources Bootstrap dans le fichier de mise en page de votre application (généralement dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e) :

<link href="{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}" rel="stylesheet">
<script src="{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}"></script>

La version actuelle de Bootstrap ne prend en charge que jQuery, vous avez donc besoin pour vous assurer que jQuery est installé dans votre application.

Introducing Foundation

Foundation est un autre framework d'interface utilisateur frontal populaire et un bon choix pour créer des applications Web réactives et adaptées aux mobiles. Comme Bootstrap, l'introduction de Foundation à l'aide de Composer est également très simple. Les opérations spécifiques sont les suivantes.

Allez dans le répertoire de votre application Laravel dans le terminal et exécutez la commande suivante :

composer require zurb/foundation

Cela téléchargera et installera la dernière version de Foundation dans le dossier fournisseur de votre projet.

Ensuite, vous devez introduire Foundation dans votre candidature. Dans Laravel, vous pouvez facilement y parvenir en suivant les étapes suivantes.

1. Téléchargez le fichier de ressources dans votre répertoire public (généralement le répertoire public).

php artisan vendor:publish --tag=foundation --force

Cela téléchargera les CSS, JS et les polices de Foundation dans votre répertoire public/fournisseur/foundation.

2. Introduisez les ressources Foundation dans le fichier de mise en page de votre application (généralement dans la balise 93f0f5c25f18dab9d176bd4f6de5d30e) :

<link href="{{ asset('vendor/foundation/css/foundation.min.css') }}" rel="stylesheet">
<script src="{{ asset('vendor/foundation/js/foundation.min.js') }}"></script>

La version actuelle de Foundation prend en charge jQuery et Zepto, vous devez vous assurer que l’une de ces bibliothèques est installée dans votre application.

Résumé

Dans cet article, nous avons présenté comment introduire l'interface utilisateur frontale dans l'application Laravel. Bootstrap et Foundation sont des frameworks largement adoptés dans le développement d'applications Web. Ils fournissent un riche ensemble de composants et de styles qui permettent aux développeurs de créer rapidement des applications Web réactives et adaptées aux mobiles. Dans Laravel, vous pouvez utiliser Composer pour installer facilement ces frameworks et introduire facilement des fichiers de ressources dans votre application. J'espère que cet article pourra vous fournir de l'aide et des conseils dans le processus de développement d'applications Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!