Tutos Bootstrap

Historique Bootstrap

Bootstrap est né au sein de Twitter et a été créé par Mark Otto. Ce framework opensource est lancé en août 2011 et devient très rapidement l'un des frameworks HTML, CSS et Javascript les plus utilisés (au même titre que d'autres comme Tailwind CSS par exemple). Aujourd'hui il est sous licence MIT et creative commons 3.0.

La version actuelle est Bootstrap 4. Version qui a apporté de nombreuses nouveautés.
On peut citer le passage de LESS à SASS pour la génération de feuilles de style CSS dynamiques. L'apparition de Flexbox qui facilite énormément la mise en page et le positionnement des éléments d'une page web. En parallèle, Libsass améliore la vitesse de compilation. Quant à la manipulation des HTML resets, elle se fait avec désormais avec une simplicité accrue. La version 4 permet donc une personnalisation plus aisée et optimisée. 

À noter que la prochaine version : Bootstrap 5 devrait arriver d'ici la fin d'année 2021.
 

Bootstrap, le framework HTML et CSS et responsive !

Bootstrap est un framework HTML, CSS et Javascript, responsive, qui vous permettra de rapidement mettre en place une page web, un site Internet ou une application web. Grâce à sa grille et l'approche Flexbox, vos sites s'adapteront à la taille des différents écrans. Sa flexibilité et la richesse de ses composants vous permettront d'intégrer vos pages plus rapidement.

En effet, grâce à une bibliothèque d’éléments prêts à être utilisés et personnalisables (boutons, menu, cards, pagination, formulaires...), vous intégrerez vos maquettes webdesign réalisées sous AdobeXD ou Sketch, à la vitesse de l'éclair ! 

Après les dernières mises à jour, Bootstrap s’adapte beaucoup mieux aux contraintes des sites Internet se servant de son framework.
Son optimisation pour les appareils mobiles a notamment été repensée. Ainsi, le REM est la nouvelle unité de mesure exploitée pour assurer un responsive design d’excellente qualité.
Par ailleurs, l’outil Flexbox garantit une adaptabilité du contenu à toutes les dimensions d’écran. Il suffit pour cela d’intégrer « display flex » au CSS. Si vous utilisez Bootstrap 4, vous remarquerez que les composants panels, thumbnails et wells auront disparu. En fait, ils ont été fusionnés et retravaillés, donnant naissance aux « cards » qui sont des content managers plus faciles à utiliser. Le système vous propose une grande compatibilité avec les navigateurs web récents (Internet Explorer, Firefox, Safari...).

En compléments des composants disponibles avec le framework, vous avez également à votre disposition de nombreux thèmes (templates premium) et même une bibliothèque d'icônes (+ de 1300) au format SVG qui vous permettront de présenter des interfaces utilisateurs intuitives.
 

Tuto Bootstrap en vidéo et formation en ligne.

Vous souhaitez apprendre Bootstrap ? Vous trouverez ici des tuto en vidéo qui vous apprendront à déployer rapidement des sites Internet.
Vous découvrirez ainsi les bases du framework et sa philosophie. Vous verrez notamment comment :

• installer le framework,
• fonctionne le système de classes,
• utiliser les composants,
• utiliser la grille et Flexbox,
• optimiser Bootstrap,
• l'utiliser avec d'autres frameworks Javascript (React, VueJs, Angular...),
• créer un template.

Une fois les bases acquises, vous apprendrez à créer des sites. Que ce soit de simples landing pages, sites One Page ou de véritables portfolios.
Pour suivre ces cours, il sera nécessaire de connaître les fondamentaux d'HTML et de CSS.

Ces formations Bootstrap se présentent sous la forme de tutoriels en vidéo. Vous progressez à votre propre rythme.
Ces cours sont proposés par des développeurs front end professionnels qui vous livreront toutes leurs astuces.
 

Liens utiles

• Tutos Bootstrap gratuits
• Versions : Bootstrap 5, Bootstrap 3, Bootstrap 4