1. Accueil
  2. Développement
  3. HTML, CSS, JavaScript...
  4. frameworks

Un framework CSS

Bootstrap V4 : Introduction

La mise en page de sites Web facile

Décrit comment démarrer avec le framework CSS/JavaScript Bootstrap version 4.

Il est maintenant possible de développer des pages Web très ergonomiques en HTML   5 et qui n’ont plus rien à envier aux interfaces natives. Mais cela demande aussi d’avoir une bonne connaissance des règles CSS  . C’est pour palier ce problème que certaines librairies comme Bootstrap ont été développées. Ces dernières vont nous simplifier la vie en nous proposant une collection de styles prêts à l’emploi ainsi que des fonctions pour définir des menus, des mise en pages RWD   etc...

 Présentation

Bootstrap est un framework composé principalement d’une feuille de style CSS   prête à l’emploi accompagnée d’un peu de javascript. Elle fournit un certain nombre de styles par défaut dont certains permettent de définir des écrans RWD  . Pour certaines fonctionnalités, vous devrez également inclure à votre projet, les librairies jquery et popper.js.

La dernière version disponible à la date d’écriture de cet article est la version 4, c’est donc cette dernière qui sera utilisée dans les exemples qui suivront.

Remarque : Comme pour les versions précédentes, la version 4 n’est pas compatible avec la version 3 donc, l’adaptation d’un ancien site en version 3 vers la version 4 pourra demander pas mal de travail. De plus, les anciens navigateurs de Microsoft ne sont également plus supportés.

 Configuration d’un projet

Sur le site officiel de Bootstrap, vous trouverez des explications sur les différentes méthodes possibles d’intégration de Bootstrap à votre projet.

Dans cet article d’initiation, nous vous présenterons les 2 méthodes les plus simples pour utiliser le framwork.

  • Utilisation du CDN  
  • Effectuer une copie du framework sur son serveur du site

Utilisation de BootStrapCDN

La première méthode est sans doute la plus simple puisqu’il suffit de suivre les explications se trouvant ici

Cette méthode se résume à réaliser un copier coller de la ligne de lien au fichier CSS   dans la rubrique head de vos fichiers HTML   et de recopier les 3 lignes qui effectuent les liens avec les fichiers JavaScript en fin de fichier avant la balise de fermeture du bloc body.

Vous devriez vous retrouver avec un squelette de fichier comme celui-ci :

  1. <!DOCTYPE html>
  2. <html lang="en">
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
  8.        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
  9.        crossorigin="anonymous">
  10.   <title>Document</title>
  11. </head>
  13.  
  14.   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  15.          integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
  16.          crossorigin="anonymous"></script>
  17.   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
  18.          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
  19.          crossorigin="anonymous"></script>
  20.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
  21.          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
  22.          crossorigin="anonymous"></script>
  23. </body>
  24. </html>

Télécharger

Effectuer une copie sur le serveur du site

Si vous devez créer un site utilisant bootstrap sur un intranet d’entreprise sur un réseau privé, vous devrez recopier les différents fichiers sur votre serveur local.

La première chose à faire est donc de télécharger les différents fichiers depuis le site de Bootstrap à l’adresse suivante :

http://getbootstrap.com/

Cliquez sur le bouton Download.

Vous devriez récupérer un fichier nommé bootstrap-4.0.0-dist.zip (à la date de rédaction de cet article).

Une fois l’archive décompressée, vous devriez trouver un répertoire avec le contenu suivant ;

Il suffit de recopier ce répertoire dans l’arborescence de votre site.

ATTENTION : Cette archive ne contient ni jQuery ni Poppers, 2 librairies qui sont indispensables à certaines fonctions de Bootstrap. Vous devrez donc les télécharger et les ajouter.

Vous pourrez télécharger jQuery (version 3.3.1 à la date de rédaction de l’article) à l’adresse suivante : ici

Vous pourrez télécharger Poppers.js (librairie d’affichage d’info bulles) ici.

Cliquez sur le bouton download zip pour récupérer une archive contenant le fichier :

Vous devriez récupérer le fichier popper.min.js

Vous pourrez ajouter ces 2 fichiers dans l’arborescence de Bootstrap dans le dossier js par exemple.

Vous devriez maintenant disposer de l’ensemble des fichiers pour pouvoir utiliser Boostrap. Dans les exemples qui suivront, nous considérerons qu’ils sont tous dans l’un des sous-répertoires bootstrap/css et bootstrap/js.

Il suffira d’ajouter les lignes suivantes dans nos fichiers html   pour pouvoir utiliser la librairie.

Pour la feuille de style bootstrap :

  1. <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

Pour la librairie jQuery :

  1. <script src="bootstrap/js/jquery-3.3.1.min.js"></script>

Pour la librairie Javascript de bootstrap :

  1. <script src="bootstrap/js/bootstrap.min.js"></script>

Si vous utilisez poppers pour les info-bulles :

  1. <script src="bootstrap/js/popper.min.js"></script>

Nous avons maintenant tout ce qu’il faut pour créer des page Web avec Bootstrap.

 Squelette d’une page Bootstrap

Nous allons d’abord créer un fichier html qui nous servira de base à l’ensemble des pages que nous créerons par la suite :

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  7.     <title>Bootstrap 4: Exemple </title>
  8.     <!-- feuille de style bootstrap -->
  9.     <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
  10.   </head>
  11.   <body>
  12.  
  13.     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  14.     <script src="jquery/jquery-3.3.1.min.js"></script>
  15.     <!-- Include all compiled plugins (below), or include individual files as needed -->
  16.     <script src="bootstrap/js/bootstrap.min.js"></script>
  17.   </body>
  18. </html>

