18. Composants Bootstrap : boutons, formulaires, carrousel

Composants Bootstrap : boutons, formulaires, carrousel

Bootstrap est l'une des bibliothèques les plus populaires en matière de développement front-end. Il offre une variété de composants prêts à l'emploi qui peuvent accélérer considérablement le processus de développement. Dans ce chapitre, nous nous concentrerons sur trois composants principaux : les boutons, les formulaires et le carrousel.

Boutons

Les boutons sont un élément essentiel de toute interface utilisateur et Bootstrap propose une large gamme de styles de boutons. Pour créer un bouton dans Bootstrap, vous devez utiliser le bouton <button> avec la classe .btn et l'une des classes de style de bouton, par exemple .btn-primary pour un bouton bleu.

<button type="button" class="btn btn-primary">Bouton principal</button>

En plus des styles de boutons, Bootstrap propose également des classes pour différentes tailles de boutons, boutons de bordure, boutons de groupe, etc.

Formulaires

Les formulaires constituent un autre élément crucial de toute application Web. Bootstrap propose des cours pour créer des formulaires d'aspect professionnel avec validation de formulaire, styles de saisie, zones de texte, cases à cocher, boutons radio, etc.

Pour créer un formulaire dans Bootstrap, vous devez utiliser l'outil <form> avec la classe .form. Chaque champ de formulaire est ensuite créé à l'aide de l'attribut <div> avec la classe .form-group pour regrouper l'étiquette et le champ de saisie.

<formulaire>
  <div class="form-group">
    <label for="exampleInputEmail1">Adresse e-mail</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describeby="emailHelp">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Mot de passe</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <button type="submit" class="btn btn-primary">Soumettre</button>
</formulaire>

Ceci est un exemple de formulaire simple avec deux champs : un pour l'e-mail et un pour le mot de passe. Bootstrap propose également des classes pour ajouter des info-bulles, des messages d'erreur, etc.

Carrousel

Le carrousel est un composant qui vous permet d'afficher une série d'images (ou d'autres contenus) dans une séquence rotative. Il est couramment utilisé pour afficher une série d'images en vedette sur la page d'accueil d'un site Web.

Pour créer un carrousel dans Bootstrap, vous devez utiliser l'option <div> avec la classe .carousel. Chaque élément du carrousel est ensuite créé à l'aide de l'attribut <div> avec la classe .carousel-item.

<div id="carouselExampleIndicators" class="diapositive du carrousel" data-ride="carousel">
  <ol class="indicateurs-carrousel">
    <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
    <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
  </ol>
  <div class="carrousel-inner">
    <div class="élément-carrousel actif">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carrousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carrousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Précédent</span>
  ≪/a>
  <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Suivant</span>
  ≪/a>
</div>

Ceci est un exemple de carrousel simple avec trois images. Bootstrap propose également des options pour ajouter des légendes d'images, des commandes de navigation et des signets.

En résumé, Bootstrap propose une variété de composants qui peuvent rendre le processus de développement beaucoup plus rapide et plus facile. Cependant, il est important de rappeler que Bootstrap n'est qu'un outil et ne remplace pas une bonne connaissance de HTML, CSS et JavaScript.

Page suivante de lebook gratuit :

65Introduction à Javascript : variables, types de données, opérateurs

0 minutes