16/09/2013

Twitter Bootstrap, un framework front-end pour vos développements web

La nouvelle version du framework proposé par Twitter, Bootstrap 3 est sorti depuis quelques mois à l'heure où est rédigé cet article. 

Introduction

La nouvelle version du framework proposé par Twitter, Bootstrap 3 est sorti depuis quelques mois à l'heure où est rédigé cet article. Ce dernier vous permet de mettre en place rapidement de petits projets dont l'interface se veut "responsive" c'est-à-dire qui doit s'adapter à tous types de terminaux. Tout a été prévu (ou presque) pour vous faciliter la tâche : grilles, listes déroulantes, boutons, pagination, alertes, ... Développé sous licence Apache 2, il rencontre depuis sa sortie un franc succès au sein de la communauté des développeurs web.

Bootstrap version 3 apporte son lot de corrections mais également de nombreux composants supplémentaires comme les groupes d'input bien plus riches qu'auparavant, les groupes de listes ou encore le jumbotron qui permet de mettre en valeur un contenu important sur un site.

 

Pourquoi nous avons choisi Bootstrap 3

L'équipe Vertuoz a récemment choisi Bootstrap 3 pour l'adaptation en version mobile et tablette d'un site internet déjà existant. Il répondait en tout point à toutes les contraintes que nous avions à respecter à savoir :

  • la compatibilité sur la plupart des navigateurs (Chrome,  Safari, Opera 11+, Firefox 4+, Internet Explorer 8+),
  • une grille CSS3 permettant d'adapter les listes d'éléments aux terminaux mobiles,
  • un grand nombre de composants à l'intégration rapide (navbar, formulaires, icônes, boutons, ...),
  • un framework régulièrement mis à jour et disposant d'une communauté d'utilisateurs très active

 

Exemples et astuces

La grille

Voici quelques exemples d'intégration pour vous faire une idée de son fonctionnement :

<div class="grid-item col-lg-2 col-md-3 col-sm-4" />

Sur un écran à la résolution supérieure à 1200px, 6 éléments de la div s'afficheront sur la même ligne, 4 éléments s'afficheront pour une résolution supérieure à 992px, 3 éléments s'afficheront pour une résolution supérieure à 768px, 1 élément pour les résolutions inférieures à 768px.

Les Media Queries

Les Media Queries sont utilisées pour appliquer certaines règles de CSS en fonction de la résolution de l'écran du terminal. Voici les règles que nous avons utilisé pour certains de nos projets :

@media(min-width:1200px){} 
@media(min-width:992px){} 
@media(min-width:768px){} 
@media(min-width:480px){} 
@media(max-width:479px){}

Grâce à ces quelques règles vous pouvez tout personnaliser (ou presque). Attention cependant à ne pas perturber le fonctionnement responsive de la grille.

Un projet Bootstrap en plein écran

Par défaut, les pages créées avec Bootstrap doivent être conçues à l'intérieur du wrapper "container" qui ajoute des marges à gauche et à droite de l'écran :

<div class="container" />

Pour remédier à ce pseudo-problème dans le cas d'une application plein écran, une solution existe et consiste à remplacer ce dernier par le wrapper suivant :

.container-full {  margin: 0 auto;  width: 100%; }

Lorsque vous souhaitez appliquer par la suite des padding au texte vous pouvez utiliser ce qui suit :

.content { padding: 0 15px; } 
 

A noter : la rétro-compatibilité avec la version 2 de Bootstrap n'a pas été conservée. Vous devrez donc revoir votre code si vous souhaitez migrer de la version 2 vers la version actuelle. Pour plus d'informations vous pouvez consulter cette page.

Le Blog Vertuoz
Découvrez les articles originaux écrits par notre équipe : actualités de l'agence, conseils sur les meilleures techniques du web ou dernières réalisations,... nous les partageons ici dès que nous en avons l'occasion.
Bonne lecture !

Retrouvez toute notre actualité

News de l'agence, conseils sur les meilleures techniques du web ou dernières réalisations,... nous les partageons ici dès que nous en avons l'occasion. Bonne lecture !
Toute notre actualité
17 novembre 2023
Réussir votre projet de développement informatique !

Entreprendre la mise en place d'un développement informatique par le biais d'une agence spécialisée est une initiative stratégique visant à optimiser vos processus.
Cependant, pour garantir le succès de votre projet, il est essentiel de prendre conscience des erreurs courantes à éviter et de mettre en œuvre des stratégies efficaces.

Lire l'article
10 novembre 2023
Développement informatique : optez pour un CRM sur mesure !

Chaque entreprise est une entité unique, avec ses propres processus, ses besoins spécifiques et ses objectifs distincts. C'est là que réside le véritable atout du développement informatique sur mesure de votre CRM!

Lire l'article
03 novembre 2023
Faites évoluer votre ERP Dolibarr en intégrant des interfaces sur mesure

Dolibarr est un logiciel ERP open source très prisé des entreprises qui offre une base solide en terme de gestion d’activité, mais pour certaines organisations, l'intégration d'interfaces et de fonctionnalités personnalisées est indispensable pour répondre précisément à leurs besoins.

Lire l'article
27 octobre 2023
Comment fédérer vos utilisateurs à l’emploi d’un nouveau logiciel informatique ?

Lorsque vous investissez dans un nouvel outil, il est important que vos utilisateurs l'adoptent de manière enthousiaste. 
Voici nos conseils pour que vos utilisateurs adhèrent à ce changement.

Lire l'article
20 octobre 2023
Développement SaaS : Qu'est-ce que le Software as a Service ?

L'avènement du modèle Software as a Service (SaaS) a révolutionné la manière dont les entreprises utilisent et accèdent aux logiciels.

Le SaaS est devenu omniprésent, mais que signifie réellement ce terme et comment fonctionne-t-il ?

Lire l'article
13 octobre 2023
Prestashop, Shopify, développement sur mesure, quel sera votre choix pour la conception de votre site e-commerce?

Vous aspirez à renforcer votre commerce et votre présence en ligne alors la question se pose : quelle solution web répondra le mieux à vos besoins ?
Le choix de la bonne plateforme web est important pour le succès de votre entreprise.

Lire l'article