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.
Articles similaires
Présentation de votre site avec JSON-LD d’après schema.org
JSON-LD permet aux programmeurs d’ajouter des métadonnées en tant que script dans le format renommé JSON tout en restant séparé du contenu Web. La séparation des balises HTML et sémantiques facilite la lecture des textes sources et permet une balise confortable de métadonnées pour des contenus Web dynamiques. Ainsi, JSON-LD est un concurrent sérieux et croissant pour les formats de données tels…
Introduction à HTML5
HTML5 est le nouveau langage noyau d’Internet. Cependant, certains développeurs Web ont encore recours à l’ancien langage de balise tels que HTML 4.01 voire XHTML. Ces derniers exigent souvent un certain nombre de plugins externes qui peuvent mettre en danger tant la sécurité d’un site Internet que sa compatibilité. A l’inverse, HTML5 permet une intégration directe d’éléments multimédia et…
L’accessibilité sur le Web (WCAG)
Les administrateurs de sites Internet s’inspirent des lignes directrices pour l’accessibilité des contenus Web (WCAG) du W3C pour pouvoir rendre leurs contenus accessibles à tous. Les WCAG reposent sur quatre principes : la perceptibilité, l’utilisabilité, la compréhension et la robustesse. Ces dernières sont divisées en douze sous-parties qui servent de base pour rendre les contenus Web…
Alternatives à Bootstrap : tour d’horizon des meilleurs frameworks frontend
Bootstrap est le framework le plus populaire pour créer des interfaces Web hautement performantes. Il est composé d’une collection de composants HTML, CSS et JavaScript, publiés par Twitter en 2011, sous la licence libre MIT. Il contient en outre une gamme d’extensions, d’interfaces pour les systèmes de gestion de contenu, et des thèmes préconstruits. Mais il existe aussi des alternatives à…
Bootstrap 5 : les nouveautés les plus importantes
Quelles nouveautés ? Bootstrap 5 a été conçu pour faciliter la création de sites Web modernes et élégants. Les développeurs promettent des temps de chargement plus rapides, une meilleure expérience utilisateur et un code plus logique : pas de jQuery dorénavant ni de support pour Internet Explorer mais plus de flexibilité dans la conception.
Créez une adresse personnalisée