Télécharger

Il s’agit d’un fichier HTML 5 auquel on a ajouté les références aux différentes feuilles de styles et librairies Javascript.

 Premiers exemples avec Bootstrap

Pour tester que bootstrap fonctionne nous allons ajouter un entête de page et un peu de texte en utilisant des styles prédéfinis dans la librairie. Dans la balise body ajoutons le code suivant :

  2.   <div class="jumbotron">
  3.     <div class="container">
  4.       <h1 class="display-4">Exemple avec Bootstrap</h1>
  5.       <p>Exemple de site utilisant bootstrap pour sa mise en page.</p>
  6.     </div><!-- /container -->
  7.     </div><!-- /jumbotron -->
  8.   </header>
  9.  
  10.   <div class="container">
  11.     <p>
  12.         Maecenas tincidunt et magna tristique gravida. Praesent volutpat ultricies mauris, nec cursus eros volutpat sed. Nunc nec porta neque.
  13.         Phasellus augue urna, tincidunt non accumsan id, facilisis in est. Nullam mattis suscipit ullamcorper. Suspendisse potenti. Sed vel vestibulum justo,
  14.         non feugiat tellus. . Vivamus egestas, mi ut tristique condimentum,
  15.         nulla diam laoreet justo, nec dapibus velit lorem at diam. Fusce mollis ex quis urna tristique pellentesque. Vivamus vitae eleifend lacus, et rhoncus tellus.
  16.   </p>
  17.   <hr />
  18. </div><!-- /.container -->
  19.  
  21.   <div class="container">
  22.     <p>&copy; Company 2018</p>
  23.   </div>

Télécharger

Affichons la page :

Sans avoir définit de feuille de style particulière, nous avons pu réaliser un début de mise en page avec un entête, un article et un pied de page.

 Afficher plusieurs colonnes de texte

Nous allons maintenant afficher plusieurs paragraphes en colonne.
Modifions le contenu du div de style container comme suit :

  1. <div class="container">
  2.       <div class="row">
  3.  
  4.         <div class="col">
  5.           <h2>Sujet 1</h2>
  6.           <p>
  7.             Lorem ipsum dolor sit amet,  <b>Mot en gras</b> consectetur adipiscing elit.
  8.             <i>Mot en italique</i> Donec cursus egestas ullamcorper. Morbi pellentesque non odio vel ultrices. Nam volutpat ex at orci venenatis suscipit.
  9.             Nulla convallis tortor leo, at tincidunt dolor consectetur sit amet.
  10.           </p>          
  11.         </div><!-- /.col -->
  12.        
  13.         <div class="col">
  14.           <h2>Sujet 2</h2>
  15.           <p>
  16.             Maecenas tincidunt et magna tristique gravida. Praesent volutpat ultricies mauris, nec cursus eros volutpat sed. Nunc nec porta neque.
  17.             Phasellus augue urna, tincidunt non accumsan id, facilisis in est. Nullam mattis suscipit ullamcorper. Suspendisse potenti. Sed vel vestibulum justo,
  18.             non feugiat tellus. . Vivamus egestas, mi ut tristique condimentum,
  19.             nulla diam laoreet justo, nec dapibus velit lorem at diam. Fusce mollis ex quis urna tristique pellentesque. Vivamus vitae eleifend lacus, et rhoncus tellus.
  20.           </p>
  21.         </div><!-- /.col -->
  22.  
  23.         <div class="col">
  24.           <h2>Sujet 3</h2>
  25.           <p>
  26.             Nam volutpat ex at orci venenatis suscipit. Sed ultrices nisl nec felis sagittis dapibus. Ut non tristique felis. Nam elementum felis nisl, at vestibulum lacus viverra a. Sed pharetra sollicitudin nulla ut volutpat. Nulla convallis tortor leo, at tincidunt dolor consectetur sit amet.
  27.           </p>
  28.         </div><!-- /.col -->
  29.  
  30.         <div class="col">
  31.           <h2>Sujet 4</h2>
  32.           <p>
  33.             Lorem ipsum dolor sit amet,  <b>Mot en gras</b> consectetur adipiscing elit.
  34.             <i>Mot en italique</i> Donec cuci venenatis suscipit. Sed ulis. Nam elementum felis nisl, at vestibulum lacus viverra a. Sed pharetra sollicitudin nulla ut volutpat. Nulla convallis tortor leo, at tincidunt dolor consectetur sit amet.
  35.           </p>          
  36.         </div><!-- /.col -->
  37.        
  38.       </div><!-- /.row -->
  39.       <hr />
  40.     </div><!-- /.container -->

Télécharger

Ce qui donne :

Nous nous sommes contenté d’utiliser les classes row et col de Bootstrap pour réaliser cette mise en page.

 Conclusion

Cet article a montré comment télécharger et utiliser Bootstrap dans la conception de pages Web élémentaires. Maintenant que nous disposons des bases, nous sommes prêt pour découvrir et tester toutes les possibilités de cette librairie. Ce sera le sujet d’autres articles à venir. Sinon, vous pouvez commencer à tester les différents exemples de la documentation officielle sur Internet.

Rappel : Faites attention, de nombreux exemples sur Internet utilisent la version 3 qui n’est pas compatible avec la 4.


Voir en ligne : Site officiel

Article n° 104

Crée par: chris

Créé le: 13 février 2018

Modifié le: 25 juin 2019

Nombre de visites: 5519

Popularité: 42 %

Popularité absolue: 11

Mots clés de cet article

SPIP

2003-2023 LePpf
Plan du site | | Contact | RSS 2.0 | Sur YouTube

Visiteurs connectés : 0

Nombre moyen de visites quotidiennes sur le site: 225