Bootstrap

Amusons-nous un peu avec Bootstrap

Par Guillaume Thavaud - Publié le 1 octobre 2017

Bootstrap est un framework développé par Twitter, disponible en open-source depuis 2011. C’est un outil très utilisé par les webmasters qui veulent gagner du temps dans la conception de pages web. Mais qu’est-ce qu’un framework au juste ? C’est une sorte de trousse à outils permettant de créer facilement et rapidement du code, dans le cas présent du code HTML faisant appel à des scripts JS et styles CSS prêts à l’emploi.

Bootstrap n’est pas un CMS comme WordPress. Il ne dispose d’aucune interface permettant de créer et structurer du contenu. Qu’on se le dise, il faudra rédiger soit-même son code, en inspirant si besoin des nombreux exemples donnés sur la documentation officielle ! Mais rassurez-vous, cela n’a rien de bien sorcier…

Je me suis intéressé à la version 4 (encore en beta) et disponible ici : https://v4-alpha.getbootstrap.com/

Bon et maintenant, faut-il télécharger quelque chose ? Et bien oui et non, car si on  peut bien évidemment télécharger un petit package contenant les styles et scripts Bootstrap, il existe aussi une version CDN (Content delivery network), c’est à dire hébergée sur le web et disponible à tous. Si vous utilisez ce système, vous n’aurez rien à télécharger. Par contre vos pages web ne fonctionneront que si vous avez un accès à internet ! CQFD…

Pour obtenir bootstrap 4, il faut insérer ces lignes dans son code source (le style dans le <head>, et les scripts dans le footer si on veut bien faire).

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Ensuite, le jeu peut commencer… Pour ma part, plutôt que de me ruer tout de suite dans la documentation, je regarde les exemples donnés sur https://v4-alpha.getbootstrap.com/examples/, cela donne des idées pour la structure de base. Pour obtenir la même chose, il suffit de copier-coller le code source (on peut ensuite le personnaliser à votre guise).

Il reste ensuite à remplir notre page avec les composants prêts à l’emploi, proposés par Bootstrap. Et c’est là que l’on peut vraiment s’amuser, car il y en a beaucoup !

Voici une liste des principaux composants :

  • les grilles, qui permettent d’afficher des blocs de texte les uns à côtés des autres, avec des propriétés natives en responsive design !
  • le menu de navigation qui est lui aussi conçu pour le responsive design
  • des boutons et composants de formulaire
  • des diaporamas avec ou sans légende
  • des blocs de contenu baptisés Cards
  • des menus déroulants
  • des Pop-ups
  • des barres de progression
  • etc…

Au fait, quelles sont les différences entre Bootstrap 3 et Bootstrap 4 ?

Tout d’abord, le système de grille a changé, et se base désormais sur Flexbox, une grosse nouveauté du CSS3. C’est un grand pas en avant vers le responsive design. Ensuite les Cards Bootrap : des blocs de contenu pouvant comporter du texte, des images, des boutons: bien pratiques pour présenter des articles sur une page.

Et c’est tout ? Bah oui, c’est surtout en termes de performances qu’il y a du nouveau. Et il y a un grand nombre de classes qui ont été renommées. Si vous voulez migrer de Bootstrap 3 vers Bootstrap4, ça risque d’être un peu compliqué…

Ah si, un autre truc : l’utilisation des Fonts Awesome a été abandonné par Bootstrap, il faut désormais aller récupérer le CSS directement sur http://fontawesome.io/ (mais il existe toujours une version gratuite).

Conclusion

Si Bootstrap est toujours très apprécié des développeurs web, ce n’est pas pour rien… Le design est convivial avec ses boutons et cadres arrondis, les couleurs sont bien choisies, et la responsivité du framework est plus que jamais d’actualité. En quelques heures, on obtient de belles pages web, ergonomiques et flexibles.

Il faudra néanmoins aller bidouiller le CSS et le Jquery si vous voulez quelque chose qui n’est pas prévu dans Bootstrap, mais on peut s’appuyer sur une structure robuste et assez claire.