Développer responsive
Auteur: Winkin Adrien
Publié le 01-07-2024 | Catégorie: Développement front-end
Le développement responsive est une approche du développement web qui vise à rendre les sites internet accessibles et agréables à utiliser sur une variété d'appareils, des smartphones aux ordinateurs de bureau. Avec la diversité des tailles d'écran et des résolutions, il est essentiel que les sites web s'adaptent automatiquement pour offrir la meilleure expérience utilisateur possible. Bootstrap est un framework CSS populaire qui facilite grandement ce processus. Dans cet article, vous apprendrez les bases du développement responsive avec Bootstrap, et à la fin, vous serez en mesure de créer des sites web adaptatifs. Pour bien comprendre cet article, il vous est conseillé d'avoir des connaissances élémentaires en HTML et CSS.
Installation de bootstrap
Pour utiliser bootstrap, nous avons 2 solutions. La première est de télécharger le fichier permettant d'utiliser le framework. Le principal désavantage est que vous devrez héberger le fichier vous-même et que cela prend un certain espace sur un disque d'hébergement. Sinon, vous pouvez opter pour le CDN qui est un lien vers le fichier bootstrap situé sur un serveur externe. Les ressources étant suceptibles d'être modifiées, je vous mets ici un lien vers les ressources nécessaires.
CDN
Voici comment inclure le framework à vos fichier actuellement :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemple de Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>
Classes de base et grille de bootstrap
En effet, bootstrap fonctionne avec des classes et chaque classe contient un certain nombre d'attribut prédéterminé. De plus, bootstrap fonctionne avec un grille de 12 colonnes et c'est ce système qui permet le développement responsive. Vous allez maintenant découvrir les 3 classes de base qui permettront par la suite d'utiliser les classes qui vous permettront de développer responsive.
Les classes de bases
Comme je l'ai dit précédemment, il y en a 3, à savoir :
- ".container" : elle est utilisée pour créer une boîte centrée avec des marges gauche et droite automatiques. Elle fixe la largeur maximale du contenu en fonction de la largeur de l'écran.
- ".row" : elle est utilisée pour encadrée une grille bootstrap (que nous détaillons juste en bas). La grille grille contient 12 colonnes et à chaque conteneur (div, span,...) contenant la classe ".row", une nouvelle grille est à disposition.
- ".col" : elle est utilisée pour définir une colonne de la grille dans un espace délimité par la classe ".row".
La grille bootstrap
La grille de bootstrap est ce qui permet le développement responsive. Il est absolument primordiale de bien comprendre comment cela fonctionne. Elle est donc constituée de 12 colonnes qui délimitent la largeur des écrans en 12 parties égales. Nous pouvons décider que 2 éléments doivent se situer chacun sur une moitié d'écran (donc 6 colonnes chacun) dans un espace défini par un élément portant la classe ".row".
Voici un exemple de code pour vous éclairez
<div class="container">
<div class="row">
<div class="col-4">Colonne 1</div>
<div class="col-4">Colonne 2</div>
<div class="col-4">Colonne 3</div>
</div>
</div>
Ce qui donne le résultat suivant :
Analyse et commentaire du code
On remarque 3 blocs :
- La div container : la div portant la classe ".container" permet d'encadrer le code dans un espace muni d'une marge à gauche et à droite.
- La div délimitant la grille : la div contenant la classe ".row" introduit la grille bootstrap pour les éléments qu'elle entoure.
- Les 3 éléments contenant du texte : ils sont tous munis de la classe ".col-4" qui signifie que chaque div occupe 4 colonnes sur les 12 que la grille contient.
Développer responsive (enfin !)
Finalement, avec les connaissances que vous avez acquises en lisant cet article, il est temps d'apprendre à développer responsive. Il faut d'abord faire un point sur les points de rupture qui définissent les différentes tailles d'écran pour bootstrap.
Points de rupture
En pratique
En pratique pour développer responsive, on intègre ces points de ruptures aux classes qui nous intéressent. Par exemple :
<div class="container">
<div class="row">
<div class="col-lg-4 col-sm-6">Colonne 1</div>
<div class="col-lg-4 col-sm-6">Colonne 2</div>
<div class="col-lg-4 col-sm-6">Colonne 3</div>
<div class="col-lg-4 col-sm-6">Colonne 4</div>
<div class="col-lg-4 col-sm-6">Colonne 5</div>
<div class="col-lg-4 col-sm-6">Colonne 6</div>
</div>
</div>
Ce qui donne :
Si vous réduisez la fenêtre, vous vous rendrez compte que les div contenant le texte changent de disposition en fonction de la taille de la fenêtre. Ainsi les personnes étant sur tablette ou smartphone n'auront pas la même disposition des éléments que les personnes sur pc (il faut évidement lire cet article sur ordinateur pour comprendre ce que je dis). Voici donc un exemple (très simple certes) de développement responsive.
En conclusion
Pour finir, il faut savoir que le framework bootstrap offre de nombreuses autres classes qui couvrent des thèmes bien plus larges que le développement responsive. Nous n'avons exploré ici que les thèmes de base. De nouveaux articles concernant des fonctionnalités plus avancées de bootstrap sortiront prochainement. En attendant, je vous invite à pratiquer, créez un petit blog, analysez les codes d'exemples en changeant les classes,... Le développement responsive peut déjà vous permettre de développer un site web complet et de qualité. J'espère que cela vous aura donner envie d'en apprendre d'avantage sur la programmation et je vous souhaite une bonne continuation.