Bootstrap 4 - Configuration de l'environnement

Vous pouvez commencer à utiliser Bootstrap 4 sur votre site Web en l'incluant à partir du CDN (Content Delivery Network) ou en le téléchargeant à partir de getbootstrap.com .

Utiliser CDN

Le Bootstrap 4 peut être utilisé dans le site Web en l'incluant à partir du réseau de diffusion de contenu .

Utilisez le CDN de Bootstrap compilé ci-dessous de CSS et JS dans votre projet.

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet" 
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" 
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" 
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" 
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" 
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" 
   crossorigin = "anonymous">
</script>

Incluez les versions CDN de jQuery et Popper.js (Bootstrap 4 utilise jQuery et Popper.js pour utiliser des composants JavaScript tels que des modaux, des info-bulles, des popovers, etc.) avant le JavaScript Bootstrap minifié , si vous utilisez la version compilée de JavaScript.

Voici quelques composants qui nécessitent jQuery -

Utilisé pour les alertes fermables
Basculer les états en utilisant des boutons et des cases à cocher / boutons radio et réduire pour basculer le contenu
Carrousel pour les diapositives, les commandes et les indicateurs
Dropdowns (utilise le Popper.js pour un positionnement parfait)
Ouvrez et fermez les modaux
Pour réduire la barre de navigation
Info-bulles et popovers (utilise le Popper.js pour un positionnement parfait)

Téléchargement de Bootstrap 4

Vous pouvez télécharger le Bootstrap 4 à partir de https://getbootstrap.com/docs/4.1/getting-started/download/. Lorsque vous cliquez sur ce lien, vous verrez un écran comme indiqué ci-dessous -

Ici vous pouvez voir deux boutons -

Download- En cliquant dessus, vous pouvez télécharger les versions précompilées et minifiées du CSS et du JavaScript de Bootstrap. Aucune documentation ou fichiers de code source d'origine ne sont inclus.
Download Source - En cliquant dessus, vous pouvez obtenir les derniers fichiers Bootstrap SCSS, code source JavaScript et documentation.

Pour une meilleure compréhension et facilité d'utilisation, nous utiliserons la version précompilée de Bootstrap tout au long du didacticiel. Comme les fichiers sont respectés et minifiés, vous n'avez pas à vous soucier à chaque fois d'inclure des fichiers séparés pour des fonctionnalités individuelles.

Structure des fichiers

Bootstrap précompilé 4

Une fois la version compilée Bootstrap 4 téléchargée, extrayez le fichier ZIP et vous verrez la structure de fichier / répertoire suivante -

Comme vous pouvez le voir, il existe des CSS et JS compilés (bootstrap. *), Ainsi que des CSS et JS compilés et minifiés (bootstrap.min. *).

Code source Bootstrap 4

Si vous avez téléchargé le code source de Bootstrap 4, la structure du fichier serait la suivante -

Les fichiers sous js / et scss / sont le code source pour Bootstrap CSS et JavaScript.
Le dossier dist / comprend tout ce qui est répertorié dans la section de téléchargement précompilée ci-dessus.
La documentation / exemples / inclut le code source de la documentation Bootstrap et des exemples d'utilisation de Bootstrap.

Création de la première page Web avec Bootstrap 4

L'exemple ci-dessous spécifie une page Web simple de Bootstrap 4 -

Exemple

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">
      
      <!-- Bootstrap CSS -->
      <link rel = "stylesheet" 
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      
      <title>Bootstrap 4 Example</title>
   </head>
   
   <body>
      <h2>Hello, world!!! Welcome to Tutorialspoint...</h2>
      
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
      
      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
      
   </body>
</html>

Il produira le résultat suivant -

Production

↰ Previous page Next page ↱