• 12 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 24/08/2020

Découvrez si Bootstrap correspond à vos besoins

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bootstrap est une bibliothèque de composants frontend qui permet de prototyper vos idées et de créer un site web entier à l'aide de HTML, CSS et JavaScript.

Depuis sa première publication par Twitter en 2011, Bootstrap est un choix populaire parmi les développeurs web. Selon builtwith.com, il est utilisé sur plus de 18 millions de sites. De nombreux développeurs pensent qu'il constitue un choix évident pour leurs projets.

Mais Bootstrap est-il approprié à mon projet ?

Examinons ses avantages et inconvénients pour vous aider à décider.

Découvrez les avantages de Bootstrap

Temps de développement réduit

Bootstrap est utile pour le développement rapide de prototypes de vos sites web et applications web, afin que vous puissiez vous concentrer sur la fonctionnalité principale et la structure du site sans vous préoccuper de la compatibilité entre navigateurs.

Tout ce dont vous avez besoin pour débuter avec Bootstrap 4 est un lien vers le fichier CSS minifié du framework dans votre document HTML, et de connaissances de base en HTML, CSS et JavaScript. Il existe plusieurs manières d'inclure Bootstrap dans votre projet, mais la plus rapide et la plus simple est d’utiliser un lien vers le fichier CSS minifié hébergé sur BootstrapCDN.

Pour utiliser Bootstrap de cette façon, vous devrez ajouter cette ligne à la section  <head>  de votre fichier HTML :

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Il faut l'ajouter avant les autres fichiers CSS, afin que vos styles remplacent ceux de Bootstrap par défaut.

Certains composants de Bootstrap utilisent JavaScript, en particulier les bibliothèques jQuery et Popper.js, ainsi que la bibliothèque JavaScript de Bootstrap. Pour vous assurer que tout fonctionne comme prévu, vous devez ajouter les éléments suivants au bas de votre page juste avant la fermeture de la balise  </body>  :

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Entraînez-vous 

Console de code
Houston... ?
Il semblerait que votre ordinateur ne soit pas connecté à Internet.
Vous n'êtes pas connecté

Connectez-vous pour accéder aux exercices de codes et testez vos nouvelles compétences.

Pensez à vous entraîner avant de terminer ce chapitre.

Communauté nombreuse et active

Du fait de la popularité de Bootstrap, il existe une grande diversité de ressources et de supports disponibles. Initialement développé comme projet Twitter interne, il a été publié en 2011 sous une licence open source. Depuis lors, il a comptabilisé plus de 1 000 contributeurs au projet de base. Le créateur et mainteneur du projet, Mark Otto, est à présent le directeur principal de la conception chez GitHub (qui est détenu par Microsoft). Il bénéficie ainsi du soutien de certaines organisations importantes du web.

En tant que projet en open source populaire, Bootstrap comprend une communauté en ligne active et utile avec de nombreuses discussions disponibles pour vous aider à trouver des solutions à vos problèmes, ou pour vous donner des conseils sur la manière de mieux utiliser le framework. Par exemple, Stack Overflow (célèbre site communautaire d’entraide entre développeurs) comptabilise plus de 100 000 questions liées à Bootstrap en utilisant les mots clés “twitter-bootstrap” ou “bootstrap-4."

Personnalisable

De nombreux thèmes personnalisés sont utilisables pour vous aider à rendre votre site unique. En plus des thèmes disponibles sur le site Bootstrap, vous pouvez rapidement rechercher les thèmes proposés par d'autres fournisseurs. 

Étant donné qu'il est en open source et personnalisable, vous pouvez créer entièrement un thème, ou apporter des modifications aux autres.

Mesurez les désavantages de Bootstrap

Similarité

Le fait que Boostrap soit simple d'utilisation peut être un désavantage si vous utilisez le thème et les couleurs par défaut. Vous risqueriez de trouver le thème que vous avez choisi sur d'autres sites.

Comme avec toute autre bibliothèque frontend, vous devrez la personnaliser en ajoutant des composants ou des styles, si vous souhaitez intégrer à votre site des conceptions uniques.

Courbe d'apprentissage

Comme avec tout framework, vous devez faire des efforts pour l'apprendre. Mais, comme vous avez ce cours pour vous aider à démarrer, ce n'est pas un gros désavantage, n’est-ce pas ? 😁

En résumé 

  • Bootstrap permet de gagner du temps de développement, est composé d'une communauté vaste et active et permet de personnaliser des thèmes.

  • Cependant, vous risquez de voir votre thème sur de nombreux sites si vous ne le personnalisez pas. Par ailleurs, apprendre à utiliser Bootstrap demandera un effort d'apprentissage.

Maintenant que vous connaissez les avantages et désavantages de l'utilisation de Bootstrap pour vos projets, vous êtes prêt à apprendre à utiliser le framework pour créer des mises en page responsives.

Exemple de certificat de réussite
Exemple de certificat de réussite