« Bootstrap » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
m (→‎Cadre d'utilisation : orthographe)
(Effacé liens liés à la version 5, plus adéquants dans la page dédiée)
 
(61 versions intermédiaires par 8 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
==Introduction==
==Introduction==
===Présentation de Bootstrap===


[http://getbootstrap.com/ Bootstrap] est un framework front-end ([[HTML5]], [[CSS]] et [[JavaScript]]) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).
[http://getbootstrap.com/ Bootstrap] est un framework front-end ([[HTML5]], [[CSS]] et [[JavaScript]]) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).
Ligne 11 : Ligne 10 :
* '''Design "responsive"''' : la structure de la page s'adapte automatiquement à différents dispositifs et tailles d'écran.
* '''Design "responsive"''' : la structure de la page s'adapte automatiquement à différents dispositifs et tailles d'écran.


Pour utiliser Bootstrap une connaissance de base de [[HTML5]] et [[CSS]] est suffisante. Une connaissance de base de [[JavaScript]] serait également utile pour exploiter toutes les caractéristiques du framework. Parmi les caractéristiques plus importantes on trouve :
Pour utiliser Bootstrap une connaissance de base de [[HTML5]] et [[CSS]] est suffisante. Une connaissance de base de [[JavaScript]] serait également utile pour exploiter toutes les caractéristiques du framework. Parmi les caractéristiques les plus importantes, on trouve :


* '''Reset du code CSS''' : toutes les propriétés de style déjà prévues dans les navigateurs sont annulées ainsi de garantir la compatibilité et homogénéité entre navigateurs.
* '''Reset du code CSS''' : toutes les propriétés de style déjà prévues dans les navigateurs sont annulées, permettant ainsi de garantir la compatibilité et l'homogénéité entre les navigateurs.
* '''Structure de la page''' : on peut créer facilement des mises en page modulaires grâce notamment à un système de division de la page en grille.
* '''Structure de la page''' : on peut créer facilement des mises en page modulaires, grâce notamment à un système de division de la page en grille.
* '''Composants d'interface graphique''' : disponible "out of the box", ces éléments comprennent des menu de navigation, des fenêtres modales, formulaires, tableaux, etc.
* '''Composants d'interface graphique''' : disponible "out of the box", ces éléments comprennent des menus de navigation, des fenêtres modales, des formulaires, des tableaux, etc.
* '''Éléments dynamiques''' : possibilité d'intégrer facilement des éléments dynamiques comme des carrousels d'images, tabs, alertes, etc.
* '''Éléments dynamiques''' : possibilité d'intégrer facilement des éléments dynamiques, comme des carrousels d'images, des onglets, des alertes, etc.


===Cadre d'utilisation===
===Cadre d'utilisation===
Grâce à sa modularité et flexibilité, Bootstrap peut être utilisé dans différentes situations. Il permet d'afficher des informations de manière structurée et sans trop d'effort, mais en même temps il peut représenter la base pour la construction d'une interface complexe. Voici quelques exemples d'utilisation possibles :
Grâce à sa modularité et sa flexibilité, Bootstrap peut être utilisé dans différentes situations. Il permet d'afficher des informations de manière structurée et sans trop d'effort, mais en même temps, il peut représenter la base pour la construction d'une interface complexe. Voici quelques exemples d'utilisation possibles :


* Page ou site personnels
* Page ou site personnels
Ligne 28 : Ligne 27 :
* Etc.
* Etc.


==Installation==
== Versions ==
===Versions de Bootstrap===
À présent (sept. 2014), Bootstrap est disponible dans la version '''3.2'''. Dans des tutoriels ou pages web vous pouvez également trouver des références à des versions précédentes avec son nom de départ : Twitter Bootstrap. Aucune relation n'existe plus entre les créateurs et Twitter, donc le nom du framework est resté seulement Bootstrap.


La version 3.x est assez récente, donc souvent des sites ou templates utilisent encore la version 2.x. Les différences entre les deux versions ne sont pas énormes, bien que la version 3.x soit meilleure car le framework a été réécrit totalement. La différence plus importante concerne le design"responsive" :
Les versions les plus utilisées à présent (septembre 2022) de Bootstrap sont les versions :


* À partir de la version 3.x, les pages proposent automatiquement les comportements d'adaptation du layout (i.e. réactivité).
* {{ Goblock | [[Bootstrap 3]] }}
* Dans la version 2.x il faut inclure une feuille de style supplémentaire, car ses comportements ne sont pas proposés de base. La documentation pour la version 2.x est toujours disponible [http://getbootstrap.com/2.3.2/ sous ce lien]
* {{ Goblock | [[Bootstrap 4]] }} (à partir plus ou moins de 2018)
* {{Goblock | [[Bootstrap 5]] }}(à partir du 5 mais 2021)


Les exemples et références dans la suite de cette page concernent exclusivement la version 3.x du framework.
==Liens externes==


===Les fichiers du framework===
*[https://github.com/twbs/Bootstrap Bootstrap] sur Github
Bootstrap se compose de trois fichiers :


* '''bootstrap.css'''  : un fichier CSS avec les propriétés de style principales nécessaire à structurer la page et les Composants d'interface graphique
[[Catégorie:Programmation]]
* '''bootstrap-theme.css''' : un fichier CSS supplémentaire, ou thème, qui ajoute des caractéristiques graphiques ultérieurs aux propriétés du fichier principal. Ce fichier n'est cependant pas obligatoire.
* '''bootstrap.js''' : un fichier JS qui permet l'intégration d'éléments dynamiques. Ce fichier est une extension de la bibliothèque [[jQuery]] qui doit également être incluse si on veut utiliser les éléments dynamiques.
 
Chacun des trois fichiers existe en deux versions :
 
* La version "'''normale'''", avec les noms illustrés plus haut, qui est utile dans la phase de développement pour avoir une référence au code utilisé par le framework
* La version "'''minified'''", avec le suffix "'''.min'''" inséré avant l'extension du fichier (i.e. bootstrap.min.css, bootstrap-theme.min.css, et bootstrap.min.js). La version "minified" présente exactement le même code de la version "normale" mais sans retours à la ligne ou tabulations, ce qui réduit la taille des fichiers. Pour cette raison, il est bien d'intégrer les versions "minified" dans les pages.
 
===Comment obtenir les fichiers du framework===
Bootstrap met à disposition plusieurs modalités d'intégration dans une page HTML.
 
====Bootstrap CDN====
Les fichiers qui composent le framework sont disponible à travers un URL spécifique. Cet URL est mis à disposition par un [http://www.bootstrapcdn.com/ réseau CDN] (Content Delivery Network) optimisé selon la provenance géographique de la requête, ainsi de maximiser la vitesse de téléchargement. Cette méthode est la plus immédiate. Voici le code pour inclure chacun des fichiers (depuis la section "getting started" du site officiel de Bootstrap) :
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
Vous pouvez remarquer qu'il n'y a pas de protocole au début des URL. Vous avez en effet la possibilité de spécifier soit le protocole http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css, soit la version sécurisée https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css.
 
====Download des fichiers====
Les fichiers sont disponibles pour le download sur le site officiel de Bootstrap [http://getbootstrap.com/getting-started/#download sous ce lien]. Le site met également à disposition le code source et une version avancée du code qui ne sera pas traitée dans cette page.
[[Fichier:Bootstrap download.jpg|frame| none| Download de Bootstrap (source: site officiel)]]
 
Le fichier .zip téléchargé se compose des trois dossiers contenant les fichiers suivants :
 
[[Fichier:Bootstrap files.jpg| thumb | none |Fichiers du framework]]
 
Le dossier "fonts" est nécessaire pour les icônes que Bootstrap met à disposition.
 
Dans une page HTML qui se trouve au même niveau des dossiers, le code pour inclure chaque fichier "minified" serait le suivant :
 
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
 
Le download des fichiers est recommandé en phase de développement afin d'avoir à disposition une version du code facile à observer dans le cas qu'on nécessite d'une référence. De plus, disposer du fichier sur son propre ordinateur permet de développer aussi sans être connectés à internet.
 
====Download d'une version personnalisée du framework====
Sur le site officiel il y a même la possibilité de choisir sa propre configuration du framework à travers le lien du menu principal "[http://getbootstrap.com/customize/ Customize]". Les options à choisir sont cependant très nombreuses et cette possibilité ne sera pas traitée dans cette page. Il reste néanmoins la possibilité de personnaliser les pages à travers l'ajout d'une feuille de style personnalisée. Cette possibilité est traitée de manière détaillée plus bas dans cette page.
 
===Page HTML de base===
La section "getting started" du  site officiel de Bootstrap suggère une structure de départ d'une page HTML5 (il est nécessaire que la page soit déclarée comme page HTML5 et non XHTML ou autre) qui est la suivante :
<source lang="HTML5">
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
</source>
Analysons les parties importantes de cette structure :
 
<!DOCTYPE html>
<html lang="en">
...
</html>
 
D'abord, le document doit être forcément une page HTML5 pour exploiter toutes les fonctionnalités de Bootstrap. On ne peut donc pas utiliser ce framework avec des pages XHTML. Vous pouvez par contre bien entendu changer l'attribut lang (ou même l'enlever, il n'est pas strictement nécessaire).
 
À l'intérieur de la balise head on trouve plusieurs éléments intéressants :
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
Cette balise sert pour ajouter la fonction de zoom dans les dispositifs mobiles, c'est-à-dire la possibilité dans les dispositifs touchscreen d'agrandir une zone de la page pour faciliter sa lecture. Vous pouvez désactiver cette possibilité en ajoutant d'autres valeurs au meta-tag "viewport", bien que cette fonctionnalité soit normalement très utile.
 
<link href="css/bootstrap.min.css" rel="stylesheet">
 
Cette balise, on l'a vu, sert pour intégrer les propriétés de style fournies par le framework. Comme vous pouvez le noter, le pointage au fichier .css est relatif, donc cette structure de page implique que les fichiers du framework soient téléchargés et mise en ligne avec le contenu de la page.
 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
 
Ces scripts externes JavaScript servent pour garantir la compatibilité avec la version 8 de Internet Explorer. Si vous êtes sûr que vos pages seront utilisées avec des versions plus récentes, ces scripts ne sont pas strictement nécessaires au fonctionnement du framework.
 
Avant la balise de clôture de l'élément body on trouve deux références à des scripts JavaScript :
 
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
 
Le premier script est une référence externe à une version de la bibliothèque [[jQuery]] mise à disposition sur les serveurs de Google. Comme indiqué dans le commentaire du code et expliqué plus haut dans cette page, la bibliothèque est nécessaire pour le fonctionnement des interactions dynamiques du framework. L'intégration de la bibliothèque dans votre page peut se faire d'autres manières, par exemple avec une copie du fichier en local. Pour plus d'information, consultez la page de ce Wiki dédiée à [[jQuery]].
 
Le deuxième script est le plugin que Bootstrap met à disposition pour l'intégration des éléments dynamiques. Ce script doit être placé après la bibliothèque [[jQuery]]. Comme dans le cas du fichier .css, encore une fois il s'agit d'une référence relative et donc le fichier bootstrap.min.js doit être téléchargé est mis en ligne avec le contenu de la page.
 
Ce template représente un bon point de départ mais n'est pas obligatoire. D'ailleurs vous pouvez noter que ce template n'utilise pas le fichier bootstrap-theme.min.css. Vous pouvez par conséquence vous créer votre propre template de départ selon vos besoins.  La page doit cependant respecter ces contraintes :
 
# Le document doit être une page HTML5 (donc commencer avec  <!DOCTYPE html>
# Au moins le lien au fichier boostrap.min.css est obligatoire pour la mise en page, mais les éléments dynamiques ne seront pas disponibles
# La bibliothèque [[jQuery]] doit être incluse avant le ficheir bootstrap.min.js si on veut exploiter les éléments dynamiques du framework
 
===Exemples de pages===
Dans la page "Getting started" du site officiel sont présentés plusieurs [http://getbootstrap.com/getting-started/#template exemples de templates] qui sont utiles à la fois comme squelettes de départ pour une page et pour mieux comprendre l'utilisation des différents élément du framework.
 
[[Fichier:Bootstrap examples.jpg|1000px|thumb|none|Exemples de composants graphiques (source: site officiel)]]
 
==Structure de page "responsive" avec Bootstrap==
Une des caractéristiques principales de Bootstrap est la possibilité de créer des designs "responsive", c'est-à-dire que les pages s'adaptent automatiquement à différents dispositifs et tailles d'écran. La réactivité de la page est rendue possible à travers un système de grille ("grid" en anglais) qui divise le contenu de la page en 12 colonnes, et à des propriétés CSS prédéfinies qui permettent d'afficher du contenu sur la base de la taille de l'écran.
 
===L'élément "conteneur"===
Pout utiliser le système de grille et permettre à Bootstrap d'adapter le contenu, il faut d'abord utiliser un élément qui encadre le contenu, une sorte de "conteneur". Bootstrap met à disposition deux éléments conteneurs :
 
<source lang="HTML5"><div class="container"></div></source>
Ce conteneur a une largeur "fixe" en rapport à la taille de l'écran ([http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/bootstrap/container_fixed.html exemple])
 
<source lang="HTML5"><div class="container-fluid"></div></source>
Ce conteneur a une largeur qui correspond toujours à la taille maximale de l'écran ([http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/bootstrap/container_fluide.html exemple])
 
Veuillez noter que les éléments conteneurs ne peuvent pas être emboités, mais vous pouvez utiliser plusieurs éléments dans la même page. Vous pouvez également alterner entre éléments "fixes" et fluides dans le même document ([http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/bootstrap/container_combined.html exemple]).
 
===Le système de grille===
Bootstrap divise le contenu d'un "conteneur" en 12 colonnes de largeur équivalente. Voici le caractéristiques de ce système de grille :
 
* Le système de grille fonction exclusivement à l'intérieur d'un élément conteneur (voir plus haut)
* Pour définir une structure en colonnes il faut avant définir une ligne avec une balise <code>div</code> de classe "row"
* La largeur de chaque colonne du système de grille dépend de la largeur de l'élément conteneur
* Il existe une taille minimale de la colonne, si cette largeur minimale est atteinte, le mécanisme "responsive" étalera automatiquement les colonnes sur plusieurs lignes
* La taille minimale de la colonne dépend du type de classe de la colonne :
** '''.col-xs-X''' : conçue pour les très petits écrans comme les smartphones (<768px)
** '''.col-sm-X''' : conçue pour les petits écrans comme les tablettes (>768px)
** '''.col-md-X''' : conçue pour les écrans normaux comme par exemple les ordinateur portables (>992px)
** '''.col-lg-X''' : conçue pour les écrans haute résolution (>1200px)
* Une colonne peut s'étaler sur un nombre de colonnes qui va de 1 à 11 (pour une colonne qui tient toute l'espace de la page il ne faut pas utiliser une ligne). Pour ce faire il faut définir à la fin de la classe le nombre de colonnes occupées :
** class=".col-XX-1"
** class=".col-XX-2"
** ...
** class=".col-XX-11"
* Une ligne peut se compose de colonnes de différents empans, il faut que la somme soit 12. Si le total dépasse 12, les colonnes en plus seront automatiquement renvoyées à la ligne suivante
* Il est possible de "sauter" des colonnes qui resterons vides, pour ce faire il faut ajouter la classe .col-XX-offset-X avec à la fin le nombre de colonnes à sauter (e.g. .col-md-offset-4)
* Il est possible d'emboiter des colonnes à l'intérieur d'une autre colonne. À ce point la colonne "conteneur" devient à son tour un élément à 12 colonnes et le même principe sera appliqué.
 
Voici un tableaux récapitulatif, tiré du site officiel, des options des colonnes :
 
[[Fichier:Bootstrap grid.jpg|frame|none|Les différents comportements des colonnes (source: site officiel)]]
 
====Exemples du système de grille====
=====Code de base=====
Voici un premier exemple pour définir deux colonnes de taille "moyenne" :
 
<source lang="HTML5">
<div class="container">
    <div class="row">
          <div class="col-md-6">...</div>
          <div class="col-md-6">...</div>
    </div>
</div>
</source>
 
Il faut d'abord créer un élément conteneur avec la class "container" ; ensuite, créer une ligne, avec la class "row" ; et enfin on peut insérer à l'intérieur de cette élément autant de colonnes souhaités, chacune avec la notation : col-{type de colonne}-{nombre de colonnes occupées}.
 
=====Différentes tailles des colonnes=====
Les différentes tailles des colonnes se réfèrent exclusivement à leur comportement par rapport à la taille de l'écran. La taille effective des colonnes (c'est-à-dire l'empan qu'elles occupent sur la page) dépend du nombre des colonnes de la grille sur lesquelles elles s'étalent.
 
Voici [http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/bootstrap/grid_system.html un exemple du comportement des différentes tailles des colonnes]. Changez la taille de votre fenêtre du navigateur pour voir les différents comportements.
 
====Comment choisir la taille des colonnes====
Le choix de la taille des colonnes peut se faire sur la base de différents critères, même assez complexes. Pour des applications plutôt simples on peut utiliser des critères simplifiés :
 
* S'il est important que deux colonnes s'affichent l'une à côté de l'autre, par exemple dans le cas d'une application drag and drop qui permet de traîner des éléments d'une colonne gauche à une colonne droite, choisir une taille pour dispositifs très petit (xs) ou petit (sm), de cette manière les colonnes resterons côte à côte même si la taille de la fenêtre est petite
* S'il est important que le contenu de la colonne ne rétrécit pas trop, par exemple dans le cas d'une image, utiliser plutôt des colonnes moyennes (md) ou grandes (lg)
 
===Montrer/Cacher sur la base de la taille de l'écran===
Bootstrap met également à disposition des classes pour montrer ou cacher du contenu sur la base de la taille de l'écran du dispositif utilisé. Contrairement au système de grille, dans lequel le contenu s'adapte à l'écran, dans ce cas le contenu s'affiche ou ne s'affiche pas. Le tableau suivant, tiré du site officiel, montre les classes et leur comportement selon la taille du dispositif.
 
[[Fichier:Bootstrap show hide.jpg|frame|none|Classes CSS pour montrer ou cacher des éléments selon la taille de l'écran (source: site officiel)]]
 
==Composants du framework==
Le framework met à disposition plusieurs éléments qu'on peut insérer dans trois catégories :
 
* '''CSS''' : éléments HTML utilisés souvent dans des pages web qui disposent déjà de propriétés de style préétablies (e.g. formulaires, tableaux, etc.)
* '''Composants''' : combinaisons d'éléments HTML pour former des éléments fonctionnels dans une page (e.g. menu de navigation, alertes, etc.)
* '''JavaScript''' : éléments qui ajoute des comportements dynamiques à la page (e.g. carrousels d'images, menu déroulants, etc.)
 
Le site officiel propose des instructions et des exemples utiles pour chaque composants disponible à travers le framework. Par la suite, les composantes principales seront illustrées avec une brève description de leur utilité et le lien à la documentation officielle.
 
===CSS===
Bootstrap propose des styles préétablis pour les éléments HTML dont l'utilité principale et de proposer du contenu textuel (ou images). Voici une liste non exhaustive :
 
* [http://getbootstrap.com/css/#type Élements textuels] : Bootstrap met à disposition des styles pour la plupart des éléments textuels (titre, paragraphes, liste à pouces, citations, etc.).
* [http://getbootstrap.com/css/#code Code] : mise en evidence de code, particulièrement utile dans les pages techniques (le résultat est similaire à ce wiki)
* [http://getbootstrap.com/css/#tables Tableaux] : si on ajoute la classe "table" à la balise <code>table</code> on peut utiliser un style des tableaux préétabli. On peut ajouter la classe "table-striped" pour créer des lignes avec une couleur de fond alternée. La classe "table-bordered" ajoute par contre les bords aux cellules
* [http://getbootstrap.com/css/#forms Formulaires] : les formulaires sont automatiquement stylés mais d'autres options sont disponibles, telle que l'option "form-inline" à attribuer à la balise <code>form</code> pour que les champs s'affichent côté à côté (utile par exemple dans un formulaire de login)
* [http://getbootstrap.com/css/#buttons Boutons] : en associant la classe "btn" aux balises <code>a</code> ou <code>button</code> on obtient des boutons stylés. On peut ajouter ensuite l'une de ces classes - btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger, btn-link - pour changer la couleur du bouton. La taille du bouton peut être également changée grâce aux classes btn-xs, btn-sm ou btn-lg.
* [http://getbootstrap.com/css/#images Images] : si on ajoute la classe img-responsive à une image, elle va s'adapter automatiquement à la taille de l'élément qui la contient
 
===Composants===
Bootstrap propose des éléments qui peuvent être associés à d'autres éléments HTML5 afin de créer des combinaisons fonctionnelles. Voici une liste non exhaustive :
 
* [http://getbootstrap.com/components/#glyphicons Icônes] : sans utiliser une série d'images, mais grâce à une police spéciale, Bootstrap met à disposition un set d'icônes qui peuvent être insérées à l'intérieur d'autres éléments (paragraphes, titres, boutons, etc.). Pour ce faire, il suffit d'utiliser la balise <code>span</code> avec la classe "glyphicon" à laquelle on ajoute une classe spécifique pour l'icône. Par exemple pour obtenir l'icône d'une étoile on utilise le code
 
<source lang="HTML5">
<span class="glyphicon glyphicon-star"></span>
</source>
 
* [http://getbootstrap.com/components/#navbar Barre de navigation] : des menus de navigation principale peuvent être ajouté à différents endroits de la page et même être fixé en haut ou en bas de la fenêtre afin qu'ils soient toujours visibles. De plus, les barres de navigation peuvent être facilement configurées pour qu'elles s'adaptent à l'écran des dispositifs mobiles.
* [http://getbootstrap.com/components/#jumbotron Jumbotron] : élément utile pour afficher du contenu important de la page. À son intérieur on peut ajouter un titre, un ou plusieurs paragraphes, des boutons, etc.
* [http://getbootstrap.com/components/#alerts Alertes] : messages contextuels qui permettent de fournir aux utilisateurs un feedback sur les actions entreprises ou à entreprendre
* [http://getbootstrap.com/components/#panels Panneaux] : éléments qui permettent d'entourer le contenu dans une "boîte" à la quelle on peut ajouter une entête et/ou un footer
 
===JavaScript===
Grâce à une extension de la bibliothèque [[jQuery]], Bootstrap met à disposition des développeurs quelques fonctionnalités dynamiques qui permettent une certaine interaction avec les composants du framework. Voici une liste non exhaustive :
 
* [http://getbootstrap.com/javascript/#modals Fenêtres modales] : au lieu d'une nouvelle fenêtre popup du navigateur, on peut créer des messages qui se superposent sur le contenu de la page. Ces fenêtres peuvent être fermées facilement à l'aide de boutons.
* [http://getbootstrap.com/javascript/#dropdowns Menu déroulants] : on peut créer des menus à plusieurs niveaux grâce au mécanisme de déroulement. Ces menus peuvent être même intégrés dans les barres de navigation (voir plus haut dans la page)
* [http://getbootstrap.com/javascript/#tabs Tabs] : éléments qui permettent d'afficher et regrouper beaucoup de contenu dans un espace réduit de la page grâce à une division en "fiches" dont seulement une est affichées à la fois.
* [http://getbootstrap.com/javascript/#tooltips Info-bulle] : mécanisme qui permet d'améliorer les informations contextuelles disponibles lorsqu'on laisse le curseur de la souris sur un élément
* [http://getbootstrap.com/javascript/#carousel Carrousel] : slideshow de contenu (texte et/ou images) qui défile à l'écran de manière régulière et rythmée, particulièrement utile pour la présentation de contenu spécial
 
À noter que souvent pour utiliser les comportements dynamiques il n'est pas nécessaire d'insérer du code JavaScript dans la page, mais il suffit de bien utiliser des noms de classes ou d'attributs HTML. Bien entendu, le code JavaScript peut être utilisé pour personnaliser les comportements.
 
==Personnaliser Bootstrap==
La manière la plus simple pour personnaliser Bootstrap est l'utilisation d'une deuxième feuille de style qu'on ajoute à la feuille de style de base. De cette manière les définitions des éléments dans la feuille personnalisée vont remplacer les définitions contenues dans la feuille de style de base. Maintenir le CSS de base intact a plusieurs avantages :
 
* Le fichier s'étale sur des centaines de lignes de code, et sa modification peut donc être assez compliquée
* Il est très difficile de modifier un fichier "minified", on devrait donc modifier - et par conséquent inclure - le fichier normal
* Si une nouvelle version du framework est disponible, il faudra tout simplement remplacer le fichier sans perdre les définitions qui se trouvent dans le fichier personnel
* Dans la feuille de style personnelle on peut également ajouter d'autres propriétés qui ne concernent pas les éléments du framework
 
Il est également possible d'insérer vos nouvelles propriétés de style à travers la balise <style> directement dans le <head> de votre page.
 
===Démarche à suivre===
D'abord il faut créer une feuille de style, c'est-à-dire un fichier avec extension .css. Si vous avez téléchargé les fichiers du framework, il est bien de placer ce fichier dans le même dossier css/ du fichier de base bootstrap.min.css. Vous pouvez appeler votre nouveau fichier comme vous voulez, pour cette démarche on l'appelra perso.css.
 
Ensuite, vous devez ajouter à l'intérieur de la balise head de votre page le lien à cette deuxième feuille de style. Il faut que le lien soit inséré après le fichier bootstrap.min.css, autrement les définitions personnalisées ne seront pas prise en compte. Il faudra donc avoir ce code :
 
<source lang="HTML5">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/perso.css" rel="stylesheet">
</source>
 
À ce point il vous suffit de déclarer à l'intérieur du fichier perso.css vos propres définitions de style pour qu'elles soient appliquées aux éléments de base du framework. Pour ce faire vous avez le choix :
 
* Vous pouvez remplacer les propriétés de style des éléments eux-mêmes, c'est-à-dire que chaque fois que vous allez utiliser cet élément il aura les nouvelles propriétés
* Vous pouvez définir des nouvelles classes qui vont être ajoutées à l'élément particulier afin que seulement celui-là aura des propriétés différentes, mais si vous utilisez l'élément de base sans la classe supplémentaire, il apparaitra normalement
 
Pour savoir quelles sont les caractéristiques de chaque élément de base du framework il est bien de consulter la version "normal" du fichier bootstrap.css. Il est utile à ce propos de disposer d'un éditeur de texte qui permet de chercher à l'intérieur du code afin de rendre le processus plus vite.
 
Dans le fichier perso.css vous ne devez pas copier toutes les propriétés de base des éléments, mais seulement les propriétés que vous désirez remplacer. Toute propriété qui ne sera pas définie dans le fichier perso.css apparaitra telle qu'elle est définie dans le fichier bootstrap.css. En d'autres termes si l'élément qui vous intéresse a une couleur de fond rouge et le texte blanc, si vous déclarez seulement la couleur de fond en bleu, la couleur du texte sera encore blanc.
 
===Exemple de personnalisation===
====Personnaliser le jumbotron====
Les propriétés CSS de l'élément jumbotron, tiré du fichier bootstrap.css, les suivantes:
 
<source lang="CSS">
.jumbotron {
  padding: 30px;
  margin-bottom: 30px;
  color: inherit;
  background-color: #eee;
}
.jumbotron h1,
.jumbotron .h1 {
  color: inherit;
}
.jumbotron p {
  margin-bottom: 15px;
  font-size: 21px;
  font-weight: 200;
}
</source>
 
Voici le résultat en image :
 
[[Fichier:Bootstrap jumbotron normal.jpg|800px|thumb|none|Style du jumbotron normal]]
 
Nous allons maintenant apporter quelques modifications à notre code personnalisé qui devra être ajouté à votre fichier CSS perso.css :
 
<source lang="CSS">
.jumbotron {
    color: #FFF;
    background-color: #000;
}
.jumbotron h1,
.jumbotron .h1 {
    color: #FF0;
}
</source>
 
Voici le résultat :
 
[[Fichier:Bootstrap jumbotron custom.jpg|800px|thumb|none|Style du jumbotron personnalisé]]
 
===Thèmes Bootstrap===
Il est également possible de trouver des thèmes déjà prêts. Dans ce cas il suffit d'ajouter le fichier .css du thème à votre page. Voici quelques ressources qui proposent des thèmes gratuits (il existe aussi des thèmes payants) :
 
* [http://bootswatch.com/ Bootswatch]
* [http://startbootstrap.com/ Start Bootstrap]
* [http://bootstrapzero.com/ Bootstrap Zero]
 
==Documentation==
===Site officiel en anglais===
Le [http://getbootstrap.com/ site officiel de Bootstrap] offre des explications détaillées sur le fonctionnement du framework et propose des références approfondies pour les différents éléments disponibles. Voici une description des pages principales avec le contenu :
 
* [http://getbootstrap.com/getting-started/ Getting started] : informations utiles pour installer le framework, modèle de base, exemples de pages, informations sur la compatibilité, et autre.
* [http://getbootstrap.com/css/ CSS] : illustration des principaux éléments statiques du framework tels que le système de grille, les tableaux, les boutons, les images, et autre.
* [http://getbootstrap.com/components/ Composants] : les Composants sont des "groupes fonctionnels d'unités du framework qui permettent une certaine fonction, comme par exemples les menus déroulants, les barres de navigation, les alertes, et autre.
* [http://getbootstrap.com/javascript/ JavaScript] : informations sur les éléments dynamiques disponible à travers le fichier .js tels que les carrousels, les tab, les fenêtre modales, et d'autre.
* [http://getbootstrap.com/customize/ Customize] : permet de créer une version personnalisée de Bootstrap (voir installation plus haut dans cette page)
* [http://expo.getbootstrap.com/ Exposition] : exemples de sites développés avec Bootstrap
* [http://blog.getbootstrap.com/ Blog] : informations sur le framework telles que nouvelles versions, et autre.
 
===Traduction en français du site officiel===
Une [http://www.oneskyapp.com/fr/docs/bootstrap traduction en français du site officiel] est également disponible. Si bien que ce lien soit présent aussi dans le site officiel, il est spécifié qu'il ne s'agit pas d'une traduction officielle et que les informations pourraient ne pas être mise à jour. Il est bien de se référer plutôt au site officiel.
 
==Alternatives==
Liste de framework front-end avec un fonctionnement similaire à celui de Bootstrap :
 
* [http://foundation.zurb.com/ Foundation]
* [http://gumbyframework.com Gumby]
* [http://www.yaml.de YAML4]
* [http://tuktuk.tapquo.com TukTuk]
 
==Liens==
 
* [http://www.w3schools.com/bootstrap/default.asp Tutoriel Bootstrap sur W3Schools] (en anglais)
 
[[Category: JavaScript]]

Dernière version du 6 février 2023 à 17:16

Introduction

Bootstrap est un framework front-end (HTML5, CSS et JavaScript) spécialement conçu pour le développement d'application web "responsive", c'est-à-dire qui s'adaptent automatiquement à différents dispositifs et tailles d'écran (desktop, tablettes, smartphones, ...).

Les avantages principaux de Bootstrap sont :

  • Facilité et vitesse de développement : les éléments mis à disposition par Bootstrap permettent de créer en peu de temps des pages avec un layout soigné et moderne ;
  • Facilité d'installation : Bootstrap se compose seulement de deux fichiers à inclure dans le code d'une page HTML.
  • Composants disponibles "out of the box" : les éléments qu'on retrouve plus fréquemment dans une page (e.g. menu de navigation, boutons, etc.) sont déjà disponibles et facilement adaptables.
  • Design "responsive" : la structure de la page s'adapte automatiquement à différents dispositifs et tailles d'écran.

Pour utiliser Bootstrap une connaissance de base de HTML5 et CSS est suffisante. Une connaissance de base de JavaScript serait également utile pour exploiter toutes les caractéristiques du framework. Parmi les caractéristiques les plus importantes, on trouve :

  • Reset du code CSS : toutes les propriétés de style déjà prévues dans les navigateurs sont annulées, permettant ainsi de garantir la compatibilité et l'homogénéité entre les navigateurs.
  • Structure de la page : on peut créer facilement des mises en page modulaires, grâce notamment à un système de division de la page en grille.
  • Composants d'interface graphique : disponible "out of the box", ces éléments comprennent des menus de navigation, des fenêtres modales, des formulaires, des tableaux, etc.
  • Éléments dynamiques : possibilité d'intégrer facilement des éléments dynamiques, comme des carrousels d'images, des onglets, des alertes, etc.

Cadre d'utilisation

Grâce à sa modularité et sa flexibilité, Bootstrap peut être utilisé dans différentes situations. Il permet d'afficher des informations de manière structurée et sans trop d'effort, mais en même temps, il peut représenter la base pour la construction d'une interface complexe. Voici quelques exemples d'utilisation possibles :

  • Page ou site personnels
  • Page ou site de présentation d'un cours ou d'un projet de recherche
  • Page "conteneur" d'un jeu HTML5 ou Flash
  • Interface graphique d'une application web
  • Base pour un thème d'un CMS (il y a plusieurs thèmes pour WordPress basés sur Bootstrap par exemple)
  • Etc.

Versions

Les versions les plus utilisées à présent (septembre 2022) de Bootstrap sont les versions :

Liens externes

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=Bootstrap&oldid=169618 »