Utilisation du framework Bootstrap dans ThinkPHP6-PensezPHP-php.cn

Maison

cadre php

PensezPHP

Utilisation du framework Bootstrap dans ThinkPHP6

Jun 20, 2023 pm 01:51 PM

thinkphp bootstrap 框架

Avec le développement continu de la technologie de développement Web, de plus en plus de développeurs se tournent vers les frameworks front-end. Le framework Bootstrap est un framework open source populaire qui aide les développeurs à créer rapidement des interfaces Web belles et réactives. Dans cet article, nous présenterons comment utiliser le framework Bootstrap dans ThinkPHP6.

1. Installez Bootstrap à l'aide de Composer

Tout d'abord, nous devons l'installer à l'aide de Composer. Dans le répertoire de l'application ThinkPHP6, exécutez la commande suivante :

composer require twbs/bootstrap

Cela installera le framework Bootstrap et toutes ses dépendances.

2. Introduire les fichiers Bootstrap

Pour utiliser Bootstrap dans notre application, nous devons introduire ses fichiers associés dans le fichier de vue. Dans ThinkPHP6, nous pouvons utiliser le chargeur de PHP pour introduire ces fichiers.

Dans notre fichier de mise en page public (par exemple layout.blade.php), nous pouvons ajouter ce qui suit :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;title&gt;@yield('title')&lt;/title&gt;
    &lt;link href=&quot;{{ asset('vendor/bootstrap/css/bootstrap.min.css') }}&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
@yield('content')
&lt;script src=&quot;{{ asset('vendor/bootstrap/js/bootstrap.min.js') }}&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

Dans cet exemple, nous avons ajouté les fichiers CSS et JS de Bootstrap. Nous pouvons référencer des fichiers dans le répertoire d'installation de Composer en appelant la fonction Asset.

3. Utiliser les styles Bootstrap

Maintenant, nous pouvons utiliser les styles Bootstrap dans notre application. Regardons un exemple simple. Nous allons créer un fichier de vue appelé index.blade.php :

@extends('layout')

@section('title')
    Home
@endsection

@section('content')
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;jumbotron&quot;&gt;
            &lt;h1&gt;Welcome to my site!&lt;/h1&gt;
            &lt;p class=&quot;lead&quot;&gt;This is a simple example of how to use Bootstrap with ThinkPHP6.&lt;/p&gt;
            &lt;p&gt;&lt;a class=&quot;btn btn-lg btn-primary&quot; href=&quot;#&quot; role=&quot;button&quot;&gt;Learn more »&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
@endsection

Copier après la connexion

Dans cet exemple simple, nous utilisons les classes jumbotron et btn de Bootstrap. Ces classes nous aident à créer une belle page sans écrire beaucoup de CSS personnalisé.

4. Utiliser les composants Bootstrap

Bootstrap fournit également de nombreux composants qui peuvent nous aider à créer rapidement des applications Web. Voici quelques composants courants :

Formulaires : utilisés pour créer différents types d'éléments de formulaire, tels que des zones de texte, des boutons radio, des boutons à sélection multiple, des zones déroulantes, etc.
Barre de navigation : utilisée pour créer des barres de navigation réactives prenant en charge les menus déroulants et la pagination.
Page à onglets : utilisée pour afficher le contenu de plusieurs pages. Les pages peuvent être commutées via une bande d'onglets.
Boîte modale : utilisée pour créer des fenêtres contextuelles compatibles JavaScript.
Tooltip : utilisé pour créer des info-bulles et des info-bulles contextuelles.

Dans ThinkPHP6, nous pouvons utiliser ces composants facilement. Jetons un coup d'œil à un exemple de formulaire :

&lt;form&gt;
  &lt;div class=&quot;form-row&quot;&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
      &lt;label for=&quot;inputEmail4&quot;&gt;Email&lt;/label&gt;
      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;inputEmail4&quot; placeholder=&quot;Email&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
      &lt;label for=&quot;inputPassword4&quot;&gt;Password&lt;/label&gt;
      &lt;input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;inputPassword4&quot; placeholder=&quot;Password&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;inputAddress&quot;&gt;Address&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputAddress&quot; placeholder=&quot;1234 Main St&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;label for=&quot;inputAddress2&quot;&gt;Address 2&lt;/label&gt;
    &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputAddress2&quot; placeholder=&quot;Apartment, studio, or floor&quot;&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-row&quot;&gt;
    &lt;div class=&quot;form-group col-md-6&quot;&gt;
      &lt;label for=&quot;inputCity&quot;&gt;City&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputCity&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group col-md-4&quot;&gt;
      &lt;label for=&quot;inputState&quot;&gt;State&lt;/label&gt;
      &lt;select id=&quot;inputState&quot; class=&quot;form-control&quot;&gt;
        &lt;option selected&gt;Choose...&lt;/option&gt;
        &lt;option&gt;...&lt;/option&gt;
      &lt;/select&gt;
    &lt;/div&gt;
    &lt;div class=&quot;form-group col-md-2&quot;&gt;
      &lt;label for=&quot;inputZip&quot;&gt;Zip&lt;/label&gt;
      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;inputZip&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class=&quot;form-group&quot;&gt;
    &lt;div class=&quot;form-check&quot;&gt;
      &lt;input class=&quot;form-check-input&quot; type=&quot;checkbox&quot; id=&quot;gridCheck&quot;&gt;
      &lt;label class=&quot;form-check-label&quot; for=&quot;gridCheck&quot;&gt;
        Check me out
      &lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot;&gt;Sign in&lt;/button&gt;
&lt;/form&gt;

Copier après la connexion

Dans cet exemple, nous utilisons les composants de formulaire de Bootstrap, notamment les zones de texte, les zones déroulantes, les boutons radio et les cases à cocher.

Résumé

Dans ce tutoriel, nous avons présenté comment ajouter le framework Bootstrap dans ThinkPHP6. Nous avons appris à importer des fichiers Bootstrap, à utiliser des styles et des composants pour créer une belle application Web. Si vous avez besoin de plus d'informations, consultez la documentation officielle de Bootstrap.

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!

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn