Wiki Bootstrap 4 (janvier 2020)

Pourquoi utiliser Bootstrap ?

Bootstrap est un framework frontal gratuit pour un développement Web plus rapide et plus facile à mettre en place.

Bootstrap comprend des modèles de conception HTML et CSS pour la typographie, les formuliares, les tableaux, la navigation, les fenêtres modales, les carrosels d'images et bien d'autres, ainsi que des plugins Javascript en option.

Bootstrap vous donne également la possibilité de créer facilement des conceptions réactives (responsive designs).

Mais c'est quoi le Responsive Design ?

Le Responsive Design (ou la conception réactive en bon français), consiste à créer des sites Web qui s'ajustent automatiquement pour bien paraître sur tous les appareils, des petits téléphones mobiles aux larges écrans des ordinateurs de bureau.

Un exemple :

                    
                        <div class="jumbotron text-center">
                        
    <h1>Ma Première Page Bootstrap</h1>
                        
    <p>Redimenssionnez cette page responsive pour voir l'effet !</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>

Ce qui donnera (redimensionnez la page pour voir l'effet) :

Ma Première Page Bootstrap

Redimensionnez la page responsive pour voir l'effet!

Colonne 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Colonne 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Colonne 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...

Bootstrap 3 vs Bootstrap 4

Bootstrap 4 est la dernière version de Bootstrap; avec de nouveaux composants, une feuille de stylle plus rapide et avec plus de réactivité

Bootstrap 4 prend en charge les dernières versions stables de tous les principaux navigateurs et plateformes. Cependant Internet Explorer 9 est version ultérieures ne sont pas pris en charge.

Si vous avez besoin de la prise en charge d'IE8-9, utilisez Bootstrap 3. C'est la version la plus stable de Bootstrap, et elle est toujours prise en charge par l'équipe pour les corrections de bogues critiques et les modifications de la documentation. Cependant, aucune nouvelle fonctionnalité n'y sera ajoutée.

Prise en charge des icônes supprimées: Bootstrap 4 ne prend pas en charge les glyphicons BS3. Utilisez plutôt Font-Awesome ou d'autres bibliothèques d'icônes.

Pourquoi Utiliser Bootstrap ?

Les avantages de Bootstrap :

  • Facile à utiliser: Quiconque ayant une connaissance de base en HTML et CSS peut commencer à utiliser Bootstrap
  • Fonctionnalitéss réactives (responsive): le CSS réactif de Bootstrap s'adapte aux téléphones, tablettes et ordinateurs de bureau
  • Approche Mobile-First: dans Bootstrap, les styles Mobile-First font partie du framework 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.

Vous pouvez:

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

Bootstrap 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).

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

MaxCDN
                    
                        <!-- CSS le plus récent compilé er réduit -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

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


                        <!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>


                        <!-- Dernier JavaScript compilé -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Aavantage de l'utilisation du Bootstrap 4 CDN:

De nombreux utilisateurs ont déjà téléchargé Bootstrap 4 depuis MaxCDN lorsqu'ils visitent un autre site. Par conséquent, il sera chargé à partir du cache lors de leur visite sur votre site, ce qui accélérera le chargement. De plus, la plupart des CDN s'assurent qu'une fois qu'un utilisateur lui demande un fichier, celui-ci sera servi depuis le serveur le plus proche, ce qui accélère également le chargement.

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 simplement la partie CSS de Bootstrap, vous n'en avez pas besoin.

Les composants Bootstrap ayant besoin de jQuery :

  • Alertes fermables
  • Boutons et cases à cocher / boutons radio pour basculer entre les états
  • Carrousel pour diapositives, commandes et indicateurs
  • Réduire (Collapse) pour basculer le contenu
  • Dropdowns (nécessite également Popper.js pour un positionnement parfait)
  • Fenêtres Modales (ouvert et fermé)
  • Navbar (pour les menus pliables)
  • Infobulles et popovers (nécessite également Popper.js pour un positionnement parfait)
  • Scrollspy pour le comportement de défilement et les mises à jour de navigation

Télécharger Bootstrap 4

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

Créez votre première page 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="fr">
                        
    <head>
                        
        <meta charset="utf-8">
                        
    </head>

                        </html>

2. Bootstrap 4 est d'abord mobile

Bootstrap 4 est conçu pour répondre aux appareils mobiles. Les styles axés sur les mobiles font partie du framework de base.

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

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

La partie width=device-width définit la largeur de la page pour suivre la largeur d'écran de l'appareil (qui variera en fonction de l'appareil).

La partie initiale-scale=1 définit le niveau de zoom initial lors du premier chargement de la page par le navigateur.

3. Les Conteneurs (containers)

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

Vous avez le choix entre deux classes de conteneurs :

  1. La classe .container fournit un conteneur de largeur fixe réactif
  2. La classe .container-fluid fournit un conteneur pleine largeur, couvrant toute la largeur de la fenêtre
.container
.container-fluid

Deux pages de base Bootstrap 4

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

Exemple de Conteneur
                    
                        <!DOCTYPE html>

                        <html lang="en">

                        <head>
                        
    <title>Exemple Bootstrap 4</title>
                        
    <meta charset="utf-8">
                        
    <meta name="viewport" content="width=device-width, initial-scale=1">
                        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
                        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                        
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
                        
</head>
                        
<body>
                        

<div class="container">
                        
    <h1>Ma Première Page Bootstrap</h1>
                        
    <p>Ceci est du texte.</p>
                        
</div>
                        

</body>

                        </html>

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

Exemple de Conteneur Fluide
                    
                        <!DOCTYPE html>

                        <html lang="en">

                        <head>
                        
    <title>Exemple Bootstrap 4</title>
                        
    <meta charset="utf-8">
                        
    <meta name="viewport" content="width=device-width, initial-scale=1">
                        
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
                        
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                        
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
                        
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
                        
</head>
                        
<body>
                        

<div class="container-fluid">
                        
    <h1>Ma Première Page Bootstrap</h1>
                        
    <p>Ceci est du texte.</p>
                        
</div>
                        

</body>

                        </html>

Cette page est la traduction de la page https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp