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 libraires 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 de feuille de style 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.
Navigation
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
C’est quoi Boostrap
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
Pourquoi nous utilisons Bootstrap?
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.
Navigateur supportés
Bootstrap fonctionne bien sur la majorité des navigateurs récents sur les postes de travail et sur les mobiles. Cela inclut aussi un grand nombre de systèmes d’exploitation. Parmi les navigateurs supportés, on peut noter Internet Explorer, Firefox, Chrome, Opera. Il faut noter qu’il ne supporte plus Internet Explorer 7 ni Firefox 3.6.
Nouveautés de Bootstrap 3
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.
Désactiver la fonction design responsive
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/
Changement de Bootstrap 2. Vers Bootstrap 3
Il est possible d’adapter un thème Bootstrap 2. On trouve les règles de transformations sur le site getboostrap.com.
Où trouver des ressources et des templates avec Bootstrap ?
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.
Thèmes Prestashop basées sur Bootstrap
Le web regorge de thèmes Prestashop basés sur Bootstrap. Voici une sélection de templates en vente sur le site Themeforest qu’on ne présente plus.
http://themeforest.net/item/popshop/5452453
http://themeforest.net/item/maxshop-premium-prestashop-shopping-theme/5484416
http://themeforest.net/item/leo-best-buy-prestashop-theme/5477883
http://themeforest.net/item/multishop-prestashop-theme/3131531
http://themeforest.net/item/sellya-responsive-prestashop-theme/5264666
Prestashop 1.6 utilisera Bootstrap
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.
Que retenir?
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.
Categories
Product
Bootstrap 3
Type
Prestashop 1.5 theme Bootstrap
Reviewed by
Onasusweb
on 2013-09-01
Rating
Summary
Bootstrap 3 est disponible depuis quelques semaines. Quelles sont les nouveautés, quelles en sont les applications et ou acheter des thèmes Prestashop Bootstrap