Bootstrap 3, nouveautés

Les frameworks CSS sont utilisés pour les projets web depuis très longtemps maintenant. Aujourd’hui, la tendance s’est accentuée et des librairies comme Bootstrap se sont imposées face aux concurrents.  Voyons quelles sont les nouveautés de la version Bootstrap 3 sortie depuis quelques semaines déjà.

Les librairies CSS permettent de concevoir rapidement des interfaces  graphiques avec un gain de temps considérable. On peut citer pêle-mêle Grid 960, Blueprint, Foundation ou Twitter Bootstrap. Ce dernier s’appelle désormais Bootstrap (tout court) et fait l’objet de cet article. Nous détaillerons les nouveautés de Bootstrap et indiquerons entre autre quelques exemples de sites utilisant Bootstrap.

Sommaire

C’est quoi Bootstrap ?
Pourquoi nous utilisons Bootstrap ?
Navigateurs supportés
Nouveautés de Bootstrap 3
Désactiver la fonction design responsive
Changement de Bootstrap 2. vers Bootstrap 3
Où trouver des ressources et des thèmes graphiques avec Bootstrap?
Thèmes Prestashop basés sur Bootstrap
Prestashop 1.6 et Bootstrap
Conclusion

[box color=”green” icon=”info” ] C’est quoi Boostrap [/box]

Les bonnes méthodologies de développement logiciel insistent sur la séparation des couches. 3 couches sont couramment bien identifiées. On note la persistance et le rendu graphique ; le lien entre les 2 est fait par la couche métier.  Bootstrap adresse la couche visuelle. C’est une collection d’éléments de design utiles à la création de sites internet et d’applications web. Cette collection contient des codes CSS, HTML et JavaScript pour vous permettre de monter des sites de bonne qualité visuelle sans avoir des connaissances trop poussées de designer.  Cela permet ainsi aux développeurs PHP, java, .NET, etc. de proposer des applications professionnelles sans avoir à recourir aux services d’un designer web. Apres seulement quelques mois d’existence, Bootstrap est déjà utilisé par 1% des sites web. Nous inaugurons par cet article une nouvelle série sur le design web et Bootstrap. En effet, Prestashop adoptera dans un futur proche ce framework à la fois pour le backoffice et le nouveau thème responsive Prestashop 1.6

[box color=”green” icon=”star” ] Pourquoi nous utilisons Bootstrap? [/box]

Facile d’utilisation.
La librairie est facile à prendre en main. Elle fournit aussi une documentation pour bien débuter. Bootstrap a conquis le web et on trouve de nombreux sites de tutoriels français et anglophones

On aime son système de grille
Bootstrap est basé sur un système de grille responsive avec 12 colonnes avec des composants et des layouts. On peut passer d’un système à largeur fluide à une largeur fixe avec juste quelques changements.

Beaucoup d’éléments HTML déjà personnalisés.
Il couvre de nombreux modèles de personnalisation. Que vous ayez besoin de messages popup, de formulaire, de menu déroulant, de diaporama (slider) ou de pagination, vous trouverez un élément de bootstrap que vous pouvez adapter pour correspondre à vos besoins.

Plugins JavaScript
C’est la bonne surprise. On trouve par défaut de nombreux plugins JavaScript ou jquery pour animer un site web. On en trouve aussi dans la communauté des développeurs et des designers. Faites un tour sur Github par exemple.

[box color=”green” icon=”lightbulb” ] Nouveautés de Bootstrap 3 [/box]

De nombreux rapports indiquent que le trafic Internet provenant des appareils mobiles est superieur au trafic depuis les ordinateurs de bureau. Donc, on comprend la raison pour laquelle Boostrap est conçu pour être compatible avec les navigateurs mobiles par défaut. C’est La grande nouveauté annoncée depuis assez longtemps déjà. En effet, le design pour le mobile est fusionné avec le code standard. Ainsi les sites s’adaptent aux grands écrans tout en fonctionnant parfaitement sur les petits / moyens écrans.  Si vous ne souhaitez pas que vos sites s’adaptent nativement à la taille des appareils mobiles ou des tablettes, vous pouvez désactiver cette fonction.

La dernière version de la librairie est plus légère que les précédentes. Cela est dû probablement  à l’effort de simplification des classes CSS. En effet, la hiérarchisation est revue et les éléments graphiques sont moins imbriqués.

[box color=”blue” icon=”info” ] Désactiver la fonction design responsive [/box]

Il est tout à fait possible de désactiver la fonction responsive de Bootstrap.

D’abord, il vous faut supprimer le meta Viewport dans l’entête de la page. Puis retirer la classe max-width du code CSS. Pour les grilles, assurez vous d’ajouter la classe CSS ".col-xs-*” aux éléments graphiques ayant les classes medium ou large . Vous trouverez un exemple de template Bootstrap non responsive à l’adresse http://getbootstrap.com/examples/non-responsive/

[box color=”green” icon=”lightbulb” ] Changement de Bootstrap 2. Vers Bootstrap 3 [/box]

Il est possible d’adapter un thème Bootstrap 2. On trouve les règles de transformations sur le site getboostrap.com.

Bootstrap Migrantion 2.x vers 3.X

[box color=”green” icon=”info” ] Où trouver des ressources et des templates avec Bootstrap ? [/box]

Un écosystème s’est monté autour de Bootstrap. On trouve des places de marché comme WrapBoostrap ou encore Themeforest. Tous les développeurs de thèmes pour CMS proposent aussi un thème Bootstrap dans leur portfolio. Parmi les CMS les plus populaires, on peut citer WordPress, Joomla, Drupal, Magento et Magento. Le chapitre suivant indique notre collection de thèmes Prestashop Bootstrap préférés.

[box color=”green” icon=”star” ] Prestashop 1.6 utilisera Bootstrap [/box]
Sur Twitter, l’éditeur de logiciel indiquait déjà que des travaux sont en cours pour intégrer Bootstrap à Prestashop. Voici des images prises par https://twitter.com/prestamodule au salon de l’e-commerce à Paris.
Prestashop 1.6 Back office

 

[box color=”yellow” icon=”lightbulb” ] Que retenir? [/box]

Le framework Boostrap est très bien pour le prototypage rapide d’application web et mobile. Il convient bien aux développeurs ou aux profanes qui veulent monter un site.  Par contre, on rencontre de plus en plus sur des sites développés uniquement avec Bootstrap sans la moindre personnalisation. Pour éviter que les usagers du web ne se lassent de votre site, il est important d’y apporter votre touche personnelle. Vous trouverez des thèmes abordables sur différentes places de marché que ce soit pour votre site statique ou pour votre motorisé par un  CMS comme WordPress,  Joomla, Prestashop ou Magento. D’autres tutoriels plus techniques suivront et nous vous montrerons comment utiliser Bootstrap 3.

[sws_tweet_button title=”Les nouveautés bootstrap 3, prestashop 1.6 l’utilisera massivement” nickname=”onasusweb” language=”fr” count=”horizontal”] [/sws_tweet_button]

[prima_categories title=”Categories” image_width=”150″ image_height=”150″ number=”4″ slider=”no”]