Bootstrap 3 et sa collection d’outils

bootstrap

Découvrez dans ce topique vous trouverez ce qui a à savoir sur Bootsrap 3. Pour ceux qui ne le savent pas, Bootstrap 3 est une librairie ou une boîte à outils offrant une bonne base pour débuter un projet web.
En effet, il propose un solide kit CSS ainsi que de nombreux plugins JavaScript permettant de réaliser rapidement l’architecture d’un site internet.

L’utilisation du framework Bootstrap

Avec l’évolution rapide de la technologie de l’informatique d’années en années, les éditeurs de navigateurs ne cessent d’offrir de nouvelles versions.

De cet effet, les internautes se retrouvent avec de nombreux navigateurs ayant des comportements différents face aux mêmes éléments de style.
C’est pour cela, qu’il existe un large panel de Frameworks CSS tel Semantic, Blueprint, Foundation ou Bootstrap. Ce topique portera sur ce dernier et s’adresse aux personnes possédant déjà une certaine notion de développement web avec du CSS, HTML et JavaScript. Ou encore ceux utilisant Prestashop puisque une grande majorité des templates Prestashop 1.6 en 2014 utilise cette technologie ou autre CMS utilisant bootstrap.

Petit aperçu de la librairie

Il faut savoir que Bootstrap dispose d’un système de grille composé jusqu’à 12 colonnes.
Celui-ci est Mobile First pour dire qu’il a été nativement élaboré pour s’adapter aux tailles des écrans des Smartphones et tablettes tactiles.

Avec Bootstrap, plus la taille du navigateur s’étend, plus les pages du site s’élargissent avec un nombre de colonnes pouvant atteindre 12. Le code du kit se base sur du HTML 5 et du CSS3 ainsi que de nombreux plugins jQuery.
Pour télécharger Bootstrap, il suffit de se rendre sur le site getbootstrap.com. Les fichiers JavaScript et CSS sont disponibles dans le dossier dist.

Si Bootstrap 2.x supportait encore IE7, la version 3 ne le supporte plus ainsi que la version 3.6 de Firefox. Il faudra donc utiliser les navigateurs plus récents d’IE, Chrome, Firefox, Opera ou Safari.

Comment activer la grille ?

Pour un fonctionnement correct du système de grille, il est nécessaire d’ajouter le meta tag « viewport » dans la balise header du html :

La version 3 de Bootstrap offre un système de 4 grilles avec un paramètre différent par pour chaque type de device.

Voici les intervalles qui définissent les largeurs :

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

Cette classification nécessite d’implémenter une classe CSS par intervalle. Pour cela, voici les nouvelles associations :

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

Il faut savoir que la création de widgets avec Bootstrap 3 est devenue plus allégé ou du moins le nom des classes CSS est devenu plus simple.
Effectivement, les éléments div sont toujours imbriqués. Il faut commencer par créer un container puis d’ajouter à l’intérieur de celui-ci un second div avec la classe row et pour finir vous mettez les colonnes HTML dans le nouvel élément.
Voici ce que vous devez obtenir:

Il est également possible d’effectuer une combinaison des classes entre elles dans le but de mieux contrôler le rendu suivant la taille de l’écran de l’utilisateur.

Les composants JavaScript

Concernant les composants JavaScript de la version 3 de Bootstrap, ces derniers ont également été revus sans que les noms des plugins ne changent, mais tout de même avec le code et la mise en œuvre ont bien évolué.

Les nouveaux composants CSS

Etant une nouvelle version de la librairie, la version 3 de Bootstrap dispose de nouveaux composants comme les Panels.

Un Panel Bootstrap se présente comme un nouveau composant permettant le groupement des éléments en une unité logique dans le contexte.
Il est ainsi possible de mettre en valeur ceux-ci tout en leur attribuant un style différent. Un panel possède un « header » et un « footer » auxquels il est possible d’ajouter les labels success, danger, error, primary, warning.
Un petit exemple :

Répondre