Tutoriel Bootstrap : les premiers pas avec le framework de Twitter

Bootstrap est un framework Front-end, à l’aide duquel les développeurs Web peuvent concevoir des sites Web de tous types compatibles avec différents supports. Le framework est proposé en open source et offre différents outils avec des styles déjà en place pour les interfaces de navigations, les boutons, les typographies… Il utilise les langages HTML et CSS, et inclut des extensions JavaScript optionnelles. A l’origine, l’outil Bootstrap était utilisé par Twitter en interne dans le but d’uniformiser des designs.  Il a ensuite été publié en août 2011 sur la plateforme d’hébergement open source GitHub puis développé avec des dizaines de milliers d’extensions jusqu’à devenir aujourd’hui un outil très apprécié des utilisateurs.

Voici ce qui rend Bootstrap si intéressant

Grâce au codage HTML et CSS, vous ne devez pas recommencer complètement le développement de votre site si vous avez une idée de changement pour son aspect et sa structure. Avec cet outil, vous pouvez intégrer à votre document HTML divers modules préfabriqués de la même manière que pour les systèmes modulaires. Beaucoup ne passent pas par de tels programmes et se confrontent à des configurations CSS laborieuses au lieu de gagner du temps avec Bootstrap. Ce dernier met à votre disposition les fonctionnalités suivantes :

  • Boutons
  • Eléments de navigation
  • Aperçu par vignettes
  • Menus déroulants
  • Avertissements 
  • Indicateur de progression
  • Intégration de vidéos responsives

Un autre élément important est la mise en page de Bootstrap sous forme de grille. Ce système de tri vous aide à déterminer les espacements et les positionnements des différents éléments du site en subdivisant la mise en page en douze colonnes. Grâce à cette mise en page sous forme de grille, vous pouvez constater les plus grands écarts de présentation entre les affichages des différents écrans (peu importe s’il s’agit d’un smartphone, d’une tablette, d’un ordinateur de bureau ou portable). Avec Bootstrap vous êtes donc préparé au mieux pour le responsive Webdesign.

Avec les plugins optionnels JavaScript, basés sur le Framework JavaScript jQuery, vous pouvez intégrer des éléments utiles d’interfaces utilisateur comme Tooltipps (permettant d’indiquer comment utiliser un outil du programme), une fenêtre de dialogue ou encore une fonction de remplissage automatique des champs de saisie. Pour utiliser Bootstrap avec des éléments JavaScript, intégrez simplement la bibliothèque jQuery dans votre document HTML.

Bootstrap : téléchargement et premiers pas

Le téléchargement du programme Bootstrap de Twitter est un framework libre et donc gratuit. Le code source du programme en libre accès permet aux développeurs les plus expérimentés d’adapter le framework selon leurs envies. Les indications suivantes vous indiquent quelles sont les étapes essentielles pour vos premiers pas avec le programme. 1. Visitez le site Web officiel de Bootstrap et téléchargez du programme en cliquant sur le bouton central. Ce pack contient des fichiers CSS et JavaScript sous forme standard et minimisée ainsi que des typographies et des thèmes optionnels. 2. Décompressez les fichiers téléchargés et déplacez le dossier Bootstrap dans un répertoire de votre système. 3. Les trois sous-dossiers « CSS », « fonts » et « JS » contiennent plus de 250 icônes sous la forme de polices de caractères provenant du site de Glyphicons, mis à disposition gratuitement sur Bootstrap. Les fichiers dans les dossiers « CSS » et « JS » nécessitent une plus grande attention de votre part, c’est pourquoi nous les analysons pour vous plus en détail :

  • bootstrap.css : code CSS sous forme lisible.
  • bootstrap.min.css : code CSS minimisé servant à interpréter les codes non pertinents comme les espaces vides. Ils peuvent être retirés ici. 
  • bootstrap.css.map : contient CSS source Maps, à l’aide duquel vous pouvez trouver vos fichiers d’origine au format LESS lors du développement.
  • bootstrap-theme.css : fichier CSS avec des thèmes optionnels préfabriqués.
  • bootstrap-theme.min.css : codes des thèmes minimisés.
  • bootstrap-theme.css.map : Theme Source Maps.
  • bootstrap.js : code JavaScript sous forme lisible.
  • bootstrap.min.js : code JavaScript minimisé.

4. Si vous souhaitez utiliser des éléments JavaScript, téléchargez la bibliothèque de fonctions JavaScript jQuery sur jquery.com. 5. Lorsque tous ces éléments sont connus et à votre disposition, le véritable travail peut commencer. A titre d’exemple, voici une démonstration du processus de création d’une page d’accueil HTML que nous transformons avec un Template Bootstrap. 6. Ouvrez votre éditeur de code favori, comme Notepad++ par exemple, et inscrivez le code suivant dans une fenêtre vide : 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
      <h1>Bonjour, voici mon premier Template Bootstrap !</h1>
</body>
</html>

La balise méta « viewport » dans le domaine « head » assure une représentation optimale du site sur les appareils mobiles.  

7. Enregistrez le projet en tant que « basic.html » sur votre bureau. 8. Pour créer un template Bootstrap dans ce document HTML, vous devez implémenter des fichiers JavaScript et CSS Bootstrap dans le code HTML. Il faut pour cela ouvrir le répertoire dans lequel se trouve le dossier. Il est recommandé d’intégrer si possible JavaScript à la fin du corps du document, sans quoi le temps de chargement de votre site pourrait être augmenté. Voici à quoi devrait ressembler votre code :

<!DOCTYPE html>
<html>
<head>
           <meta charset="utf-8">
           <meta name="viewport" content="width=device-width, initial-scale=1">
           <link rel="stylesheet" type="text/class" href="Bootstrap/css/bootstrap.min.css">
</head>
<body>
            <h1>Bonjour, voici mon premier Template Bootstrap!</h1>
            <script src="Bootstrap/js/jquery-1.12.0.min.js"></script>
            <script src="Bootstrap/js/bootstrap.min.js"></script>
</body>
</html>

9. Pour finir vous devez enregistrer le document en tant que « bootstrap-template.html ». vous pouvez ouvrir le document HTML Bootstrap dans votre navigateur favori avec un double-clic.  En suivant l’exemple ci-dessus vous apercevrez le titre h1.

10.  Vous pouvez concevoir librement votre template. Vous trouverez sur la page Web officielle les différents codes pour inclure certaines typographies, des boutons, le système de grille Bootstrap, etc.

HTML/CSS sont deux prérequis importants

Même si Bootstrap met des contenus préfabriqués à disposition, vous n’irez pas très loin sans connaissances HTML et CSS. La base indispensable est donc de posséder de bonnes notions en HTML et CSS. Entre-temps des templates gratuits ou payants d’autres utilisateurs ont fait leur apparition, et visent à diminuer la charge de travail. Celui qui a régulièrement à faire avec HTML, CSS et JavaScript saura rapidement apprécier les avantages de ce framework. Voici une liste des principaux avantages du programme :

  • une grande économie de temps
  • très bonnes possibilités concernant le responsive Web design
  • mises à jour régulières et aides grâce à l’importante communauté 
  • documentation de premier choix à disposition

Le fait qu’il s’agisse d’un programme open source adapté aux exigences du responsive Web design fait de Bootstrap un framework très apprécié des utilisateurs.

Cet article vous a-t-il été utile ?