SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
RESPONSIVE DESIGN
TWITTER BOOSTRAP
Jean-Noël Aubry
@jnaubry
Concepts
=> Responsive Design
=> Frameworks
=> Open Source
Etat actuel du web
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).
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
Les grilles
Les grilles
Les grilles
Fonctionnement du système de grille
12 colonnes
Images redimensionnables
img {
max-width: 100%;height: auto;}
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
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
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.)
Framework
• Documentation très fournie
• Maintenu régulièrement par la communauté et les créateurs
du framework
• Open Source (gratuit)
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
Twitter Bootstrap
• Créée par :
Twitter Bootstrap : Pourquoi ?
• Raison #1 : nombreuses fonctionnalités
Twitter Bootstrap : Pourquoi ?
• Raison #2 : support de nombreux navigateurs
Twitter Bootstrap : Pourquoi ?
• Raison #3 : jeu d’icônes Glyph
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/
Twitter Bootstrap : Pourquoi ?
• Raison #5 : Les composants
 Les boutons
 Les onglets
 La navigation (breadcrumb)
 La pagination
 Les notifications
 La barre de progression
Twitter Bootstrap : Pourquoi ?
• Raison #6 : Javascript/jQuery
Twitter Bootstrap : Pourquoi ?
• Raison #7 : Personnalisation
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 :
Ressources
• http://bootswatch.com/
• https://startbootstrap.com/
• http://bootsnipp.com/
• http://bootstrapbay.com/
Merci !
• Jean-Noël Aubry
• @jnaubry
• https://www.linkedin.com/in/jnaubry

Contenu connexe

En vedette

Sg Software Guru Inicio
Sg Software Guru   InicioSg Software Guru   Inicio
Sg Software Guru InicioJaime Olmos
 
Startup Europe Week - launch event presentation (Igor Tasic)
Startup Europe Week - launch event presentation (Igor Tasic)Startup Europe Week - launch event presentation (Igor Tasic)
Startup Europe Week - launch event presentation (Igor Tasic)Igor Tasic
 
Teoría de muestreo de aceptación..,
Teoría de muestreo de aceptación..,Teoría de muestreo de aceptación..,
Teoría de muestreo de aceptación..,Paola Contreras
 
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...和人 青木
 
Presentaciones octubre 2016_marzo_2017(1)(1)
Presentaciones octubre 2016_marzo_2017(1)(1)Presentaciones octubre 2016_marzo_2017(1)(1)
Presentaciones octubre 2016_marzo_2017(1)(1)Viviana Ramirez
 
La Experiencia del Candidato - Hugo Hernández - Don Chambitas
La Experiencia del Candidato - Hugo Hernández - Don ChambitasLa Experiencia del Candidato - Hugo Hernández - Don Chambitas
La Experiencia del Candidato - Hugo Hernández - Don ChambitasSoftware Guru
 
How to build a strong brand on linkedin
How to build a strong brand on linkedinHow to build a strong brand on linkedin
How to build a strong brand on linkedinPearl Omotoyinbo
 
ISA11 - Brian Rink - Designing with elephants
ISA11 - Brian Rink - Designing with elephantsISA11 - Brian Rink - Designing with elephants
ISA11 - Brian Rink - Designing with elephantsInteraction South America
 
My self-introduction
My self-introductionMy self-introduction
My self-introductionLyla Chen
 
Small Cell State of the Nation 2017
Small Cell State of the Nation 2017Small Cell State of the Nation 2017
Small Cell State of the Nation 2017David Chambers
 
CGI Perlでわかる!サーバレス
CGI Perlでわかる!サーバレスCGI Perlでわかる!サーバレス
CGI Perlでわかる!サーバレスTatsuro Hisamori
 
Projetando interfaces imersivas
Projetando interfaces imersivasProjetando interfaces imersivas
Projetando interfaces imersivasBruno Castro
 
