Responsive design - Twitter Bootstrap [FR]
•Télécharger en tant que PPTX, PDF•
2 j'aime•513 vues
Introduction et présentation du framework Bootstrap de Twitter
Recommandé
Contenu connexe
En vedette
En vedette (20)
Similaire à Responsive design - Twitter Bootstrap [FR]
Similaire à Responsive design - Twitter Bootstrap [FR] (20)
Responsive design - Twitter Bootstrap [FR]
- 1. RESPONSIVE DESIGN TWITTER BOOSTRAP Jean-Noël Aubry @jnaubry
- 2. Concepts => Responsive Design => Frameworks => Open Source
- 3. Etat actuel du web
- 4. Le responsive design, c’est quoi ? https://www.alsacreations.com/article/lire/1615-cest-quoi-le-responsive-web-design.html Le Responsive Web design est une approche de conception Web qui vise à l'élaboration de sites offrant une expérience de lecture et de navigation optimales pour l'utilisateur quelle que soit sa gamme d'appareil (téléphones mobiles, tablettes, liseuses, moniteurs d'ordinateur de bureau).
- 5. Eléments du Responsive Web Design (RWD) • Grille fluide • Images et médias flexibles • CSS3 Media Queries • Adaptations conditionnelles basées sur Javascript ou jQuery
- 6. Les grilles
- 7. Les grilles
- 8. Les grilles
- 9. Fonctionnement du système de grille
- 10. 12 colonnes
- 11. Images redimensionnables img { max-width: 100%;height: auto;}
- 12. Media Queries • Spécification CSS3 Media Queries qui définit les techniques l'application de feuilles de styles en fonction des périphériques consultation utilisés pour du HTML. • On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. • Devenu un standard en Juin 2012
- 13. Résolution Média Média Taille du layout Smartphones 480px et en dessous Tablettes en mode portrait 480px à 768px Tablettes en mode paysage 768px à 940px Défaut 940px et au dessus Ecrans larges 1210px et au dessus
- 14. Framework • Pré-requis : • Système de grille fluide • Redimensionnable • Qui offre plus qu’une grille (styles prédéfinis pour la typographie, les tableaux, les boutons, les barres de navigation, les éléments de formulaire, etc.)
- 15. Framework • Documentation très fournie • Maintenu régulièrement par la communauté et les créateurs du framework • Open Source (gratuit)
- 17. Twitter Bootstrap • Framework libre et gratuit pour le design de sites ou d’applications web • Basé sur HTML5, CSS et Javascript • Supporte tous les principaux navigateurs • 1ère release sur GitHub en Août 2011
- 18. Twitter Bootstrap • Créée par :
- 19. Twitter Bootstrap : Pourquoi ? • Raison #1 : nombreuses fonctionnalités
- 20. Twitter Bootstrap : Pourquoi ? • Raison #2 : support de nombreux navigateurs
- 21. Twitter Bootstrap : Pourquoi ? • Raison #3 : jeu d’icônes Glyph
- 22. Twitter Bootstrap : Pourquoi ? • Raison #4 : système de grille • Système de grille 960 http://960.gs/ • Blue Print CSS http://www.blueprintcss.org/ • Système Golden Grid http://goldengridsystem.com/
- 23. Twitter Bootstrap : Pourquoi ? • Raison #5 : Les composants Les boutons Les onglets La navigation (breadcrumb) La pagination Les notifications La barre de progression
- 24. Twitter Bootstrap : Pourquoi ? • Raison #6 : Javascript/jQuery
- 25. Twitter Bootstrap : Pourquoi ? • Raison #7 : Personnalisation
- 26. Twitter Bootstrap : Comment ? • Télécharger Bootstrap et un éditeur de texte (Sublime, Notepad++) • Installer l’éditeur de texte • Extraire les fichiers Bootstrap dans un répertoire de votre projet • Créer un fichier exemple et intégrer le framework :
- 27. Ressources • http://bootswatch.com/ • https://startbootstrap.com/ • http://bootsnipp.com/ • http://bootstrapbay.com/
- 28. Merci ! • Jean-Noël Aubry • @jnaubry • https://www.linkedin.com/in/jnaubry
Notes de l'éditeur
- Une grille fluide, où les largeurs des éléments de structure sont débarrassées des unités de pixels Des images, des médias et des contenus flexibles leur permettant de ne pas "déborder de leur parent" lorsque celui-ci se restreint Une adaptation de l'affichage au Viewport du terminal Des CSS3 Media Queries permettant d'appliquer différentes règles de styles CSS selon la taille, l'orientation ou le ratio du device Éventuellement des adaptations conditionnelles (menu de navigation) côté client, basées sur JavaScript ou jQuery Une philosophie "Mobile First" et "Enrichissement progressif" facilitant l'accessibilité, la compatibilité et la performance des pages produites De plus en plus souvent de parties détectées et générées côté serveur (RESS), là aussi notamment pour accélérer l'affichage de certains composants ou ressources.
- Une version 16 colonnes existe et chaque colonne fait 40px de large. Tout le reste est inchangé.
- Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. C'est ainsi que l'on a pu associer des règles CSS complémentaires pour l'impression, modifiant la mise en page, favorisant tel élément ou faisant disparaître un autre inutile à la sortie sur papier, par exemple un menu de navigation. La balise <link> est alors dupliquée pour autant de feuilles de style que nécessaire, et comporte un attribut media précisant le contexte dans lequel les styles doivent être appliqués : <!doctype html> <head> <meta charset="utf-8"> <title>Media Queries !</title> <link rel="stylesheet" media="screen" href="screen.css" type="text/css" /> <link rel="stylesheet" media="print" href="print.css" type="text/css" /> </head> <body> ... </body> L'attribut media peut prendre (depuis CSS2) les valeurs suivantes : Screen Écrans Handheld Périphériques mobiles ou de petite taille Print Impression aural (CSS 2.0) / speech (CSS 2.1) Synthèses vocales Braille Plages braille Embossed Imprimantes braille Projection Projecteurs (ou présentations avec slides) Tty Terminal/police à pas fixe Tv Téléviseur All Tous les précédents Ces directives peuvent parfaitement être intégrées au sein même d'une feuille de style grâce à une règle @media suivie directement du type. La philosophie des Media Queries (ou requêtes de media) en CSS3 est d'offrir un panel de critères plus vaste et plus précis, à l'aide de propriétés et de valeurs numériques, ainsi que de combinaisons multiples de ces mêmes critères. Le but est de cibler plus finement les périphériques de destination en fonction de leurs capacités intrinsèques. L'écriture de ces requêtes est relativement explicite (en anglais) : une media query est une expression dont la valeur est toujours vraie ou fausse. Il suffit d'associer les différentes déclarations possibles avec un opérateur logique pour définir l'ensemble des conditions à réunir pour l'application des styles compris dans le bloc adjacent. Les opérateurs logiques peuvent être : and "et", only "uniquement" not "non". Exemple : <link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />
- Bootstrap utilise un système de grille sur 12 colonnes Qu’est ce qu’un système de grille ? C’est un système qui permet d’avoir des fondations solides pour construire sa web app ou son site web. Si vous voulez une web application avec un barre de navigation à gauche vous pouvez utiliser l’exemple à la ligne 3 dans l’image ci-dessus. Si vous ne voulez pas de barre de navigation et que vous souhaitez que votre contenu prenne toute la largeur de la page vous pouvez utiliser l’exemple à la ligne 5 dans l’image ci-dessus. Ce système de grille a été rendu populaire par 960 grid system et Blue Print css.
- Bootstrap donne vie à l’UI grâce aux plugins jQuery
- Bootstrap propose un outil de personnalisation en ligne qui permet de générer un CSS basé sur vos besoins spécifiques.