Responsive Web Design - e-Syllabus HTML5 et CSS3

Media queries :

CSS3 apporte donc un mécanisme capable de cibler un média précis et d'adapter les styles en conséquence. On parle de Responsive Web Design autrement dit un design qui s'adapte au type de média.

En résumé, les Media Queries sont les éléments fondamentaux du CSS et jouent un rôle crucial dans la conception web moderne en permettant d'ajuster dynamiquement le style des pages en fonction des caractéristiques des appareils utilises. Avec la prolifération des écrans variés, tels que ceux des ordinateurs, tablettes et smartphones, le Responsive Web Design (RWD) est devenu indispensable.

Les Media Queries agissent comme des gardiens vigilants, ciblant spécifiquement des types de médias et offrant la possibilité d'adapter les styles en conséquence. Analysons l'exemple ci-dessous :

@media screen and (max-height: 500px) {
    header {
        display: none;
    }
}

Dans cet exemple, nous voyons que nous ciblons les média de type screen à savoir les écrans d'ordinateurs, les tablettes, smartphones et nous regardons si la hauteur du navigateur est inférieure à 500 pixels. Dans ce cas, le header disparaît, illustrant ainsi la puissance et la flexibilité des Media Queries. Cet exemple est implémenté dans ce syllabus, essayez de réduire la hauteur de la fenêtre de votre navigateur pour vous en rendre compte.

Voici les différents mots-clés media disponibles et leur signification. Il s'agit des plus courants.

braille :: Terminal braille
print :: Imprimante.
projection :: Data-projecteur.
screen :: Écran d'ordinateur, tablette, smartphone.

Et voici les différentes propriétés qui peuvent être testées.

min-width :: Lageur du navigateur > N pixels.
max-width :: Largeur du navigateue < N pixels.
min-height :: Hauteur du navigateur > N pixels.
max-height :: Hauteur du navigateur < N pixels.
orientation: portrait | paysage :: Écran en mode portrait ou paysage.

Expérimentez cet exemple en redimensionnant la fenêtre de votre navigateur pour observer les changements en temps réel. Cette capacité à réagir aux dimensions de l'écran garantit une expérience utilisateur optimale, indépendamment du dispositif utilisé. Les Media Queries, en somme, sont l'uoutil essentiel pour concevoir des interfaces web asdaptatives et harmonieuses sur une variété de supports.

