COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012
Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter... 3 II. NOTION DE GRILLE... 4 III. ELEMENTS DE BASE... 4 Listes... 4 Tableaux... 5 Formulaires... 5 Boutons... 5 IV. COMPOSANTS INTEGRES... 5 Barre de navigation... 5 Effets typographiques... 5 Thumbnails... 6 V. RESPONSIVE-DESIGN... 6 VI. PLUGINS JQUERY... 6 VII. PLUGINS ET EXTENSIONS... 6 Références... 7 2
Présentation du Framework BootstrapTwitter I. INTRODUCTION Définition d'un framework Un framework est un outil de programmation informatique constitué de composants structurés permettant de créer les fondations d'un code et d'organiser celui-ci. Il permet ainsi d'améliorer la productivité ou de faciliter la maintenance du logiciel. Beaucoup de frameworks sont employés pour les applications web basées sur les langages Java, Python, Ruby, PHP... Les frameworks CSS sont spécialisés, comme leur nom l'indique, dans les feuilles de style CSS. C'est-à-dire qu'ils permettent de mettre en forme des pages web : organisation, aspect visuel, animation... Ils présentent l'avantage d'harmoniser l'affichage des pages web quel que soit le navigateur. De plus, ils facilitent le développement grâce aux éléments prédéfinis qu'ils proposent, notamment la prise en compte des contraintes d'affichage liées aux différentes technologies (smartphone, tablettes, ipod...). Devenus à la mode, de nombreux frameworks CSS ont ainsi vu le jour, dont BootstrapTwitter. A propos de BootstrapTwitter Publié en Août 2011 pour répondre à des besoins internes de développement de l'entreprise Twitter, BootstrapTwitter est donc un framework CSS mis à disposition du public sous licence Apache2. En version 2 depuis 2012, il est testé et supporté sur les principaux navigateurs modernes tels que Chrome, Safari, Internet Explorer et Firefox. Il propose un ensemble de grille, de styles, de typographies, de messages... permettant de démarrer le design d'un site web rapidement. BootstrapTwitter est livré avec CSS compilés, non compilés et des exemples de modèle. Il contient : du code fondé sur HTML 5 et CSS 3 ; des éléments "responsive-design" qui prennent en compte les différents formats d'affichage des principaux outils de navigation (smartphones, tablettes...) ; des éléments permettant la compatibilité avec la majorité des navigateurs ; une mise en page basée sur un principe de grille ; un reset CSS basé sur Normalize.css* ; une architecture basée sur LESS*; une bibliothèque totalement open source, sous licence Apache ; des plugins jquery pour l'utilisation de JavaScript ; et la documentation présente sur le site de Twitter. A l'installation, un répertoire principal "bootstrap" se répartit en 3 sous-répertoires contenant divers fichiers : - le répertoire "css" contenant les classes de bases, - le répertoire "img" contenant une collection d icônes fournies par Glyphicons* en version noires ou blanches, - et le répertoire "js" contenant des fonctions JavaScript des composants de Bootstrap. *Normalize.css = framework permettant d'utiliser les styles par défaut du navigateur *LESS = outil permettant d'étendre les possibilités de CSS *Glyphicons = librairie d'icones 3
Tous les fichiers sont également présents en une version ".min" qui définit le même code que celui du fichier de base correspondant, mais épuré des commentaires et ainsi allégé pour accélérer le chargement. Pour utiliser BootstrapTwitter, il est impératif de coder en HTML5. Il faut alors déclarer les différentes ressources utilisées : - au moins un fichier bootstrap(.min).css - et éventuellement un fichier bootstrap-responsive(.min).css si l'application est destinée à être utilisée sur des supports technologiques variés. <!DOCTYPE html> <head> <link href= "bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"> <linkhref="bootstrap/css/bootstrapresponsive.min.css"rel="stylesheet"type="text/css"> </head> II. NOTION DE GRILLE La première fonctionnalité de BootstrapTwitter est de pouvoir organiser les différents éléments d'une page web sur une grille prédéfinie. Par défaut cette grille comporte 12 colonnes, mais il possible de changer ce chiffre en modifiant la configuration. Du point de vue code, l utilisation de cette grille est très simple : il suffit d ajouter à une balise <div>, pour une ligne définie par la classe "row", une classe "span" suivie du nombre de colonnes. Dans l'exemple suivant, 2 éléments ont été créés sur une ligne : l'un a une largeur de 4 colonnes, l'autre de 8 colonnes. <div class="row"> <div class="span4">element de largeur 4</div> <div class="span8">element de largeur 8</div> </div> Cette grille s avère très utile pour le squelette de la page web (header, menu, contenu) et remplace parfaitement la balise <table> pour la mise en forme en tableau. III. ELEMENTS DE BASE Listes BootstrapTwitter permet également de mettre en forme des listes en utilisant simplement les balises HTML <ol>, <ul>, <li>. Elles sont alors modifiées automatiquement par le CSS qui permet un meilleur rendu graphique que les composants de bases du navigateur. Un icône est inséré à chaque début de ligne pour servir de puce aux balises <ul>, mais il est aussi possible de ne pas en utiliser en ajoutant simplement une classe "unstyled". 4
Tableaux Les tableaux aussi ont été remodelés, et leur utilisation simplifiée par la même occasion. Le framework gère plusieurs types de tableaux avec diverses caractéristiques comme la présence ou non de bordure, la couleur du fond... Pour choisir le type de tableau, il suffit d ajouter à la balise <table> une classe correspond au tableau voulu et de réaliser son tableau comme sous HTML puisque que les balises <tbody>, <tr>, <th>, <td>... sont traitées. Formulaires Ici, l outil nous permet de réaliser des formulaires en utilisant les balises HTML classiques. Elles sont toutes gérées, du champ de saisies à la liste déroulante. Encore une fois, l utilisation ce fait par l utilisation de classe CSS et de balise HTML. La mise en forme du formulaire peut, elle aussi, être modifié par un simple ajout de classe. On peut ainsi obtenir des formulaires verticaux ou horizontaux, des éléments plus ou moins grands... A cela s ajoute la couleur de l élément qui peut varier selon la validation de la saisie. Boutons Pour finir, parmi les éléments de base, il y a les boutons dont il est possible de choisir la taille et la couleur. Ce qui est intéressant avec ce composant, c est qu il est possible, en ajoutant une classe, de transformer un lien (balise <a>) en bouton. IV. COMPOSANTS INTEGRES Barre de navigation La barre de navigation est un des composants ajoutés par Twitter dans son framework. Totalement inventé, il utilise les balises <div> associées à des classes CSS. Il existe plusieurs composants pour personnaliser la barre comme les champs de recherche, les sous-menus dynamiques (dropdown) et même les classes permettant de donner un rendu différent suivant le menu sélectionné. On peut même obtenir un rendu sous forme d onglet ou encore, comme sur les forums, sous forme hiérarchique. Effets typographiques De nombreux effets typographiques sont gérés par BootstrapTwitter, mais certains sont aussi ajoutés à ceux existants. Ainsi les balises comme <h1>, <p>... voient leur rendu amélioré. La couleur, la taille (par default : 14px) et l'alignement y sont configurables. 5
D autres effets ont été ajoutés, comme les classes "hero-unit" ou "page header". L'utilisation de la première modifie le fond et la taille de la police. La seconde apporte un titre à la page. Thumbnails Les images aussi voient leur rendu amélioré grâce à l utilisation de la classe "thumbnails". Il est ainsi possible de produire des effets au passage de la souris sur une image : changement de la bordure, apparition d'une légende ou encore modification de la forme de l image (ovale, rond...). V. RESPONSIVE-DESIGN Un des majeurs avantages de ce framework est le responsive-design. La page web l utilisant s adapte dynamiquement à la taille de la fenêtre, ce qui la rend compatible avec les smartphones et les tablettes. Certaines classes CSS permettent d aller plus loin en rendant visible certains composants HTML uniquement à certains appareils. VI. PLUGINS JQUERY BootstrapTwitter apporte aussi son lot de plugins jquery modifiés pour obtenir un rendu en adéquation avec le reste de la page. Ainsi, il est proposé pas moins de 12 plugins modifiés allant de la "PopUp Modal", pour afficher un message à l écran, jusqu'au "carousel" qui permet de faire défiler des images horizontalement, en passant par les "alert" pour notifier l utilisateur. En plus d être en accord avec le design du framework, ces plugins sont bien plus simples à l emploi que les plugins basiques. VII. PLUGINS ET EXTENSIONS BootstrapTwitter ayant été conçu pour être générique, il également possible d'ajouter des plugins et des extensions extérieurs. Ainsi des développeurs indépendants proposent d autres plugins jquery comme le "DatePicker", qui affiche un calendrier, ou "ColorPicker", qui permet de choisir une couleur à partir d une palette. De même, certains sites proposent des extensions pour améliorer l aspect des composants déjà existants, voire même les adapter exclusivement aux mobiles. BootstrapTwitter est donc un framework de développement web facile d'utilisation et riche de composés qui permet de créer rapidement des pages internet esthétiques et dynamiques. 6
Références Références site de BootstrapTwitter : http://twitter.github.com/bootstrap/index.html site Wikipedia : http://fr.wikipedia.org/wiki/framework site de présentation de Normalize.css : http://lab.darklg.me/cssnormalize/ site de présentation de LESS : http://lesscss.org/ site de la librairie Glyphicons : http://glyphicons.com/ site du zero : http://www.siteduzero.com/tutoriel-3-683133-mise-en-route.html#ss_part_2 7