Comment utiliser Bootstrap en programmation PHP ?

Avec le développement continu de la technologie Internet, l'application de frameworks front-end est de plus en plus répandue. Bootstrap est un framework frontal open source qui fournit de riches composants CSS et JavaScript pour aider les développeurs à créer rapidement des sites Web et des applications Web avec des mises en page réactives. En programmation PHP, l'utilisation de Bootstrap peut améliorer l'expérience utilisateur et la lisibilité de la page. Cet article présentera les méthodes et techniques d'utilisation de Bootstrap en programmation PHP.

1. Télécharger Bootstrap

Tout d'abord, vous devez télécharger la dernière version de Bootstrap depuis le site officiel (https://getbootstrap.com). Généralement, nous téléchargerons un fichier packagé contenant des fichiers CSS, JavaScript et des polices.

2. Présentez les fichiers Bootstrap

Après avoir décompressé le fichier téléchargé, copiez les fichiers des dossiers CSS et JavaScript dans les répertoires correspondants de votre projet de site Web. Introduisez les fichiers CSS et JavaScript de Bootstrap dans le fichier PHP :

<link rel="stylesheet" href="path/to/bootstrap.css">
<script src="path/to/bootstrap.js"></script>

Ensuite, vous pouvez utiliser tous les composants et styles fournis par Bootstrap dans la page.

3. Utilisation des composants Bootstrap

Bootstrap fournit un riche ensemble de composants qui peuvent aider les développeurs à créer rapidement des sites Web et des applications Web. Voici quelques composants Bootstrap couramment utilisés :

(1) Barre de navigation

La barre de navigation est une partie importante du site Web et Bootstrap fournit une multitude de composants de barre de navigation. Ce qui suit est une barre de navigation de base :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Logo</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

(2) Boutons

Les boutons sont l'un des composants importants fournis par Bootstrap. Vous pouvez utiliser le code suivant pour créer un bouton :

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Les boutons peuvent être personnalisés en définissant différentes couleurs. et tailles besoins.

(3) Tables

Créez facilement de belles tables avec Bootstrap. Voici le code d'un formulaire de base :

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

(4) Formulaire

Bootstrap fournit une multitude de composants de formulaire. Ce qui suit est un formulaire de base :

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

4. Conception Web réactive

Bootstrap fournit également une conception Web réactive. soutien. Les développeurs peuvent utiliser le système Grid de Bootstrap pour définir la mise en page des pages Web. Voici un exemple simple :

<div class="container">
  <div class="row">
    <div class="col-sm-4">1 of 3</div>
    <div class="col-sm-4">2 of 3</div>
    <div class="col-sm-4">3 of 3</div>
  </div>
</div>

Dans l'exemple ci-dessus, la page est divisée en trois colonnes, et lorsque la largeur d'écran de la page Web change, la largeur de ces trois colonnes sera également automatiquement ajustée.

Résumé :

Cet article explique comment utiliser Bootstrap pour créer de superbes sites Web et applications Web en programmation PHP, y compris le téléchargement et l'introduction de fichiers Bootstrap, l'utilisation de composants Bootstrap, la conception Web réactive, etc. Bien sûr, Bootstrap fournit de nombreux styles et composants. J'espère que les développeurs pourront utiliser pleinement ces composants dans la pratique, améliorer l'efficacité du développement et créer une meilleure expérience pour les utilisateurs.

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!