Defender los derechos.
Defender los derechos.Defender los derechos.
Defender los derechos.José María
 
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...Small Cell Forum
 
Análise econômico financeira de uma organização
Análise econômico financeira de uma organizaçãoAnálise econômico financeira de uma organização
Análise econômico financeira de uma organizaçãoPaulo Henrique Silva
 

En vedette (20)

Sg Software Guru Inicio
Sg Software Guru   InicioSg Software Guru   Inicio
Sg Software Guru Inicio
 
Startup Europe Week - launch event presentation (Igor Tasic)
Startup Europe Week - launch event presentation (Igor Tasic)Startup Europe Week - launch event presentation (Igor Tasic)
Startup Europe Week - launch event presentation (Igor Tasic)
 
Teoría de muestreo de aceptación..,
Teoría de muestreo de aceptación..,Teoría de muestreo de aceptación..,
Teoría de muestreo de aceptación..,
 
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...
インターナショナルオープンデータデイ 2016 in 京都が行われました! International Open Data Day 2016 in Kyo...
 
Presentaciones octubre 2016_marzo_2017(1)(1)
Presentaciones octubre 2016_marzo_2017(1)(1)Presentaciones octubre 2016_marzo_2017(1)(1)
Presentaciones octubre 2016_marzo_2017(1)(1)
 
March.2017 classes
March.2017 classes   March.2017 classes
March.2017 classes
 
Introduction to-cfd
Introduction to-cfdIntroduction to-cfd
Introduction to-cfd
 
La Experiencia del Candidato - Hugo Hernández - Don Chambitas
La Experiencia del Candidato - Hugo Hernández - Don ChambitasLa Experiencia del Candidato - Hugo Hernández - Don Chambitas
La Experiencia del Candidato - Hugo Hernández - Don Chambitas
 
How to build a strong brand on linkedin
How to build a strong brand on linkedinHow to build a strong brand on linkedin
How to build a strong brand on linkedin
 
Presentazione Savino Università Bocconi
Presentazione Savino Università BocconiPresentazione Savino Università Bocconi
Presentazione Savino Università Bocconi
 
ISA11 - Mike Kruzeniski - Mobile Now
 ISA11 - Mike Kruzeniski - Mobile Now ISA11 - Mike Kruzeniski - Mobile Now
ISA11 - Mike Kruzeniski - Mobile Now
 
ISA11 - Brian Rink - Designing with elephants
ISA11 - Brian Rink - Designing with elephantsISA11 - Brian Rink - Designing with elephants
ISA11 - Brian Rink - Designing with elephants
 
My self-introduction
My self-introductionMy self-introduction
My self-introduction
 
Small Cell State of the Nation 2017
Small Cell State of the Nation 2017Small Cell State of the Nation 2017
Small Cell State of the Nation 2017
 
CGI Perlでわかる!サーバレス
CGI Perlでわかる!サーバレスCGI Perlでわかる!サーバレス
CGI Perlでわかる!サーバレス
 
Projetando interfaces imersivas
Projetando interfaces imersivasProjetando interfaces imersivas
Projetando interfaces imersivas
 
Defender los derechos.
Defender los derechos.Defender los derechos.
Defender los derechos.
 
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...
Looking under the hood of various RAN Access Deployment Technologies: 4G, LTE...
 
Bootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress MeetupBootstrap 3 Basic - Bangkok WordPress Meetup
Bootstrap 3 Basic - Bangkok WordPress Meetup
 
Análise econômico financeira de uma organização
Análise econômico financeira de uma organizaçãoAnálise econômico financeira de uma organização
Análise econômico financeira de uma organização
 

Similaire à Responsive design - Twitter Bootstrap [FR]

Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Chamseddine Ouerhani
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxyassinesouli2
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptMicrosoft
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...ENSIBS
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetupAspectize
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)Alphorm
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Inteldavrous
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartLa FeWeb
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Microsoft Technet France
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !davrous
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webAcquia
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologiewyggio
 
Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Cyril Reinhard
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Julien LE THUAUT
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...Samuel Lévesque
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Peak Ace
 

