Présentation de Twitter Bootstrap par Antoine Guédès et Cédric Dussart - http://www.idweaver.com

1. Bootstrap
http://twitter.github.com/bootstrap/
Cédric Dussart & Antoine Guédès
29 janvier 2013

2. Sommaire
1. Introduction
2. Qu'est-ce que Bootstrap ?
3. À qui s'adresse Bootstrap ?
4. Pourquoi l'avons-nous utilisé ?
5. Avantages & Inconvénients
6. Quelques exemples
7. Comment débuter ?
8. Conclusion
9. Questions & réponses

3. 1. Introduction
• Créateur : Mark Otto (@mdo) et Jacob Thorton (@fat),
chez Twitter
• But : uniformisation et maintenance des outils internes
• Date de création : Août 2011 - Première version open-
source
• Origine du nom

4. 2. Qu'est-ce que Bootstrap ?
• Un Framework HTML, CSS & JavaScript
• Fonctionnant sur n'importe quelle technologie
serveur ou environnement serveur.
• Avec une dizaine de composants, et plugin
JavaScript
• Son concept : Création et maintenance rapide d'un site
internet avec rendu correct, et interface complète

5. 3. À qui s'adresse Bootstrap ?
• Aux graphistes
• Aux intégrateurs
• Aux développeurs

6. 4. Pourquoi l'avons-nous utilisé ?
• Besoin de gain de temps
• Méthodologie commune nécessaire
• Meilleure compréhension entre designers, intégrateurs,
et développeurs
• Facilité de maintenance d'un projet après la mise en
ligne

7. 5. Avantages & Inconvénients
• Avantages :
o Facilité & Accessibilité
o Structure & Méthodologie
o Vitesse de développement accrue
o Framework porté vers le futur
o Grille fixe ou fluide
o Personnalisable & Modulable
o Compatibilité sur les différents browsers
(amélioration progressive sur IE7, et 8)

8. 5. Avantages & Inconvénients
• Inconvénients :
o Rendu des composants parfois limites sous IE
o L'héritage de classes peut devenir lourd
o Contrainte au niveau du design suite à l'utilisation de
la grille
o Peut prendre un certain temps pour qu'un site ait un
rendu unique

9. 6. Quelques exemples
• Utilisation des grilles, et du CSS : Pernod Ricard
• Utilisation des composants JavaScript :Bossa
LovaLima
• Utilisation d'un layout fluide :SnackTracks Mobile
• Exemple d'un CMS personnalisée pour un e-
commerce :Fluid Admin

10. 7. Comment débuter ?
• Implémentation
• Personnalisation & utilisation de Less
• Starter files
• Comment l'utiliser :
o Utilisation à la carte, ou partielle
o Personnalisation du template

11. 8. Conclusion
• Verdict positif : tant de la part des dev que des
intégrateurs
• Intégralement intégré au workflow
• Suivi des MAJs
• Bootstrap 3 : drop de IE7 et FF3, icônes implémentées
via @font-face et plus par png, un seul fichier css (fluide
et static sont ensemble)

12. 9. Questions & réponses