HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Bootstrap Commencer

❮ Précédent Suivant ❯

Qu'est-ce que Bootstrap ?

  • Bootstrap est un framework frontal gratuit pour un développement Web plus rapide et plus facile
  • Bootstrap comprend des modèles de conception basés sur HTML et CSS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et bien d'autres, ainsi que des plugins JavaScript facultatifs
  • Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives

Qu'est-ce que le Responsive Web Design ?

La conception Web réactive consiste à créer des sites Web qui s'adaptent automatiquement pour bien paraître sur tous les appareils, des petits téléphones aux grands ordinateurs de bureau.

Exemple d'amorçage

<div class="jumbotron text-center">
  <h1>My First Bootstrap Page</h1>
  <p>Resize this responsive page to see the effect!</p>
</div>

<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor..</p>
    </div>
  </div>
</div>

Historique d'amorçage

Bootstrap a été développé par Mark Otto et Jacob Thornton sur Twitter et publié en tant que produit open source en août 2011 sur GitHub.

En juin 2014, Bootstrap était le projet n°1 sur GitHub !

Pourquoi utiliser Bootstrap ?

Avantages de Bootstrap :

  • Facile à utiliser : toute personne ayant des connaissances de base en HTML et CSS peut commencer à utiliser Bootstrap.
  • Fonctionnalités réactives : le CSS réactif de Bootstrap s'adapte aux téléphones, tablettes et ordinateurs de bureau
  • Approche mobile d'abord : dans Bootstrap 3, les styles mobiles d'abord font partie du cadre de base
  • Compatibilité du navigateur : Bootstrap est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer, Edge, Safari et Opera)

Versions d'amorçage

Ce didacticiel fait suite à Bootstrap 3 , qui a été publié en 2013. Cependant, nous couvrons également les versions plus récentes ; Bootstrap 4 (sortie en 2018) et Bootstrap 5 (sortie en 2021) .

Bootstrap 5 est la dernière version de Bootstrap ; avec de nouveaux composants, des feuilles de style plus rapides, plus de réactivité, etc. Il prend en charge les dernières versions stables de tous les principaux navigateurs et plates-formes. Cependant, Internet Explorer 11 et versions antérieures ne sont pas pris en charge.

Les principales différences entre Bootstrap 5 et Bootstrap 3 & 4, c'est que Bootstrap 5 est passé à JavaScript au lieu de jQuery .

Remarque : Bootstrap 3 et Bootstrap 4 sont toujours pris en charge par l'équipe pour les corrections de bogues critiques et les modifications de la documentation, et il est parfaitement sûr de continuer à les utiliser. Cependant, de nouvelles fonctionnalités ne leur seront PAS ajoutées.

Où obtenir Bootstrap ?

Il existe deux façons de commencer à utiliser Bootstrap sur votre propre site Web.

Tu peux:

  • Télécharger Bootstrap depuis getbootstrap.com
  • Inclure Bootstrap à partir d'un CDN

Téléchargement de Bootstrap

Si vous souhaitez télécharger et héberger Bootstrap vous-même, rendez-vous sur getbootstrap.com et suivez les instructions qui s'y trouvent.

CDN d'amorçage

Si vous ne souhaitez pas télécharger et héberger Bootstrap vous-même, vous pouvez l'inclure à partir d'un CDN (Content Delivery Network).

MaxCDN fournit un support CDN pour CSS et JavaScript de Bootstrap. Vous devez également inclure jQuery :

CDN maximal :

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

Un avantage de l'utilisation du CDN Bootstrap : de
nombreux utilisateurs ont déjà téléchargé Bootstrap à partir de MaxCDN lorsqu'ils visitent un autre site. Par conséquent, il sera chargé à partir du cache lorsqu'ils visiteront votre site, ce qui accélérera le temps de chargement. De plus, la plupart des CDN s'assureront qu'une fois qu'un utilisateur lui demande un fichier, il sera servi à partir du serveur le plus proche de lui, ce qui entraîne également un temps de chargement plus rapide.

jQuery
Bootstrap utilise jQuery pour les plugins JavaScript (comme les modaux, les info-bulles, etc.). Cependant, si vous utilisez uniquement la partie CSS de Bootstrap, vous n'avez pas besoin de jQuery.

Créer la première page Web avec Bootstrap

1. Ajouter le doctype HTML5

Bootstrap utilise des éléments HTML et des propriétés CSS qui nécessitent le doctype HTML5.

Incluez toujours le doctype HTML5 au début de la page, ainsi que l'attribut lang et le jeu de caractères correct :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

2. Bootstrap 3 est mobile d'abord

Bootstrap 3 est conçu pour être réactif aux appareils mobiles. Les styles axés sur le mobile font partie du cadre de base.

Pour garantir un rendu et un zoom tactile corrects, ajoutez la <meta>balise suivante à l'intérieur de l' <head>élément :

<meta name="viewport" content="width=device-width, initial-scale=1">

La width=device-widthpartie définit la largeur de la page pour suivre la largeur de l'écran de l'appareil (qui varie selon l'appareil).

La initial-scale=1partie définit le niveau de zoom initial lorsque la page est chargée pour la première fois par le navigateur.

3. Conteneurs

Bootstrap nécessite également un élément conteneur pour envelopper le contenu du site.

Vous avez le choix entre deux classes de conteneurs :

  1. La .containerclasse fournit un conteneur réactif à largeur fixe
  2. La .container-fluidclasse fournit un conteneur pleine largeur , couvrant toute la largeur de la fenêtre d'affichage
.récipient
.conteneur-fluide

Deux pages Bootstrap de base

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur réactif à largeur fixe) :

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

L'exemple suivant montre le code d'une page Bootstrap de base (avec un conteneur pleine largeur) :

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

❮ Précédent Suivant ❯