Similaire à Responsive design - Twitter Bootstrap [FR] (20)

Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)Programmer en html5, css 3 et java script (70 480)
Programmer en html5, css 3 et java script (70 480)
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Introduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascriptIntroduction au développement windows 8 modern ui avec html5 et javascript
Introduction au développement windows 8 modern ui avec html5 et javascript
 
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScriptIntroduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
Introduction au développement Windows 8 ModernUI avec HTML5 et JavaScript
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
Aspectize meetup
Aspectize meetupAspectize meetup
Aspectize meetup
 
Nouveaux apis
Nouveaux apisNouveaux apis
Nouveaux apis
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
 
Webinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft IntelWebinar HTML5 Microsoft Intel
Webinar HTML5 Microsoft Intel
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !Les dernières avancées HTML5 & CSS3 en action !
Les dernières avancées HTML5 & CSS3 en action !
 
Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !Les dernières avancées html5 & css3 en action !
Les dernières avancées html5 & css3 en action !
 
Arte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes webArte utilise Acquia Cloud pour héberger ses plateformes web
Arte utilise Acquia Cloud pour héberger ses plateformes web
 
Formation mobile-cross-platform
Formation mobile-cross-platformFormation mobile-cross-platform
Formation mobile-cross-platform
 
HTML5 W3C Conference Euratechnologie
HTML5 W3C Conference EuratechnologieHTML5 W3C Conference Euratechnologie
HTML5 W3C Conference Euratechnologie
 
Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013Acquia et Arte : Drupal Camp Paris 2013
Acquia et Arte : Drupal Camp Paris 2013
 
Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013Responsive Web Design - BreizhCamp 2013
Responsive Web Design - BreizhCamp 2013
 
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
Construisez votre intranet avec microsoft office 365 sans code   a os canadia...Construisez votre intranet avec microsoft office 365 sans code   a os canadia...
Construisez votre intranet avec microsoft office 365 sans code a os canadia...
 
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
Seo Camp'us 2018 - SEO & FRAMEWORK JAVASCRIPT - Philippe Yonnet - Directeur G...
 

Dernier

Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationTony Aubé
 
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfsnapierala
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalNicolas Georgeault
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...OCTO Technology
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudOCTO Technology
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...OCTO Technology
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...Faga1939
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAUGAIA
 

Dernier (8)

Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imagination
 
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdfEtude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
Etude_Bpifrance_-_Les_Greentech_francaises_-_3eme_edition_annuelle_2024.pdf
 
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - MontréalGUM365 - Rencontre mensuelle Avril 2024 - Montréal
GUM365 - Rencontre mensuelle Avril 2024 - Montréal
 
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
La Grosse Conf 2024 - Philippe Stepniewski -Atelier - Live coding d'une base ...
 
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloudLe Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
Le Comptoir OCTO - MLOps : Les patterns MLOps dans le cloud
 
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
La Grosse Conf 2024 - Philippe Prados - Atelier - RAG : au-delà de la démonst...
 
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
LA SUPERINTELLIGENCE ARTIFICIELLE, SES BÉNÉFICES ET NUIRES ET QUE FAIRE POUR ...
 
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IAMilo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
Milo-AI Milo AI Congress est conçu pour transformer votre compréhension de l'IA
 

Responsive design - Twitter Bootstrap [FR]

Notes de l'éditeur

  1. 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.
  2. Une version 16 colonnes existe et chaque colonne fait 40px de large. Tout le reste est inchangé.
  3. 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" />
  4. 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.
  5. Bootstrap donne vie à l’UI grâce aux plugins jQuery
  6. Bootstrap propose un outil de personnalisation en ligne qui permet de générer un CSS basé sur vos besoins spécifiques.