Articles pour la catégorie Bootstrap
Bootstrap 4 : le Scrollspy
Ce plugin permet de relier automatiquement des éléments de navigation avec des zones HTML en utilisant un défilement. Pour information "spy" signifie espionnage, autrement dit on va espionner le défilement de la page pour le synchroniser avec la navigation.
Le...
bestmomo
19 avril 2018
Bootstrap 4 : info-bulles (Tooltips) et Popovers
Une info-bulle (Tooltip) est une information textuelle sommaire qui apparaît dans une bulle lorsqu'on survole ou clique un élément de la page. Un Popover peut être considéré comme une grosse info-bulle avec plus de possibilités. Ces deux plugins font appel...
bestmomo
19 avril 2018
Bootstrap 4 : caroussel (Carousel)
Un carrousel permet de faire défiler automatiquement ou manuellement des images à la manière d'un diaporama. La transition des images peut se faire par substitution ou par translation. Dans ce chapitre nous allons voir comment mettre en œuvre celui proposé...
bestmomo
18 avril 2018
Bootstrap 4 : les onglets (Tab)
On a vu ce que nous propose Bootstrap pour la navigation. Dans ce chapitre nous allons utiliser les classes de bases déjà vues en ajoutant de l'interactivité pour créer des onglets.
Le principe
Ce plugin nécessite 2 groupes éléments :...
bestmomo
16 avril 2018
Bootstrap 4 : les boutons
On a déjà vu qu'on peut avec quelques classes régler facilement l'aspect des boutons et leur disposition. Dans ce chapitre nous allons voir comment les rendre visuellement dépendants d'un état.
Boutons bascule, "checkbox" et "radio"
Bouton bascule
On a parfois...
bestmomo
16 avril 2018
Bootstrap 4 : fenêtre modale (Modal)
Une fenêtre modale apparaît au-dessus de la page et est en général utilisée comme une boîte de dialogue avec l'utilisateur. Elle comporte généralement un formulaire. Nous allons voir dans ce chapitre comment créer et paramétrer une fenêtre modale.
Le principe...
bestmomo
15 avril 2018
Bootstrap 4 : effet accordéon (Collapse)
L'effet accordéon est très proche du menu déroulant. Dans les deux plugins on a un déclencheur et un élément qui apparaît ou disparaît. Mais le présent plugin est plus adapté pour afficher des contenus variés alors que le précédent est...
bestmomo
14 avril 2018
Bootstrap 4 : menu déroulant (Dropdown)
Le plugin jQuery Dropdown permet de faire de jolis menus déroulants. Nous allons voir comment le mettre en œuvre dans ce chapitre.
Ce plugin nécessite la librairie popper.js, vous devez donc l'ajouter ou utiliser la version bundle de Bootstrap.
Le...
bestmomo
14 avril 2018
Bootstrap 4 : les plugins JQuery, introduction
JQuery est un framework Javascript devenu incontournable au fil des années. Les créateurs de Bootstrap l'ont choisi pour offrir des plugins esthétiques et faciles à mettre en œuvre, dans la plupart des cas sans même mettre les doigts dans du...
bestmomo
14 avril 2018
Bootstrap 4 : cartes et médias
Dans ce chapitre nous allons voir le nouveau composant Card qui remplace les composants panel, well et thumbnails de Bootstrap 3, et aussi l'objet média. La page d'exemple est la même que celle vue au chapitre précédent.
Les cartes (Cards)...
bestmomo
12 avril 2018
Bootstrap 4 : étiquettes et listes groupées
Dans ce chapitre nous allons voir les étiquettes (badges) et les listes groupées.
Voici la page d'exemple agrémentée de nouveaux éléments dont je vais parler dans ce chapitre et le suivant :
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta...
bestmomo
12 avril 2018
Boostrap 4 : alertes et barres de progression
Nous allons voir maintenant deux composants qui, bien que ne nécessitant pas de Javascript pour leur présentation, en ont besoin pour leur mise en œuvre.
Alertes
Utilisation de base
Les alertes permettent de présenter un message visuellement significatif. Il suffit...
bestmomo
12 avril 2018