C’est quoi Bootstrap ? – Guide du débutant

Vous êtes un développeur frontal qui en a assez d’écrire sans cesse des syntaxes CSS ? C’est le moment de commencer à utiliser Bootstrap ! Cet article traitera des avantages de l’utilisation du framework web et de la manière de l’intégrer correctement dans votre projet.

Obtenez le glossaire complet du développement web

C’est quoi Bootstrap ?

Vous connaissez probablement les fonctionnalités des frameworks. Leur collection de syntaxes spécifiques aux tâches permet aux développeurs de créer des sites web beaucoup plus rapidement, car ils n’ont pas à se soucier des commandes et des fonctions de base.

Malgré cela, il y a eu un manque de cohérence dû à l’utilisation intensive des bibliothèques qui a exigé un changement. Bootstrap a répondu à l’appel.

Le framework frontal à code source ouvert a été créé à l’origine par Mark Otto et Jacob Thornton pour accélérer et faciliter le développement de sites web frontaux.

Il contient toutes sortes de modèles de conception basés sur HTML et CSS pour diverses fonctions et composants tels que la navigation, le système de grille, les carrousels d’images et les boutons.

Bien que Bootstrap fasse gagner du temps aux développeurs en leur évitant de devoir gérer les modèles de façon répétitive, son objectif premier est de créer des sites réactifs. Il permet à l’interface utilisateur d’un site web de fonctionner de manière optimale sur toutes les tailles d’écran, que ce soit sur des téléphones à petit écran ou des ordinateurs de bureau à grand écran.

Les développeurs n’ont donc pas besoin de créer des sites spécifiques à un appareil et de limiter leur public.

En raison de sa popularité, de plus en plus de communautés Bootstrap émergent. Elles constituent un lieu privilégié pour les développeurs et les concepteurs qui peuvent y échanger leurs connaissances et discuter des derniers correctifs du framework.

Les 3 fichiers primaires de Bootstrap

Comme Bootstrap est constitué d’une collection de syntaxes qui remplissent des fonctions spécifiques, il est logique que le framework contienne différents types de fichiers. Voici les trois principaux fichiers qui gèrent l’interface utilisateur et les fonctionnalités d’un site web.

Bootstrap.css

Bootstrap.css est un framework CSS qui organise et gère la mise en page d’un site web. Alors que le HTML gère le contenu et la structure d’une page web, le CSS s’occupe de la mise en page du site. Pour cette raison, les deux structures doivent coexister pour effectuer une action particulière.

Grâce à ses fonctions, le CSS vous permet de créer un aspect uniforme sur autant de pages web que vous le souhaitez. Dites adieu aux heures d’édition manuelle juste pour changer la largeur d’une bordure.

Avec le CSS, il suffit de renvoyer les pages web au fichier CSS. Toute modification nécessaire peut être effectuée dans ce seul fichier.

Les fonctions du CSS ne se limitent pas aux seuls styles de texte car elles peuvent être utilisées pour formater d’autres aspects de la page web tels que les tableaux et les mises en page d’images.

Bootstrap.js

Ce fichier est la partie centrale de Bootstrap. Il est constitué de fichiers JavaScript qui sont responsables de l’interactivité du site web.

Pour gagner du temps en évitant d’écrire de nombreuses fois des syntaxes JavaScript, les développeurs ont tendance à utiliser jQuery. Il s’agit d’une bibliothèque JavaScript multiplateforme à code source ouvert très répandue qui permet d’ajouter diverses fonctionnalités à un site web.

Voici quelques exemples de ce que jQuery peut faire :

• Effectuer des requêtes Ajax comme la soustraction dynamique de données d’un autre emplacement
• Créer des widgets à l’aide d’une collection de plugins JavaScript
• Créer des animations personnalisées en utilisant les propriétés CSS
• Dynamiser le contenu du site

Alors qu’un Bootstrap avec des propriétés CSS et des éléments HTML peut fonctionner parfaitement, il a besoin de jQuery pour créer un design réactif. Sinon, vous ne pouvez utiliser que les parties nues et statiques du CSS.

Glyphicons

Les icônes font partie intégrante de la partie frontale d’un site web. Elles sont souvent associées à certaines actions et données dans l’interface utilisateur. Bootstrap utilise des glyphes pour répondre à ce besoin.

Bootstrap comprend un jeu de Glyphicons Halflings qui a été autorisé à être utilisé gratuitement. La version gratuite a un aspect standard mais est adéquate pour les fonctions essentielles.

Si vous souhaitez trouver des icônes plus élégantes, Glyphicons vend divers ensembles haut de gamme qui auront sans aucun doute un meilleur aspect sur des sites web de niche.

Vous pouvez également télécharger gratuitement des icônes individuelles et thématiques sur divers sites web tels que Flaticon, GlyphSearch et Icons8.

Certaines icônes peuvent être modifiées par le CSS pour changer leur apparence, tandis que d’autres ont un aspect par défaut. Utilisez les icônes qui répondent le mieux aux besoins de votre site.

Comment utiliser Bootstrap

Pour avoir une meilleure idée de la façon d’utiliser bootstrap, jetez un coup d’œil à l’exemple ci-dessous.

<html lang="en">

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> 
<title>Bootstrap 101 Template</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
<h1>Hello, world!</h1>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>

</html>

Codage des caractères pour le document HTML. Dans ce cas, UTF-8 correspond à l’Unicode.

meta charset="utf-8"

Indique le jeu de caractères qui est utilisé pour écrire le site web.

meta http-equiv="X-UA-Compatible"

Détermine la version d’Internet Explorer qui doit rendre la page. En utilisant le mode Edge, il est réglé pour utiliser le mode le plus élevé disponible.

meta name="viewport"

Assure que la page a un rapport de 1:1 avec la taille de la fenêtre de visualisation.

link href="css/bootstrap.min.css" rel="stylesheet"

Ceci est la partie où nous ajoutons le CSS principal Bootstrap.

src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"

Charge jQuery via Google CDN. Il est préférable de le charger depuis le CDN via HTTP car les fichiers peuvent être mis en cache pour un an.

src="js/bootstrap.min.js

Ajoute le JavaScript principal de Bootstrap. Cette syntaxe doit toujours être inférieure à la syntaxe jQuery pour fonctionner correctement. Le processus d’ajout peut être effectué via l’URL de Google ou par téléchargement manuel.

Conclusion

Bootstrap est un framework de frontend gratuit qui devient de plus en plus populaire parmi les développeurs de frontend. Il est facile à utiliser et permet aux développeurs d’économiser beaucoup de temps en évitant d’avoir à écrire manuellement des syntaxes encore et encore.

Le framework est également très flexible et peut répondre à presque tous les besoins de développement web en frontend. Ses meilleures capacités comprennent, sans s’y limiter, des fonctionnalités réactives qui permettent aux pages web de fonctionner de manière optimale sur toutes les tailles d’écran.

Si vous êtes un développeur front-end, c’est le moment idéal pour utiliser Bootstrap.