L’exercice présenté dans cet article consiste à créer un menu responsive pour un site fictif de galeries de photos, c’est-à-dire un menu dont la disposition va s’adapter en fonction de l’écran de chaque visiteur. Il est important de renseigner une balise meta name= »viewport » dans le Head ainsi qu’un label avec un élément input type= »checkbox » associé pour permettre de déplier et de…Continue reading Un menu responsive
Catégorie : CSS
Animation Sprite
La propriété CSS steps() est une fonction temporelle permettant de contrôler le déroulement d’une animation en la découpant en plusieurs étapes. Elle est efficace pour créer des animations basées sur un système de sprite. Le fonctionnement est le suivant : La propriété (animation: animation .9s steps(8) infinite, avance 5s linear infinite;) permet d’indiquer le nombre…Continue reading Animation Sprite
Les animations CSS
Les animations CSS sont un module CSS qui définit la façon dont les valeurs des propriétés CSS peuvent être animées au fur et à mesure d’une période via des étapes intermédiaires (keyframes en anglais). Le comportement de ces animations séquencées peut être défini en termes de durée, de nombre de répétitions et de la façon dont elles sont…Continue reading Les animations CSS
Les transitions CSS
Les transitions CSS permettent de contrôler la vitesse d’animation lorsque les propriétés CSS sont modifiées. Plutôt que le changement soit immédiat, on peut l’étaler sur une certaine période. Ainsi, si on souhaite passer un élément de blanc à noir, on pourra utiliser les transitions CSS afin que cette modification soit effectuée progressivement, selon une courbe d’accélération donnée.…Continue reading Les transitions CSS
Collection Bootstrap
I. Extraits de codes Bootstrap Une bibliothèque organisée d’extraits de code Bootstrap >> Start Bootstrap Snippets II. Templates Bootstrap Des templates Bootstrap gratuits qui constituent une mise en page idéale pour son prochain projet Web. >> ColorLib Templates >> Get.Bootstrap Custom Components >> Start Bootstrap Templates III. Thèmes Bootstrap Thèmes Bootstrap gratuits prêts à être…Continue reading Collection Bootstrap
Comment utiliser Font Awesome pour Bootstrap
Font Awesome est une police composée de symboles, d’icônes ou de pictogrammes que l’on peut utiliser dans une page Web, tout comme une police. Pour configurer la Font Awesome sur sa page web, inclure cette ligne dans le <head> : Comment ça marche ? Pour ajouter une icône à sa page Web, utiliser une simple balise…Continue reading Comment utiliser Font Awesome pour Bootstrap
Bootstrap – Les composants
Bootstrap propose des composants pratiques à mettre en œuvre : barres de navigation, effets typographiques, panneaux, boutons, etc. Boutons [button] Bootstrap comprend plusieurs styles de boutons prédéfinis, chacun servant son propre but sémantique, avec quelques extras ajoutés pour plus de contrôle. Barre de navigation [navbar] Les navbars Bootstrap sont des menus de navigation responsives, ils…Continue reading Bootstrap – Les composants
Bootstrap – Les contenus
Images Image responsive Les images dans Bootstrap sont réactives avec .img-fluid. max-width: 100%;et height: auto;sont appliqués à l’image pour qu’elle soit redimensionnée avec l’élément parent. Vignette d’image On peut utiliser .img-thumbnail pour donner à une image une apparence arrondie de bordure 1px.
Bootstrap – Les grilles
Le système de grille est le coeur de Bootstrap, qui considère qu’une ligne .row fait 12 colonnes. L’idée d’un responsive design est de dire que pour telle taille d’écran, un élément occupe X colonne(s). Bootstrap prend en charge 4 types de format : Très petit format < 768 pixels ( Smartphone ) Petit format ≥ 786 px & <…Continue reading Bootstrap – Les grilles
Bootstrap
Une définition de Wikipedia : Bootstrap est une collection d’outils utiles à la création du design (graphisme, animation et interactions avec la page dans le navigateur … etc. …) 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. Installation de Bootstrap L’installation…Continue reading Bootstrap