Pour cette partie, vous devez être capable de réaliser un petit media query (similaire à l'exemple ci-dessus).

Framework CSS :

Introduction :

L'univers du développement web est constamment en évolution, et avec la montée en puissance du Responsive Web Design (RWD), la complexité de la gestion du CSS a augmenté de manière significative.

Grâce aux Media Queries, nous pouvons réaliser des sites Responsive.. Cependant, l'effort requis pour mettre en place ces Media Queries peut s'avérer conséquent pour les développeurs. C'est là qu'intervient le concept de "Framework CSS", une solution structurée et préconçue pour faciliter le processus de conception et de stylisation des pages web.

Lors de la création d'un site Web, vous avez sans doute également remarqué que la tâche la plus consommatrice est le CSS. En effet, le positionnement n'est pas aisé et les tests sont obligatoires pour s'assurer du résultat final et ceci sur plusieurs navigateurs.

C'est pourquoi différents frameworks CSS ont vu le jour dans le but de diminuer la charge de cette tâche pour le développeur.

Un framework est un terme courant en informatique.

Ce mot désigne un ensemble d'outils et de composants logiciels structurés. On parle de bibliothèque logicielle.

Ces frameworks ont pour but de faciliter le travail du développeur.

Bootstrap :

Un des frameworks CSS les plus renommés est Bootstrap. Il a été conçu par les développeurs de Twitter et est rapidement devenu le framework CSS le plus utilisé en raison de sa robustesse et de sa polyvalence.

Vous pouvez trouver toutes les informations nécessaires pour l'utiliser dans la documentation de Bootstrap.

Voici les éléments principaux qui composent Bootstrap :

Mise en page (positionnement) en utilisant une grille de 12 colonnes et en offrant une flexibilité de conception les différentes tailles d'écrans.
Rendre automatiquement votre site Responsive, c'est-à-dire que votre site s'ajuste automatiquement à diverses résolutions d'écran. Ça simplifie ainsi le processus de création de sites web adaptatifs.
Garantir la compatibilité de votre site sur plusieurs navigateurs.
Fournir un ensemble de classes CSS prêtes à l'emploi pour faciliter et embellir votre site. Ça permet de ne pas à avoir à évire des tonnes de code.

Information : Les frameworks CSS sont conçus pour alléger la charge de travail du développeur tout en assurant une base solide pour la création de sites web modernes.

Dans la suite de ce cours, nous explorerons en détail l'utilisation de Bootstrap pour simplifier la conception réactive et améliorer l'efficacité du développement.

Installation de Bootstrap :

Il y a deux méthodes courantes pour intégrer Bootstrap dans vos projets :

En utilisant les liens principaux CDN pour le CSS Bootstrap (https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css) et le JavaScript Bootstrap (https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js), comme dans l'exemple suivant :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Bootstrap demo</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    </head>
    <body>
        <h1>Hello, world!</h1>
        <srcript src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
    </body>
</html>

Vous pouvez également télécharger les fichiers Bootstrap CSS et JS compilé sur le site officiel de Bootstrap, décompressez le dossier téléchargé dans votre projet et modifiez le code ci-dessus pour faire référence aux fichiers nécessaires dans votre projet.

Mais avant d'explorer ces options, intéressons-nous à la question cruciale : pourquoi utiliser les liens CDN plutôt que de télécharger localement les fichiers Bootstrap ?

L'utilisation de Content Delivery Network (CDN) pour Bootstap présente plusieurs avantages. Les liens CDN pointent vers des versions hébergées de Bootstrap, généralement sur des serveurs rapides et iables, ce qui offrent des avantages sifificatifs en termes de performances et de disponibilité. Voici quelques raisons d'opter pour les liens CDN :

Efficacité du téléchargement : Les utilisateurs qui ont déjà visité un site utilisant le même CDN auront déjà les fichiers Bootstrap en cache, accélérant ainsi le chargement de votre site pour eux.
Mises à jour automatiques : En utilisant les liens CDN, vous profitez automatiquement des mises à jour de Bootstrap. Vous n'avez pas besoin de télécharger manuellement les nouvelles versions.
Économie de bande passante : Le chargement des fichiers Bootstrap à partir d'un CDN peut réduire la consommation de bande passante de votre serveur, ce qui peut être particulièrement avantageux pour les sites à fort trafice.

En conclusion, l'utilisation de liens CDN pour Bootstrap offre une solution pratique et efficace pour intégrer ce framework dans vos projets, améiorant ainsi les performances et la maintenance de votre site web.

Positionnement avec Bootstrap :

Bootstrap simplifie considérablement le processus de positionnement des éléments sur une page grâce à son syst§me de grille flexible. Compréhension et maîtrise de ce système sont essentielles pour créer des mises en page réactives et harmonieuses. Jetons un coup d'oeil à quelques concepts clés.

La grille Bootstrap repose sur deux composants principaux : les lignes (row) et les colonnes (col). Cette grille a au maximum 12 colonnes. Elle est basée sur le modèle de dispositif "flexbox" (display: flex;) et permet une disposition fluide des éléments sur différentes tailles d'écrans.

Voici un exemple basique de positionnement avec Bootstrap : je veux créer un site comportant une zone à gauche (menu) et une zone centrale :

<div class="container-fluid>
    <section class="row">
        <article class="col-lg-4"> ... </article>
        <article class="col-lg-8"> ... </article>
    </section>
</div>

Analysons cet exemple.

Pour pouvoir utiliser la grille, Bootstrap demande que l'entièreté du site soit encapsulé dans une division associée à la classe container ou container-fluid. Cela permet à Boostrap de rendre votre site Responsive. La classe container définit par défaut un conteneur réactif de largeur fixe, ce qui signifie qu'il existe des classes container pour chaque point d'arrêt (container-sm, container-md, etc.). La classe container-fluid est utilisée pour un conteneur couvrant toute la largeur de la fenêtre.

Ensuite, nos différentes zones peuvent se placer sur la grille. On divise notre page en lignes (row) et chacune contient des colonnes (col). Dans l'exemple ci-dessus, on définit ici une seule ligne qui est composée d'une zone comportant les quatre premières colonnes de la grille, suivit d'une zone (toujours sur la même ligne) comprenant les huit dernières colonnes.

Vous le voyez le positionnement a été grandement facilité. Bien sûr, on peut définir plusieurs lignes (row). On peut donc avoir une ligne comptant 12 colonnes (header) suivie par une ligne comptant une zone de quatre colonnes et une zone de huit colonnes.

Remarquez également que Bootstrap utilise des classes, le choix des éléments HTML article et section dans l'exemple précédent apaprtient au développeur. N'oubliez donc pas les bonnes habitudes apprises avant Bootstrap notamment sur l'utilisation des balises sémantiques.

Dans l'exemple, ce sont des classes col-lg-* qui ont été utilisées. Sachez qu'il existe des versions col-xs-*, col-sm-*, col-md-* de ces classes. xs, sm, md et lg définissent en fait le type d'écran pour lequel le site a été conçu. La taille des colonnes étant évidemment différente sur un smartphone (xs), sur une tablette (sm), sur un écran de bureau (md) et un écran large (lg).

Botstrap comprend six points d'arrêts (breakpoints) par défaut, parfois appelés niveaux de grille, pour une construction réactive :

Point d'arrêt	Infixe de classe	Dimensions
Super petit	Aucun	< 576px
Petit	sm	>= 576px
Moyen	md	>= 768px
Grand	lg	>= 992px
Extra large	xl	>= 1200px
Très très grand	xxl	>= 1400px

Les classes Bootstrap :

Bootstrap propose différentes classes permettant d'embellir votre site ou de l'enrichir avec des composants prêts à l'emploi. Évidemment pour pouvoir les utiliser, il faut connaître ces classes et savoir comment les utiliser. Le site de W3Schools propose justement la liste des composants Bootstrap ainsi qu'un exemple l'illustrant.

Retenez simplement le terme Framework CSS et Bootstrap.

Pour le projet, vous pouvez utiliser Bootstrap !!!

En gros, le système de grille de Bootstrap utilise une série de conetneurs, de lignes et de colonnes pour disposer et aligner le contenu. Il est construit avec flexbox et est entièrement réactif.

Avec Bootstrap 5, on a la possibilité d'activer un système de grille séparé construi sur CSS Grid (display: grid;), mais avec une touche Bootstap. Voici les différentes étapes à réaliser :

Désactivez le système de grille par défaut en définissant dans le SASS : $enable-grid-classes: false.
Activez la grille CSS en définissant dans le SASS : $enable-cssgrid: true.
Recompilez votre SASS.
Remplacez les instances de .row par .grid (définissant le display: grid).
Remplacez les classes .col- * par des classes .g-col-* car, en effet, nos colonnes CSS Grid utilisent la propriété grid-column au lieu de width.
On peut définir les tailles des colonnes et des gouttières (margin et padding) via des variables CSS sur le parent .grid, en ligne ou dans une feuille de style, avec --bs-columns et --bs-gap.

Voici quelques-unes des classes Bootstrap les plus couramment utilisées. :

Boutons : Utilisez les classes comme "btn" et "btn-primary" pour styliser et colorer vos boutons. Par exemple :
```
<button class="btn btn-primary">Cliquez-moi</button>
```
Alertes : Ajoutez des alertes visuelles avec les classes "alert" et "alert-danger" pour une alerte rouge. Exemple :
```
<div class="alert alert-danger" role="alert">
    Attention ! Ceci est une alerte.
</div>
```
Tables : Utilisez la classe "table" pour styliser vos tables. Ajoutez "table-striped" pour des lignes alternées. Exemple :
```
<table class="table table-striped">
    
</table>
```

Images réactives : Appliquez la classe "img-fluid pour rendre vos images réactives, s'ajustant automatiquement à la taille de leur conteneur.

<img src="image.jpg class="img-fluid" alt="Image réactive">

Pour la balise <figure>, voici un exemple Bootstrap :

<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded" alt="...">
    <figcaption class="figure-caption text-end">Une description pour l'image ci-dessus.</figcaption>
</figure>

Formulaire : Utilisez les classes "form-label", "form-control", et d'autres pour styliser vos formulaires. Exemple :
```
<label for="nom" class="form-label">Nom :</label>
<input type="text" id="nom" name="name" class="form-control">
```
Pour les formulaires, il y a les classes .form-label pour les balises <label>, .form-control pour les balises <input> qui ne sont pas des types radio, range ou checkbox.

Pour les types radios ou checkbox, on a les classes .form-check-label pour les labels et .form-check-input pour les inputs.

Pour les types range, la classe .form-range fait le travail.

Dans un formulaire, on peut rajouter des messages de validation pour dire si les critères requis pour le champ est valide ou pas en utilisant les classes .valid-feedback pour dire que le champ est valide et .invalid-feedback pour dire que le champ est invalide. Il faut pas oublier d'ajouter l'attribut booléen novalidate dans la balise <form>.

La validation HTML du formualire est appliquée via les deux pseudo-classes CSS, :invalid et :valid. Elle s'applique aux éléments <input>, <select>, et <textarea>. Bootstrap limite les styles :invalid et :valid à la classe parente .was-validated, génralemnt appliquée au <form>. Sinon, tout champ sans valeur apparaît comme invalide lors du chargement de la page. De cette manière, vous pouvez choisir quand les activer (généralement après une tentative de soumission du formulaire). Pour réinitialiser l'apparence du formulaire (par exemple, en cas de soumissions de formulaire dynamiques via Ajax), supprimez à nouveau la classe .was-validated du <form> après la soumission.

Pour désactiver la soumission du formulaire en cas de champs invalides, il faut rajouter le code ci-dessous dans notre propre code JavaScript :
```
// Exemple de script JavaScript de démarrage pour désactiver la soumission du formulaire en cas de champs invalides
(() => {
    'use strict';

    // Récupérer tous les formulaires auxquels nous voulons appliquer des styles de validation Bootstrap personnalisés
    const forms = document.querySelectorAll('.needs-validation');

    // Les parcourir et empêcher la soumission
    Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
            // Empêcher la soumission si le formulaire n'est pas valide
            if (!form.checkValidity()) {
            event.preventDefault();
            event.stopPropagation();
            }

            // Ajouter la classe 'was-validated' pour appliquer les styles de validation
            form.classList.add('was-validated');
        }, false);
    })
})();
```
Composants interactifs : Bootstrap propose des classes pour des éléments tels que les carrousels, les modales, les onglets, la navbar, etc. Explorez la documentation pour les intégrer facilement dans votre projet.

Prenons l'exemple de la barre de navigation. Voici ce que vous devez savoir avant de commencer avec la barre de navigation :
- Les barres de navigation nécessitent un conteneur .navbar avec .navbar-expand{-sm|-md|-lg|-xl|-xxl} pour la réduction réactive et les classes de schéma de couleurs.
- Les barres de naviagtion et leur contenu sont fluides par défaut. Modifiez le conteneur pur limiter leur largeur horizontale de différentes manières.
- Utilisez nos classes utilitaires d'espacement et dee flexibilité pour contrôler l'espacement et l'alignement dans les barres de navigation.
- Les barres de navigation sont réactives par défaut, mais vous pouvez facilement les modifier pour changer cela. le comportement réactif dépend du plugin JavaScript Collapse de Bootstrap.
- Assurez-vous de l'accessibilité en utilisant un élément <nav> ou, si vous utilisez un élement plus générique tel qu'un <div>, ajoutez un role="navigation"> à chaque barre de navigation de navigation pour l'identifier explicitement comme une région de repère pour les utilisateurs de technologies d'assistance.
- Indiquez l'élément actuel aria-current="page" pour la page actuelle ou aria-current="true" pour l'élément actuel dans un ensemble.
- Nouveauté dans Bootstrap 5.2 : Les barres de navigation peuvent être thématisées avec des variables CSS qui sont limitées à la classe de basse .navbar. .navbar-light a été dépréciée et .navbar-dark a été réécrite pour remplacer les variables CSS au lieu d'ajouter des styles supplémentaires.
Les barres de navigation sont livrées avec une prise en charge intégrée pour quelques sous-composants. Choisissez parmi les éléments suivants selon vos besoins :
- .navbar-brand pour le nom de votre entreprise, produit ou projet.
- .navbar-nav pour une navigation pleine hauteur et légère (y compris la prise en charge des menus déroulants).
- .navbar-toggler pour une utilisation avec le plugin de réduction de Bootstrap et d'autre comportements de basculement de navigation.
- Utilitaires de flexibilité et d'espacement pout tous les contrôles de formulaire et actions.
- .navbar-text pour ajouter des chaînes de texte centrées verticalement.
- .collapse.navbar-colapse pour regrouper et masquer le contenu de la barre de navigation par un point d'arrêt parent.
- Ajoutez éventuellement .navbar-scroll pour définir une max-height et faire défiler le contenu étendu de la barre de navigation.
Voici un exemple de tous les sous-composants inclus dans une barre de navigation légère et réactive qui se réduit automatiquement au point d'arrêt lg (large).
```
<nav role="navigation" class="navbar navbar-expand-lg">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Navbar</a>
        <button type="button" class="navbar-toggler" aria-controls="navbarContent" data-bs-target="#navbarContent" data-bs-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarContent">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a href="#" aria-current="page" class="nav-link active">Home</a>
                </li>
                <li class="nav-item dropdown">
                    <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown">Dropdown</a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#" class="dropdown-item">Action</a>
                        </li>
                        <li class="dropdown-divider"></li>
                        <li>
                            <a href="#" class="dropdown-item">Another action</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <form class="d-flex ms-auto" role="search">
                <input type="search" class="form-control me-2" aria-label="Search">
                <button type="submit" class="btn btn-outline-success">Search</button>
            </form>
        </div>
    </div>
</nav>
```
Attention, dans un contexte de langue de gauche à droite (comme le français), "start" correspond au côté gauche et "end" au côté droit. Donc, ms-auto ajoute une marge automatique à gauche, ce qui pousse l'élément vers la droite, et me-auto ajoute une marge automatique à droite, poussant l'élément vers la gauche.

Cela peut sembler contre-intuitif, mais c'est lié à la gestion de la mise en page en fonction de la direction de la langue. Bootstrap utilise ces classes pour rendre plus facile le positionnement des éléments dans des dispositions flexibles ou responsives, tout en prenant en compte la direction du texte.

On utilise les classes .g-* pour contrôler les espacements horizontaux et verticaux de la grille. Ces classes permettent de définir la marge (margin) entre les éléments de la grille.

Information : Ces classes Bootstrap sont conçues pour simplifier le développement en fournissant des styles cohérents et des fonctionnalités interactives. Explorez la documentation de Bootstrap et utilisez ces classes de manière judicieuse pour accélérer le processus de création de votre site tout en maintenant une apprence professionnelle.

Conclusion :

En résumé, ce cours a exploré les éléments essentiels du Responsive Web Design (RWD) et a mis en lumière l'utilité du framework CSS Bootstrap pour simplifier le processus de développement. À mesure que la diversité des appareils utlisés pour naviguer sur le web continue de croître, le RWD devient une nécessité incontournable pour garantir une expérience utilisateur optimale.

Nous avons étudié les Media Queries, des outils permettant d'adapter dynamiquement les styles en fonction des caractéristiques des écrans. Les exemples pratiques ont démontré comment ces Media Queries contribuent à créer des designs réactifs qui s'ajustent automatiquement à différentes tailles d'écrans.

En introduisant Bootstrap, l'un des frameworks CSS les plus populaires, nous avons exploré comment il simplifie la gréation de sites web en offrant une grille flexible, des styles préconçus et des composants interactifs. Nous avons souligné l'importance de maintenir la sémantique HTML tout en exploitant la puissance des classes Bootstrap.

Dans un monde où la performance et l'accessibilité sont cruciales, nous avons également discuté des avantages d'utiliser les liens CDN pour intégrer Bootstrap, offrant des gains en termes de vitesse de chargement, de mises à jour automatiques, et d'économie de bande passante.

Voici un dernier exemple Bootstrap :

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Test de Bootstrap</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    </head>
    <body class="d-flex flex-column min-vh-100">
        
        <header id="header" role="header">
            <p>Test Header</p>
        </header>
        <main id="main" role="main" class="flex-grow-1 container-fluid">
            <p>Test Main</p>
        </main>
        <footer id="footer" role="contentinfo" class="footer d-flex justify-content-center">
            <p>Test Footer</p>
        </footer>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    </body>
</html>

La classe d-flex en Bootstrap est utilisée pour appliquer la propriété CSS display : flex; à un élément. Cette classe transforme l'élément en un conteneur flex, ce qui signifie que ses enfants directs deviennent des éléments flexibles et suivent les règles du modèle de boîte flexible.

Cependant, la classe d-flex elle-même ne crée pas un conteneur Bootstrap au sens de la grille. Elle ne donne pas l'élément les styles spécifiques aux conteneurs de la grille Bootstrap, tels que la gestion des marges, la largeur fixe, etc. La classe d-flex se concentre uniquement sur la mise en place de boîte flexible.

Par défaut, la classe d-flex applique la propriété CSS flex-direction: row;, ce qui signifie que les éléments sont disposés en ligne, côte à côte. Si vous voulez une disposition en colonne, il faut utiliser la classe flex-column, cela signifie que les enfants directs de l'élément avec cette classe sont empilés verticalement plutôt qu'en ligne.

Le code ci-dessus se traduit sans Bootstrap comme ceci :

<!DOCTYPE html>
    <html lang="fr">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>Test de Bootstrap</title>
            <style>
                body {
                    display:flex;
                    flex-direction: column;
                    min-width: 100vh;
                }
                main {
                    flex-grow: 1;
                }
                footer {
                    display: flex;
                    justify-content: center;
                }
            </style>
        </head>
        <body>
            
            <header id="header" role="header">
                <p>Test Header</p>
            </header>
            <main id="main" role="main">
                <p>Test Main</p>
            </main>
            <footer id="footer" role="contentinfo">
                <p>Test Footer</p>
            </footer>

        </body>
    </html>

En conclusion, maîtriser le Responsive Web Design et l'utilisation de Bootstrap ouvre la voie à des sites web modernes, adaptables et esthétiquement cohérents sur une variété de dispositifs. Continuez à explorer, expérimenter et appliquer ces concepts dans vos projets pour garantir des expériences utilisateur exceptionnelles et en phase avec les exigences actuelles du web. Bonne continuation dans votre parcours de développement web !

Cours d'introduction au Web

HTML5 et CSS3

CSS 3 - Responsive Web Design :

Introduction :

Media queries :

Framework CSS :

Introduction :

Bootstrap :

Installation de Bootstrap :

Positionnement avec Bootstrap :

Les classes Bootstrap :

Conclusion :