Présentation du Framework BootstrapTwitter

LP-SIL IDSE
Octobre 2012
COUARD Kévin
HELVIG-LARBRET Blandine
IUT Nice-Sophia
Présentation du Framework BootstrapTwitter

2
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
Sommaire

3
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
Présentation du Framework BootstrapTwitter

4
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/bootstrap-
responsive.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".

5
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.