Pour quoi utiliser une librairie comme Bootstrap

Le monde informatique évolue très vite et au fil des années, les éditeurs de navigateur proposent de nouvelles versions. On se retrouve avec un grand nombre de navigateurs qui ont des comportements différents pour les mêmes éléments de style. Comment faites-vous pour tester votre site sur Firefox, sur Internet Explorer, Chrome ou Safari pour ne citer que ceux-là? Les anciennes versions (IE6, IE7, FF 3.x) ne vous rendront pas la tâche facile non plus. Les frameworks vous garantissent une représentation uniforme d’un navigateur internet à un autre, de même qu’une bonne compatibilité. Il existe un grand nombre de frameworks CSS : on peut citer Blueprint, semantic, Foundation zurb ou Bootstrap. Ce dernier sera le sujet de cet article. Cet article s’adresse aux personnes qui ont une certaine notion de développement web avec du html, de CSS et de javascript. Ou si vous êtes marchand et que vous utilisez Prestashop, en 2014 plupart des templates Prestashop 1.6 utiliserons cette technologie, alors cet article vous donnera d’avance une meilleure compréhension de votre boutique. Nous n’allons pas détailler comment créer une page html ou inclure les fichiers CSS et JS dans une page web.

Aperçu de la librairie

Bootstrap inclut un système de grille jusqu’à 12 colonnes. Il est Mobile First, cela signifie qu’il est nativement conçu pour s’adapter aux tailles des écrans de smartphones ou tablettes. Puis à mesure que la taille de votre navigateur s’agrandit, les pages du site web s’élargissent et le nombre de colonnes peut atteindre 12. Le code de ce kit est basé sur le HTML 5 et CSS3 et inclut un grand nombre de plugins Jquery.

Boostrap est désormais disponible sur le site getbootstrap.com. Quand vous le téléchargez, vous trouvez les fichiers CSS et Javascript dans le dossier dist.

Pendant longtemps les navigateurs Windows ont été des cauchemars. Ainsi Internet Explorer 6 était largement décrié pour son manque de sécurité et le manque de support des standards modernes. Les versions suivantes ne sont pas toujours épargnées. Là où Bootstrap 2.x supportait encore Internet Explorer 7, Bootstrap 3 ne supporte plus IE7 ni Firefox 3.6. Préférez les navigateurs récents Interner Explorer, Firefox, Chrome, Safari ou Opera que vous utilisez une machine Windows ou Mac. N’hésitez pas à lire la documentation en anglais pour le détail des navigateurs supportés.

Première page
Activation de la grille.
Pour que le système de grille fonctionne correctement, ajoutez le meta tag ‘viewport’ dans la balise header de votre document web:

La nouvelle version de Bootstrap propose un système de 4 grilles avec un paramètre différent par largeur de viewport.Voici les intervalles définissant les largeurs.

• Extra small devices ~ Phones (< 768px)
• Small devices ~ Tablets (>= 768px)
• Medium devices ~ Desktops (>= 992px)
• Large devices ~ Desktops (>= 1200px)

 

Cette classification donne lieu donc à une implémentation de classe CSS par intervalle. Voici donc la nouvelle association :

• col-xs-* ~ Extra small devices
• col-sm-* ~ Small devices
• col-md-* ~ Medium devices
• col-lg-* ~ Large devices

 

La création des widgets avec Bootstrap s’est un peu allégé ou du moins le nom des classes CSS est devenu plus simple. En effet ; les éléments div sont toujours imbriqués. Vous commencez par créer un container. A l’intérieur d’un container, vous ajoutez un second div avec la class row. Enfin, dans ce nouvel élément,  vous placez les colonnes html. Vous obtenez ceci :

On peut aussi combiner les classes entre elles pour contrôler finement le rendu suivant la taille de l’écran de l’utilisateur. Nous donnerons des exemples pratiques dans d’autres tutoriels.

 

Les composants Javascript

les composants Javascript Bootstrap ont été aussi revus. Pourtant les noms des plugins n’ont pas changé. Mais le code et la mise en œuvre ont évolué. A suivre dans les prochains articles.

 

Nouveaux Composants CSS

Comme toute nouvelle version de librairies, nous avons droit à un lot de nouveaux composants. On peut noter entre autres les Panels. Le Panel Bootstrap est un nouveau composant qui permet de grouper les éléments en une unité logique dans votre contexte. Vous pouvez ainsi les mettre en valeur et leur attribuer un style différent. Un panel a un ‘header’ et un ‘footer’ auxquels vous pouvez ajouter les labels primary, success, error, info, warning, danger. Voici un exemple:

Les nouveaux composants List-group feront l’objet d’un autre article.