Bootstrap 4 Commencer

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.

Bootstrap 4 Exemple

<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>

Versions d'amorçage

Ce tutoriel fait suite à Bootstrap 4 , sorti en 2018, en tant que mise à niveau vers Bootstrap 3 , avec de nouveaux composants, une feuille de style plus rapide, plus de réactivité, etc.

Bootstrap 5 (publié en 2021) est la dernière version de Bootstrap ; 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.

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, les styles mobiles d'abord font partie du cadre de base
Compatibilité du navigateur : Bootstrap 4 est compatible avec tous les navigateurs modernes (Chrome, Firefox, Internet Explorer 10+, Edge, Safari et Opera)

Où obtenir Bootstrap 4 ?

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

Tu peux:

Inclure Bootstrap 4 à partir d'un CDN
Téléchargez Bootstrap 4 sur getbootstrap.com

Amorçage 4 CDN

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

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

jsDelivr :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Un avantage de l'utilisation du CDN Bootstrap 4 : de
nombreux utilisateurs ont déjà téléchargé Bootstrap 4 depuis jsDelivr 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 et Popper ?
Bootstrap 4 utilise jQuery et Popper.js pour les composants JavaScript (comme les modaux, les info-bulles, les popovers, etc.). Cependant, si vous utilisez uniquement la partie CSS de Bootstrap, vous n'en avez pas besoin.

Alertes fermables
Boutons et cases à cocher/boutons radio pour basculer entre les états
Carrousel pour diapositives, commandes et indicateurs
Réduire pour basculer le contenu
Dropdowns (also requires Popper.js for perfect positioning)
Modals (open and close)
Navbar (for collapsible menus)
Tooltips and popovers (also requires Popper.js for perfect positioning)
Scrollspy for scroll behavior and navigation updates

Téléchargement de Bootstrap 4

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

Créer la première page Web avec Bootstrap 4

1. Ajouter le doctype HTML5

Bootstrap 4 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 4 est mobile d'abord

Bootstrap 4 est conçu pour répondre 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 :

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 4 nécessite également un élément contenant pour envelopper le contenu du site.

Vous avez le choix entre deux classes de conteneurs :

La .containerclasse fournit un conteneur réactif à largeur fixe
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 4

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

Exemple de conteneur

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 4 de base (avec un conteneur pleine largeur) :

Exemple de fluide de conteneur

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.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 ❯

Tutoriel Bootstrap 4

Grille d'amorçage 4

Bootstrap 4 Autre

Bootstrap 4 Ref