Fermer
DéveloppementOutils - Conseils

Utiliser Twitter Bootstrap pour votre application Web locale

Étant développeur d’application Web, il est facile de construire efficacement des applications Web, mais dès qu’il s’agit d’une interface utilisateur, je vois très bien ce qui me semble correct, mais j’ai du mal à réellement mettre en œuvre un aspect cohérent.
Ainsi, il m’est arrivé de créer une application assez complète en quelques jours, mais dès que j’essaie de le rendre harmonieux, cela peut prendre plusieurs semaines, et souvent tue le projet avant qu’il ne soit en ligne…

C’est pourquoi, j’ai commencé à utiliser Twitter Bootstrap dans certains de mes développements. Twitter Bootstrap est un “simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions”. Ainsi, Twitter bootstrap est une framework qui va vous permettre de démarrer le webdesign d’un site Web et ce, rapidement. Il devrait définitivement changer la façon dont les applications Web sont construites.

Dans les premiers instants de Twitter, les ingénieurs ont quasiment utilisé toutes les bibliothèque avec lesquelles ils étaient familiers, afin de satisfaire les exigences des interfaces Web frontend, autrement dit la partie publique du site Web (à la différence du backend, terme désignant la partie du site réservée aux administrateurs du site).
Mais, avec les incohérences entre les bibliothèque individuelles, il était difficile de maintenir une application fonctionnelle. Bootstrap a commencé a être une réponse à ces problèmes et a rapidement été accéléré au cours du premier Hackweek de Twitter. À la fin de ce dernier, une version stable était alors disponible et les ingénieurs pouvaient l’utiliser.

Avec l’aide et les commentaires de beaucoup d’ingénieurs, le Bootstrap a considérablement évolué afin d’englober non seulement les styles de base, mais également d’élégants modèles de conception frontend.

Aujourd’hui, Bootstrap fait un grand pas, avec le lancement de la version 2.0 ! Selon Mark Otto et Jacob Thornton, responsable du projet, Bootstrap 2 se veut être un framework entièrement nouveau, avec une nouvelle documentation, presque tous les composants ont été réécris, et ils ont ajouté quelques nouvelles fonctionnalités basées sur commentaires de la communauté. À ce sujet, ils indiquent que le framework est “une progression naturelle dont ils espèrent qu’il va répondre aux besoins de la communauté”.

Utiliser Twitter Bootstrap pour votre application Web locale

Voici les principales nouveautés :

  • Une nouvelle table de styles avec une classe de base commune pour une meilleure compatibilité avec d’autres outils tels que jQuery UI
  • Grid system
  • Responsive (media queries)
  • Nouveaux styles par défaut pour les avec les formulaires qui nécessitent moins de code HTML
  • Nouveaux composants de boutons (button groups et button dropdowns)
  • Ajouts de plugins : Collapse, Carousel, Typeahead

Enfin, veuillez noter que Bootstrap est testé et supporté par les principaux navigateurs modernes tels que Chrome, Safari, Internet Explorer et Firefox.

Il semblerait que Bootstrap continue à évoluer: “Au cours des prochains mois, nous allons continuer à itérer et écouter les remarques de la communauté, et nous allons aussi travailler à l’internationalisation de la documentation”.

Je recommande fortement d’utiliser Twitter Bootstrap dans tous vos projets, car il va vous permettre de vous concentrer sur ce que vous faites le mieux, et ainsi être assuré d’avoir une base solide et testée pour vos interfaces Web frontend.

Que pensez-vous de Bootstrap ? Utilisez-vous des outils similaires et vous font-ils améliorer votre productivité dans votre travail? Laissez-nous savoir dans les commentaires.

Mots-clé : cssframeworkGitHubhtmlinterfaces WebTwitterTwitter Bootstrap
Yohann Poiron

L’auteur Yohann Poiron

J’ai fondé le BlogNT en 2010. Autodidacte en matière de développement de sites en PHP, j’ai toujours poussé ma curiosité sur les sujets et les actualités du Web. Je suis actuellement engagé en tant qu’architecte interopérabilité.