Ce tutoriel est disponible ici : Tutoriel Bootstrap 3 PragmaNTIC

Pré-requis à ce tutoriel

Il vous faudra des notions de HTML et CSS. Si vous allez plus loin, il vous faudra aussi des notions de Jquery mais cela n’est pas utile pour ce tutoriel.

Qu’est-ce que Bootstrap ?

Bootstrap est un framework CSS développé par les équipes de Twitter. C’est le plus populaire des frameworks CSS. Il offre un ensemble de composants structurés qui sert à créer les bases de vos pages web et à organiser le code.

A quoi sert-il ?

Il permet de construire en très peu de temps et facilement des sites web esthétiques et responsives (cela signifie que les pages s’adaptent automatiquement au support utilisé pour les visualiser).

Bootstrap vous facilite le travail en termes de :

– productivité car il suffit généralement d’utiliser les classes prédéfinies pour obtenir un bon résultat

– maintenance car le code est clair et beaucoup de développeurs connaissent Bootstrap

Pourquoi utiliser Bootstrap plutôt qu’un autre framework CSS ?

Avantages :

• Présentation similaire quel que soit le navigateur utilisé et parfaite compatibilité
• Temps gagné par l’utilisation d’une base qui a fait ses preuves
• Normalisation de la présentation avec un ensemble homogène de styles
• Framework CSS le plus utilisé et donc très documenté (vidéos, documentations, forums…)

Inconvénient :

• Temps d’apprentissage pour maîtriser le framework mais la prise en main est rapide même pour un débutant, c’est l’objet de ce tutoriel.

Comment s’en servir ?

Bootstrap propose un système de grille qui permet d’agencer les éléments de vos pages et d’adapter les pages au support utilisé pour les visualiser.

Il propose aussi un style pour les boutons, formulaires et autres éléments de vos pages. Ce style peut facilement être modifié tout en conservant tous les avantages de Bootstrap.

Présentation de la version actuelle : la version 3

Elle intègre totalement l’aspect responsive alors que cette fonctionnalité était séparée dans les précédentes versions. Aussi, on peut considérer cette version comme « mobile-first », c’est-à-dire développée et pensée pour les appareils mobiles afin de couvrir tous les besoins.

Pour continuer ce tutoriel, télécharger le pdf ici : Tutoriel Bootstrap 3 PragmaNTIC