Qu'est ce que Bootstrap ?
Bootstrap est une collection d’outils utiles à la création du design de sites et d’applications web. C’est un ensemble qui contient des codes HTML et CSS, des formulaires, boutons, outils de navigation et autres éléments interactifs, ainsi que des extensions JavaScript en option.
Le framework Bootstrap est donc un ensemble de fichiers CSS et JavaScript qui contiennent des règles prédéfinies et qui définissent des composants. Ces ensembles de règles sont enfermés dans des classes et nous n’aurons donc qu’à utiliser les classes qui nous intéressent afin d’appliquer un ensemble de styles à tel ou tel élément HTML.
Le contenu de bootstrap
I. Le contenu de Bootstrap
Le framework est à récupérer ici : http://getbootstrap.com/getting-started#download il contient différents fichiers fichiers ventilés dans des répertoires :
- des fichiers CSS (qui décrivent tous les blocs de règles)
- des fichiers d’icônes dans divers formats (pour compatibilité)
- des fichiers JavaScript (pour gérer la compatibilité avec tous les navigateurs et pour ajouter des fonctionnalités). Ces fichiers utilisent la bibliothèque JavaScript jQuery qu’il faut télécharger aussi : http://code.jquery.com/jquery-2.1.1.min.js Certains fichiers contient « min » dans leur nom, et d’autres non :
- Les fichiers sans « min » sont fichiers lisibles et contiennent des commentaires aidant à leur compréhension. Ils sont destinés au développement
- Les fichiers avec « min » sont des fichiers « minifiés », c’est à dire compressés (sans commentaires, ni espaces, etc.) qui sont utilisés pour le site en production (pour diminuer la bande passante nécessaire)
Les bases de Bootstrap
I. La base HTML(5) de Bootstrap
Bootstrap propose un DOM de base pour les fichiers HTML. Il faut l’utiliser pour profiter des avantages du framework.
Voici cette base :
<!DOCTYPE html> <!-- WARNING : Respond.js doesn't work if you view the page via ile:// --> |
On y reconnaît le doctype du HTML5 (obligatoire pour Bootstrap), et des éléments particuliers dans le head :
- La balise meta permet de définir quelle est le type d’écran par défaut
- La balise link renvoie vers les CSS de Bootstrap
- Les balises script renvoient vers les programmes en JavaScript de Bootstrap qui rendent certains navigateurs compatibles HTML5
On retrouve aussi des balises script dans le body qui permettent d’activer d’autres programmes en JavaScript de Bootstrap.
Positionnement CSS, et décoration avec un Framework
Qu’est-ce qu’une grille ?
En conception web, comme en typographie et en publication assistée par ordinateur, une grille est un quadrillage invisible sur lequel sont calés les contenus. Elle contient donc des colonnes (col) et parfois des lignes (row).
Pourquoi utiliser une grille ?
- Elles facilitent l’organisation des contenus
- Elles permettent de respecter des proportions équilibrées entre les contenus
- Elles permettent de respecter les marges qui conviennent à la lecture (rythme des blancs) voir aussi : http://www.alsacreations.com/article/lire/1196-grilles-framework-css-webdesign.html ( avec des exemples concrets de types de grilles ).
Des classes pour positionner sur la grille
Voici quelques exemples avec « * » correspondant à un nombre de colonnes.
- col-md-* permet de choisir la largeur d’un contenu en nombre de colonnes
- row désigne une ligne de la grille : les lignes se superposent dans une colonne
- col-md-offset-* permet de choisir à partir de quelle colonne commence un contenu
- col-md-pull-* permet de décaler un contenu de « * » colonnes à gauche de sa position normale
- col-md-push-* permet de décaler un contenu de « * » colonnes à droite de sa position normale
Les deux dernières classes (col-md-pull-* et col-md-push-*) permettent donc de choisir l’ordre des colonnes.
Des classes typographiques et décoratives
D’autres classes proposées par Bootstrap permettent de s’intéresser à l’aspect des contenus et à la typographie. Voici quelques exemples :
- h* où « * » est compris entre 1 à 6 permet de donner le même style qu’un élément titre (<h*>) à n’importe quel contenu
- lead permet de mettre en évidence un contenu (il sera notamment en plus gros)
- text-uppercase, text-lowercase, text-capitalize permettent de choisir la casse du texte ( majuscules ou non ).
- img-rounded, img-circle, img-thumbnail permettent d’encadrer les images de différentes façons (cette classe se réserve donc à des contenus de ce type) : à bords arrondis, dans un cercle, dans une vignette.
- jumbotron doit contenir un élément container et permet de créer un bandeau avec du texte bien mis en évidence
- Des icônes, obtenues en donnant une classe glyphicon accompagnée d’une classe spécifique de l’icône (liste ici : http://getbootstrap.com/components/#glyphicons) à un élément, par exemple : <span class=”glyphicon glyphicon-info-sign”></span> (à tester dans jsfiddle)
Une barre de menu avec Bootstrap
Bootstrap, comme la plupart des frameworks CSS, propose des mécaniques pour aider à faire un tel menu.
L’élément qui contient le menu (ex. <nav>) devra comporter au moins deux classes :
- navbar qui identifie le contenu de cet élément comme une barre de navigation
- navbar-fixed-* ou navbar-static-* où « * » peut être top ou bottom. Indique si la barre de menu doit défiler avec la page (« static ») ou rester au même endroit de la fenêtre quand la page défile (« fixed »), ainsi que l’endroit où placer la barre (haut ou bas de la page)
Il faut noter que l’élément qui porte ces deux classes doit contenir une liste portant elle aussi deux classes particulières : nav et navbar-nav :
<ul class=”nav navbar-nav”>
<li><a href=”lien1″>Premier élément du menu< /a></li >
<li><a href=”lien2″>Second< /a></li >
<li><a href=”lien3″>Troisième< /a></li > < /ul >
Quelques autres classes :
- navbar-brand permet de titrer la barre de menu (et souvent, permet en fait de titrer le site luimême, d’où l’appellation « brand »)
- active désigne l’item de la liste des éléments du menu qui est visité actuellement Voir :
- http://getbootstrap.com/components/#navbar
- http://fr.openclassrooms.com/informatique/cours/prenez-en-main-bootstrap/les-composantsintegres
Conception adaptative (Responsive design)
Le principe du « responsive design » est de faire des sites capables de s’afficher correctement et lisiblement sur tous les types d’écrans (grands et petits, portrait ou paysage, etc.).
C’est inclus par défaut dans les frameworks CSS récents comme Bootstrap. C’est facilement vérifiable grâce à la fonction dédiée de Firefox qui permet de tester un site avec différents types d’écrans. On accède à cette fonction par le raccourci ¦§M.
Néanmoins, il est possible de contrôler plus finement cet automatisme pour avoir un affichage choisi pour chaque type d’écran.
Largeur des éléments
Nous avons vu que les classes définissant la largeur des contenus sont de la forme col-md-* (avec « * » pour la largeur en colonnes, c’est-à-dire de 1 à 12). Il s’agit en fait de la classe qui détermine cela pour les écrans moyens (entre 992 et 1200 pixels de large), mais, il en existe d’autres pour les autres types d’écrans. Il y a :
- col-xs-* pour les écrans plus petits que 768 pixels de large
- col-sm-* pour les écrans entre 768 et 992 pixels de large
- col-md-* pour les écrans entre 992 et 1200 pixels de large
- col-lg-* pour les écrans de plus de 1200 pixels de large
Grâce à ces classes, on peut choisir pour chaque contenu de la page la façon dont ils vont s’afficher les uns par rapport aux autres en fonction du périphérique de consultation. Ex. : sur grand écran, on évitera les textes trop larges (illisibles) et donc on privilégiera les contenus rangés les uns à côté des autres. Au contraire, sur un appareil mobile à l’écran peu large, on favorisera les contenus placés les uns au-dessus des autres.
Note : on appelle « xs », « sm », « md », et « lg » des « breakpoints » car ils déterminent pour quelle taille d’écran un changement de comportement a lieu. Nous verrons plus loin que d’autres classes les utilisent.
Voir en détail les 4 types de classes : http://getbootstrap.com/css/#grid-options pour les différentes tailles d’écrans
Montrer/cacher des éléments
D’autres classes permettent d’aller plus loin en donnant la possibilité de montrer ou de cacher certains contenus en fonction de la taille de l’écran. Les classes les plus simples à utiliser sont les classes pour cacher : hidden-* avec « * » à remplacer par les breakpoints de Bootstrap (« xs », « sm », « md » et « lg ») pour choisir sur quel type d’écran le contenu sera caché.
Les classes visible-x-y jouent le rôle inverse en permettant de montrer des contenus en fonction de la taille de l’écran. Elles prennent deux paramètres. « x » correspond au breakpoint utilisé et permet donc de choisir pour quelle taille d’écran montrer quelque chose. « y » correspond au type d’affichage à produire parmi trois possibilités : « block », « inline » et « inline-block » (voir le cours sur les CSS).
Voir : http://getbootstrap.com/css/#responsive-utilities-classes
Le menu responsive de Bootstrap
Bootstrap propose aussi des fondations pour rendre les barres de menu plus agréables à utiliser sur les petits écrans : sur les grands écrans, le menu est affiché tel que nous l’avons défini précédemment, alors que sur les petits écrans il est remplacé par une icône, et le menu se déplie lorsque l’on clique (ou appuie avec son doigt) dessus.
Ce mécanisme dans Bootstrap met en jeu un programme JavaScript fourni et qui surveille dans le DOM la présence de contenus portant les deux classes navbar-collapse et collapse. Si ces classes sont présentes et que la taille d’écran atteint moins de 994px (écrans petits selon les breakpoints de Bootstrap), alors le contenu qu’elles désignent est caché au profit du contenu portant les classes navbar-toggle et collapsed ainsi que des attributs particuliers data-toggle=”collapse” et datatarget=”#bs-example-navbar-collapse-1″. Voici un exemple concret :
<nav class="navbar navbar-default" role="navigation">
<div class="container-luid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" datatarget="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation< /span >
<span class="icon-bar">< /span >
<span class="icon-bar">< /span >
<span class="icon-bar">< /span >
< /button >
<a class="navbar-brand" href="#">Brand< /a >
< /div >
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link< /a></li >
<a href="#">Link< /a></li >
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown <span class="caret">< /span></a >
<ul class="dropdown-menu" role="menu"><a href="#">Action< /a></li >
<a href="#">Another action< /a></li >
<a href="#">Something else here< /a></li >
<li class="divider">< /li >
<a href="#">Separated link< /a></li >
<li class="divider">< /li>
<a href="#">One more separated link< /a></li >
< /ul >
< /li >
< /ul >
< /nav >
</div>
</div>
Vous pouvez tester cette barre de menu dans jsfiddle. Vous constaterez qu’elle contient un menu dépliant qui est également rendu possible grâce à un programme en JavaScript fourni avec Bootstrap.
Plus de détails :
