Bootstrap est un framework Front-end, à l’aide duquel les dé­ve­lop­peurs Web peuvent concevoir des sites Web de tous types com­pa­tibles avec dif­fé­rents supports. Le framework est proposé en open source et offre dif­fé­rents outils avec des styles déjà en place pour les in­ter­faces de na­vi­ga­tions, les boutons, les ty­po­gra­phies… Il utilise les langages HTML et CSS, et inclut des ex­ten­sions Ja­vaS­cript op­tion­nelles. A l’origine, l’outil Bootstrap était utilisé par Twitter en interne dans le but d’uni­for­mi­ser des designs.  Il a ensuite été publié en août 2011 sur la pla­te­forme d’hé­ber­ge­ment open source GitHub puis développé avec des dizaines de milliers d’ex­ten­sions jusqu’à devenir aujourd’hui un outil très apprécié des uti­li­sa­teurs.

Voici ce qui rend Bootstrap si in­té­res­sant

Grâce au codage HTML et CSS, vous ne devez pas re­com­men­cer com­plè­te­ment le dé­ve­lop­pe­ment de votre site si vous avez une idée de chan­ge­ment pour son aspect et sa structure. Avec cet outil, vous pouvez intégrer à votre document HTML divers modules pré­fa­bri­qués de la même manière que pour les systèmes mo­du­laires. Beaucoup ne passent pas par de tels pro­grammes et se con­fron­tent à des con­fi­gu­ra­tions CSS la­bo­rieuses au lieu de gagner du temps avec Bootstrap. Ce dernier met à votre dis­po­si­tion les fonc­tion­na­li­tés suivantes :

  • Boutons
  • Eléments de na­vi­ga­tion
  • Aperçu par vignettes
  • Menus dé­rou­lants
  • Aver­tis­se­ments 
  • In­di­ca­teur de pro­gres­sion
  • In­té­gra­tion de vidéos res­pon­sives

Un autre élément important est la mise en page de Bootstrap sous forme de grille. Ce système de tri vous aide à dé­ter­mi­ner les es­pa­ce­ments et les po­si­tion­ne­ments des dif­fé­rents éléments du site en sub­di­vi­sant 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é­sen­ta­tion entre les af­fi­chages des dif­fé­rents écrans (peu importe s’il s’agit d’un smart­phone, d’une tablette, d’un or­di­na­teur de bureau ou portable). Avec Bootstrap vous êtes donc préparé au mieux pour le res­pon­sive Webdesign.

Avec les plugins op­tion­nels Ja­vaS­cript, basés sur le Framework Ja­vaS­cript jQuery, vous pouvez intégrer des éléments utiles d’in­ter­faces uti­li­sa­teur comme Tooltipps (per­met­tant d’indiquer comment utiliser un outil du programme), une fenêtre de dialogue ou encore une fonction de rem­plis­sage au­to­ma­tique des champs de saisie. Pour utiliser Bootstrap avec des éléments Ja­vaS­cript, intégrez sim­ple­ment la bi­blio­thèque jQuery dans votre document HTML.

Bootstrap : té­lé­char­ge­ment et premiers pas

Le té­lé­char­ge­ment du programme Bootstrap de Twitter est un framework libre et donc gratuit. Le code source du programme en libre accès permet aux dé­ve­lop­peurs les plus ex­pé­ri­men­tés d’adapter le framework selon leurs envies. Les in­di­ca­tions suivantes vous indiquent quelles sont les étapes es­sen­tielles pour vos premiers pas avec le programme. 1. Visitez le site Web officiel de Bootstrap et té­lé­char­gez du programme en cliquant sur le bouton central. Ce pack contient des fichiers CSS et Ja­vaS­cript sous forme standard et minimisée ainsi que des ty­po­gra­phies et des thèmes op­tion­nels. 2. Dé­com­pres­sez les fichiers té­lé­char­gés et déplacez le dossier Bootstrap dans un ré­per­toire de votre système. 3. Les trois sous-dossiers « CSS », « fonts » et « JS » con­tien­nent plus de 250 icônes sous la forme de polices de ca­rac­tères provenant du site de Gly­phi­cons, mis à dis­po­si­tion gra­tui­te­ment sur Bootstrap. Les fichiers dans les dossiers « CSS » et « JS » né­ces­si­tent 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 à in­ter­pré­ter les codes non per­ti­nents 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é­ve­lop­pe­ment.
  • bootstrap-theme.css : fichier CSS avec des thèmes op­tion­nels pré­fa­bri­qués.
  • bootstrap-theme.min.css : codes des thèmes minimisés.
  • bootstrap-theme.css.map : Theme Source Maps.
  • bootstrap.js : code Ja­vaS­cript sous forme lisible.
  • bootstrap.min.js : code Ja­vaS­cript minimisé.

4. Si vous souhaitez utiliser des éléments Ja­vaS­cript, té­lé­char­gez la bi­blio­thèque de fonctions Ja­vaS­cript jQuery sur jquery.com. 5. Lorsque tous ces éléments sont connus et à votre dis­po­si­tion, le véritable travail peut commencer. A titre d’exemple, voici une dé­mons­tra­tion du processus de création d’une page d’accueil HTML que nous trans­for­mons 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 re­pré­sen­ta­tion optimale du site sur les appareils mobiles.  

7. En­re­gis­trez le projet en tant que « basic.html » sur votre bureau. 8. Pour créer un template Bootstrap dans ce document HTML, vous devez im­plé­men­ter des fichiers Ja­vaS­cript et CSS Bootstrap dans le code HTML. Il faut pour cela ouvrir le ré­per­toire dans lequel se trouve le dossier. Il est re­com­mandé d’intégrer si possible Ja­vaS­cript à la fin du corps du document, sans quoi le temps de char­ge­ment de votre site pourrait être augmenté. Voici à quoi devrait res­sem­bler 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 en­re­gis­trer le document en tant que « bootstrap-template.html ». vous pouvez ouvrir le document HTML Bootstrap dans votre na­vi­ga­teur favori avec un double-clic.  En suivant l’exemple ci-dessus vous aper­ce­vrez le titre h1.

10.  Vous pouvez concevoir librement votre template. Vous trouverez sur la page Web of­fi­cielle les dif­fé­rents codes pour inclure certaines ty­po­gra­phies, des boutons, le système de grille Bootstrap, etc.

HTML/CSS sont deux prérequis im­por­tants

Même si Bootstrap met des contenus pré­fa­bri­qués à dis­po­si­tion, vous n’irez pas très loin sans con­nais­sances HTML et CSS. La base in­dis­pen­sable est donc de posséder de bonnes notions en HTML et CSS. Entre-temps des templates gratuits ou payants d’autres uti­li­sa­teurs ont fait leur ap­pa­ri­tion, et visent à diminuer la charge de travail. Celui qui a ré­gu­liè­re­ment à faire avec HTML, CSS et Ja­vaS­cript saura ra­pi­de­ment apprécier les avantages de ce framework. Voici une liste des prin­ci­paux avantages du programme :

  • une grande économie de temps
  • très bonnes pos­si­bi­li­tés con­cer­nant le res­pon­sive Web design
  • mises à jour ré­gu­lières et aides grâce à l’im­por­tante com­mu­nauté 
  • do­cu­men­ta­tion de premier choix à dis­po­si­tion

Le fait qu’il s’agisse d’un programme open source adapté aux exigences du res­pon­sive Web design fait de Bootstrap un framework très apprécié des uti­li­sa­teurs.

Aller au menu principal