{"id":574,"date":"2018-05-02T13:46:55","date_gmt":"2018-05-02T11:46:55","guid":{"rendered":"https:\/\/www.templatemonster.com\/fr\/blog\/?p=574"},"modified":"2020-02-28T09:09:37","modified_gmt":"2020-02-28T09:09:37","slug":"bootstrap-3-le-systeme-de-grille-et-les-requetes-media","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/","title":{"rendered":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia"},"content":{"rendered":"<p>Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des frameworks CSS les plus puissants des jamais con\u00e7us.<\/p>\n<hr \/>\n<p>Lorsque Bootstrap 3 a \u00e9t\u00e9 publi\u00e9, le changement le plus int\u00e9ressant \u00e9tait la diff\u00e9rence dans les syst\u00e8mes de grille. Bootstrap 2 r\u00e9pondait \u00e0 deux tailles de navigateur diff\u00e9rentes (ordinateur de bureau puis mobile). Avec Bootstrap 3, vous construisez d'abord avec le mobile en t\u00eate, et le syst\u00e8me de grille vous permet de cr\u00e9er diff\u00e9rentes grilles en fonction de la taille du navigateur.Une tendance similaire est observ\u00e9e dans la version la plus r\u00e9cente du cadre - <a href=\"https:\/\/www.templatemonster.com\/blog\/alpha-release-bootstrap-4-latest-framework-version\/\" target=\"_blank\" rel=\"noopener noreferrer\">Alpha Release of the Bootstrap 4<\/a>.<\/p>\n<table>\n<tbody>\n<tr style=\"background-color: #ebebeb\">\n<td style=\"text-align: center\" width=\"33%\"><span style=\"font-size: 14pt;color: #000000\"><strong>Bootstrap 2<\/strong><\/span><\/td>\n<td style=\"text-align: center\" width=\"34%\"><span style=\"font-size: 14pt;color: #000000\"><strong>Bootstrap 3<\/strong><\/span><\/td>\n<td style=\"text-align: center\" width=\"33%\"><span style=\"font-size: 14pt;color: #000000\"><strong>Bootstrap 4<\/strong><\/span><\/td>\n<\/tr>\n<tr style=\"background-color: #fcfcfc\">\n<td style=\"text-align: center\" width=\"319\">La grille que vous cr\u00e9ez fonctionne sur les ordinateurs de bureau, puis se superpose lorsque la taille du navigateur est inf\u00e9rieure \u00e0 767 pixels. Ceci est limit\u00e9 puisque vous ne pouvez d\u00e9finir qu'une grille sur les navigateurs de taille des ordinateurs de bureau. Vous avez\u00a0 qu'une grille empil\u00e9e sur les appareils mobiles.<\/td>\n<td style=\"text-align: center\" width=\"319\">Le nouveau syst\u00e8me de grille Bootstrap s'applique aux \u00e9crans des mobiles en premier. Lorsque vous d\u00e9clarez une taille de grille sp\u00e9cifique qui est la grille <strong>pour cette taille et au-dessus<\/strong>.<\/td>\n<td style=\"text-align: center\" width=\"319\">La derni\u00e8re version de Bootstrap offre un syst\u00e8me de grille am\u00e9lior\u00e9 avec un nouveau niveau qui vous permet de cibler les utilisateurs des mobiles mieux que jamais auparavant. De plus, les <strong>mixins s\u00e9mantiques<\/strong> ont \u00e9galement subi la mise \u00e0 jour majeure. A partir de maintenant, vous pouvez acc\u00e9der \u00e0 tous les mixins n\u00e9cessaires de n'importe quel endroit.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 style=\"text-align: center\">Exemple de colonnes avec Bootstrap 3<\/h3>\n<p>Cela peut \u00eatre un peu difficile \u00e0 saisir au d\u00e9but, voici un exemple. Disons que vous voulez un site qui a :<\/p>\n<ul>\n<li>1 colonne sur les appareils extra-petits<\/li>\n<li>2 colonnes sur les appareils petits ET moyens<\/li>\n<li>4 colonnes sur de gros appareils<\/li>\n<\/ul>\n<p>Puisque le syst\u00e8me de grille se d\u00e9connecte maintenant des appareils mobiles, voici \u00e0 quoi ressemblera ce code.<\/p>\n<div class=\"row\">\n<div class=\"col-sm-6 col-lg-3\">C'est une partie de notre grille.<\/div>\n<div class=\"col-sm-6 col-lg-3\">C'est une partie de notre grille.<\/div>\n<div class=\"col-sm-6 col-lg-3\">C'est une partie de notre grille.<\/div>\n<div class=\"col-sm-6 col-lg-3\">C'est une partie de notre grille.<\/div>\n<\/div>\n<p>Nous n'avons pas besoin de d\u00e9finir quoi que ce soit pour les petits p\u00e9riph\u00e9riques, car la valeur par d\u00e9faut est une colonne. Nous devons d\u00e9finir une taille de grille pour les petits appareils, <strong>mais pas pour les appareils de taille moyenne<\/strong>. C'est parce que la grille cascade. Donc, si vous d\u00e9finissez une taille \u00e0 <strong>sm<\/strong>, alors ce sera la taille de la grille pour <strong>sm, md<\/strong> et<strong> lg<\/strong>. Nous allons expliquer les diff\u00e9rentes tailles de grille et comment vous les cr\u00e9ez, puis montrer des exemples.<\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Les tailles de la grille<\/h3>\n<p>C'est la meilleure partie du nouveau syst\u00e8me de grille. Vous pouvez r\u00e9ellement afficher votre grille sur 4 tailles de navigateur diff\u00e9rentes. Voici la r\u00e9partition des diff\u00e9rentes tailles.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace\"><span style=\"color: #339933\">.<\/span>col<span style=\"color: #339933\">-<\/span>xs<span style=\"color: #339933\">-<\/span>$\tExtra Small\tT\u00e9l\u00e9phones moins de 768px\r\n<span style=\"color: #339933\">.<\/span>col<span style=\"color: #339933\">-<\/span>sm<span style=\"color: #339933\">-<\/span>$\tSmall Devices\tTablettes de  768px et plus\r\n<span style=\"color: #339933\">.<\/span>col<span style=\"color: #339933\">-<\/span>md<span style=\"color: #339933\">-<\/span>$\tMedium Devices\tOrdinateurs de bureau de 992px et plus\r\n<span style=\"color: #339933\">.<\/span>col<span style=\"color: #339933\">-<\/span>lg<span style=\"color: #339933\">-<\/span>$\tLarge Devices\tGrands ordinateurs de bureau de 1200px et plus<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Les\u00a0<a href=\"http:\/\/getbootstrap.com\/css\/#grid\" target=\"_blank\" rel=\"noopener noreferrer nofollow\">documents officiels Bootstrap<\/a>\u00a0donnent une compr\u00e9hension beaucoup plus compl\u00e8te du fonctionnement de la grille. Jetez y un coup d'\u0153il pour avoir une meilleure vue d'ensemble des tailles de colonnes, des tailles de goutti\u00e8res, des tailles de colonnes maximales et de la largeur maximale de votre site global en fonction de la taille du navigateur.<\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Tailles par d\u00e9faut pour la grille Bootstrap<\/h3>\n<p>Parfois, vous devrez utiliser des requ\u00eates m\u00e9dia pour que votre site fonctionne comme vous le souhaitez. Conna\u00eetre les tailles de grille par d\u00e9faut est essentiel pour \u00e9tendre la grille Bootstrap. Nous avons r\u00e9dig\u00e9 un petit conseil pour vous montrer les tailles par d\u00e9faut, alors jetez un \u0153il si vous avez besoin des requ\u00eates m\u00e9dia et des points d'arr\u00eat Bootstrap.<\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Points d'arr\u00eat de requ\u00eate de m\u00e9dia de\u00a0Bootstrap 3<\/h3>\n<p>Bootstrap 3 est un framework front-end et mobile-first. J'ai inclus l'ordre correct pour les requ\u00eates m\u00e9dia ci-dessous, mais j'ai \u00e9galement inclus en bas les premiers points d'arr\u00eat non mobiles dans le cas o\u00f9 certaines personnes ne sont pas habitu\u00e9es \u00e0 la m\u00e9thodologie mobile-first puisque techniquement les deux fonctionneront. <strong>Min-Width:<\/strong> Fait r\u00e9f\u00e9rence \u00e0 tout ce qui est sup\u00e9rieur ou \u00e9gal au montant donn\u00e9. <strong>Max-Width:<\/strong> Fait r\u00e9f\u00e9rence \u00e0 tout ce qui est inf\u00e9rieur ou \u00e9gal au montant donn\u00e9.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace\"><span style=\"color: #666666;font-style: italic\">\/*==================================================\r\n=            Bootstrap 3 Media Queries             =\r\n==================================================*\/<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/*==========  Mobile First Method  ==========*\/<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Custom, iPhone Retina *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>min<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 320px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Extra Small Devices, Phones *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>min<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 480px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Small Devices, Tablets *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>min<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 768px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Medium Devices, Desktops *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>min<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 992px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Large Devices, Wide Screens *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>min<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 1200px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\u00a0\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/*==========  Non-Mobile First Method  ==========*\/<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Large Devices, Wide Screens *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 1200px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Medium Devices, Desktops *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 992px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Small Devices, Tablets *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 768px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Extra Small Devices, Phones *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 480px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666;font-style: italic\">\/* Custom, iPhone Retina *\/<\/span>\r\n\t<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 320px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n\t<span style=\"color: #009900\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Points d'arr\u00eat de requ\u00eate de m\u00e9dia de\u00a0Bootstrap 2.3.2<\/h3>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace\"><span style=\"color: #666666;font-style: italic\">\/*=====================================================\r\n=            Bootstrap 2.3.2 Media Queries            =\r\n=====================================================*\/<\/span>\r\n<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 1200px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 979px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 767px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 480px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n<span style=\"color: #009900\">}<\/span>\r\n\u00a0\r\n<span style=\"color: #339933\">@<\/span>media only screen and <span style=\"color: #009900\">(<\/span>max<span style=\"color: #339933\">-<\/span>width <span style=\"color: #339933\">:<\/span> 320px<span style=\"color: #009900\">)<\/span><span style=\"color: #009900\">{<\/span>\r\n\u00a0\r\n<span style=\"color: #009900\">}<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Utilitaires Responsive<\/h3>\n<p>Tout comme Bootstrap 2, Bootstrap 3 fournit des utilitaires responsive pour cacher et afficher les \u00e9l\u00e9ments en fonction de la taille du navigateur. Cela nous aidera \u00e9galement \u00e0 d\u00e9finir notre syst\u00e8me de grille.<\/p>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\" style=\"font-family: monospace\"><span style=\"color: #339933\">.<\/span>visible<span style=\"color: #339933\">-<\/span>xs\r\n<span style=\"color: #339933\">.<\/span>visible<span style=\"color: #339933\">-<\/span>sm\r\n<span style=\"color: #339933\">.<\/span>visible<span style=\"color: #339933\">-<\/span>md\r\n<span style=\"color: #339933\">.<\/span>visible<span style=\"color: #339933\">-<\/span>lg\r\n<span style=\"color: #339933\">.<\/span>hidden<span style=\"color: #339933\">-<\/span>xs\r\n<span style=\"color: #339933\">.<\/span>hidden<span style=\"color: #339933\">-<\/span>sm\r\n<span style=\"color: #339933\">.<\/span>hidden<span style=\"color: #339933\">-<\/span>md\r\n<span style=\"color: #339933\">.<\/span>hidden<span style=\"color: #339933\">-<\/span>lg<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>Cela aide parce que nous sommes en mesure de montrer certains \u00e9l\u00e9ments en fonction de la taille. Dans nos exemples d'aujourd'hui, nous allons montrer une barre lat\u00e9rale suppl\u00e9mentaire sur les grands ordinateurs de bureau.<\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Exemples<\/h3>\n<p>Voici quelques exemples de grilles que vous pouvez cr\u00e9er. Nous allons passer en revue quelques sites de base que certaines personnes pourraient vouloir et montrer \u00e0 quel point il est facile de construire un site avec la grille Bootstrap 3.<\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Simple: Grand \u00e9cran d'ordinateur de bureau vs \u00e9cran mobile<\/h3>\n<p>Imaginons que vous vouliez qu'un site contienne <strong>1 colonne<\/strong> sur les p\u00e9riph\u00e9riques extra-petits (t\u00e9l\u00e9phone) et petits (tablettes), <strong>2 colonnes<\/strong> sur les p\u00e9riph\u00e9riques de taille moyenne (de bureau moyen) et <strong>4 colonnes<\/strong> sur les p\u00e9riph\u00e9riques de grande taille (de bureau).<\/p>\n<p>Voici le code pour cet exemple :<\/p>\n<div class=\"row\">\n<div class=\"col-md-6 col-lg-3\">\n<div class=\"visible-lg text-success\">\n<p>Grands appareils!<\/p>\n<p>Appareils moyens<\/p>\n<p>Appareils petits et tr\u00e8s petits<\/p>\n<\/div>\n<\/div>\n<div class=\"col-md-6 col-lg-3\">\n<div class=\"visible-md text-warning\">Appareils moyens!<\/div>\n<div class=\"visible-xs visible-sm text-danger\">Appareils petits et tr\u00e8s petits<\/div>\n<\/div>\n<div class=\"col-md-6 col-lg-3\">\n<div class=\"visible-lg text-success\">Large Devices!<\/div>\n<div class=\"visible-md text-warning\">Medium Devices!<\/div>\n<div class=\"visible-xs visible-sm text-danger\">Extra Small and Small Devices<\/div>\n<\/div>\n<div class=\"col-md-6 col-lg-3\">\n<div class=\"visible-lg text-success\">\n<p>Grands appareils!<\/p>\n<p>Appareils moyens<\/p>\n<p>Appareils petits et tr\u00e8s petits<\/p>\n<\/div>\n<\/div>\n<\/div>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Interm\u00e9diaire : Afficher la colonne suppl\u00e9mentaire sur les grands ordinateurs de bureau<\/h3>\n<p>Ceci est un exemple int\u00e9ressant et excellent que la nouvelle grille excelle. Disons que vous avez un site qui a une barre lat\u00e9rale et une section de contenu principal. Pour les <strong>p\u00e9riph\u00e9riques tr\u00e8s petits<\/strong>, vous voulez une colonne, le contenu principal avec la barre lat\u00e9rale empil\u00e9e en dessous. Pour les <strong>appareils de petite et moyenne taille<\/strong>, nous souhaitons que la barre lat\u00e9rale et le contenu principal soient c\u00f4te \u00e0 c\u00f4te. Maintenant, pour les <strong>gros appareils<\/strong>, nous voulons utiliser l'espace sur des appareils plus gros. Nous voulons ajouter une barre lat\u00e9rale suppl\u00e9mentaire pour afficher plus de contenu. Nous changeons la taille du contenu principal pour couvrir 6 colonnes sur les grands appareils pour faire de la place pour notre deuxi\u00e8me barre lat\u00e9rale. C'est un excellent moyen d'utiliser l'espace sur des bureaux plus grands. Et voici le code pour cet exemple.<\/p>\n<div class=\"row\">\n<div class=\"col-sm-9 col-lg-6 text-danger\">C'est le contenu principal.<\/div>\n<div class=\"col-sm-3 text-warning\">C'est la barre lat\u00e9rale principale.<\/div>\n<div class=\"col-lg-3 visible-lg text-success\">Ceci est la barre lat\u00e9rale secondaire qui n'appara\u00eet que sur les appareils LARGES.<\/div>\n<\/div>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">Avanc\u00e9 : Grille diff\u00e9rente pour chaque taille<\/h3>\n<p>Ce sera un exemple plus complexe. Disons qu'\u00e0 aucun moment dans notre syst\u00e8me de grille, nous ne voulons que toutes nos colonnes soient empil\u00e9es. Pour les <strong>tr\u00e8s<\/strong>\u00a0<strong>petits appareils<\/strong>, nous voulons 2 colonnes. Pour les <strong>petits appareils<\/strong>, nous voulons 3 colonnes. Pour les <strong>appareils de taille moyenne<\/strong>, nous voulons 4 colonnes. Pour les <strong>grands appareils<\/strong>, nous voulons 6 colonnes (une qui s'affiche que sur les gros appareils).<\/p>\n<p>Vous obtenez l'exercice maintenant. Disons simplement dans l'exemple et le code.<\/p>\n<div class=\"row\">\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">C'est du contenu !<\/div>\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">C'est du contenu !<\/div>\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">C'est du contenu !<\/div>\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\">C'est du contenu ! C'est du contenu !<\/div>\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"><\/div>\n<div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\">C'est du contenu seulement visible sur les gros appareils !<\/div>\n<\/div>\n<p>Vous pouvez voir que lorsque la taille du navigateur diminue, les colonnes commencent \u00e0 se former. En outre, le contenu \u00e0 l'int\u00e9rieur de chacun va commencer \u00e0 empiler.<\/p>\n<p><a href=\"http:\/\/store.templatemonster.com\/wordpress-themes.php?aff=tm_blog\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/www.templatemonster.com\/blog\/wp-content\/plugins\/lazy-load\/images\/1x1.trans.gif?x56506\" data-lazy-src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/04\/wp_en_970x250.jpg?x56506\" \/><img decoding=\"async\" src=\"https:\/\/s.tmimgcdn.com\/blog\/wp-content\/uploads\/2017\/04\/wp_en_970x250.jpg?x56506\" \/><\/a><\/p>\n<hr \/>\n<h3 class=\"aligncenter\" style=\"text-align: center\">C'est grillestique !<\/h3>\n<p>Vous pouvez voir \u00e0 quel point il est facile de construire des sites complexes et dynamiques avec la grille Bootstrap 3. Depuis les sites de colonnes mobiles 2 jusqu'\u00e0 la dissimulation complexe et l'affichage d'\u00e9l\u00e9ments sur de grands bureaux, vous pouvez cr\u00e9er n'importe quel type de site. J'esp\u00e8re que ces exemples vous donneront une id\u00e9e de la flexibilit\u00e9 du nouveau syst\u00e8me de grille et de toutes les grandes choses que vous pouvez cr\u00e9er.<\/p>\n<p>Si vous avez d\u00e9j\u00e0 un site Web HTML avec un panneau d'administration existant, vous pouvez consulter nos\u00a0<a title=\"Bootstrap Admin Themes\" href=\"https:\/\/www.templatemonster.com\/fr\/type\/modeles-pour-panneau-administration\/\" target=\"_blank\" rel=\"noopener noreferrer\">MOD\u00c8LES BOOTSTRAP POUR PANNEAUX D'ADMINISTRATION<\/a>. Ces\u00a0<a href=\"https:\/\/www.templatemonster.com\/fr\/modeles-de-sites-web-bootstrap\/\" target=\"_blank\" rel=\"noopener noreferrer\"> th\u00e8mes bootstrap<\/a> vous montreront la pleine puissance de Bootstrap 3 !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des frameworks CSS les plus puissants des jamais con\u00e7us. Lorsque Bootstrap 3 a \u00e9t\u00e9 publi\u00e9, le changement le plus int\u00e9ressant \u00e9tait la diff\u00e9rence dans les syst\u00e8mes de grille. Bootstrap 2 [&hellip;]<\/p>\n","protected":false},"author":1672325,"featured_media":582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[29,25],"tags":[68],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France<\/title>\n<meta name=\"description\" content=\"Nous connaissons tous Bootstrap, car c&#039;est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l&#039;un des\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France\" \/>\n<meta property=\"og:description\" content=\"Nous connaissons tous Bootstrap, car c&#039;est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l&#039;un des\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog France\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-05-02T11:46:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2020-02-28T09:09:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/05\/featured_image14.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"900\" \/>\n\t<meta property=\"og:image:height\" content=\"538\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Claire\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@TM_France\" \/>\n<meta name=\"twitter:site\" content=\"@TM_France\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Claire\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\"},\"author\":{\"name\":\"Claire\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\"},\"headline\":\"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia\",\"datePublished\":\"2018-05-02T11:46:55+00:00\",\"dateModified\":\"2020-02-28T09:09:37+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\"},\"wordCount\":1385,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"keywords\":[\"Codage\"],\"articleSection\":[\"D\u00e9veloppement Web\",\"Tutoriels\"],\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\",\"name\":\"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\"},\"datePublished\":\"2018-05-02T11:46:55+00:00\",\"dateModified\":\"2020-02-28T09:09:37+00:00\",\"description\":\"Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#website\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"name\":\"TemplateMonster Blog France\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/fr\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#organization\",\"name\":\"MonsterPost France\",\"url\":\"https:\/\/monsterspost.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost France\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.instagram.com\/template_monster\/\",\"https:\/\/www.pinterest.com\/templatemonster\/\",\"https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/\",\"https:\/\/www.facebook.com\/TemplateMonsterFrance\/\",\"https:\/\/twitter.com\/TM_France\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c\",\"name\":\"Claire\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Claire\"},\"description\":\"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.\",\"url\":\"https:\/\/monsterspost.com\/fr\/author\/claire\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France","description":"Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/","og_locale":"fr_FR","og_type":"article","og_title":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France","og_description":"Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des","og_url":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/","og_site_name":"TemplateMonster Blog France","article_publisher":"https:\/\/www.facebook.com\/TemplateMonsterFrance\/","article_published_time":"2018-05-02T11:46:55+00:00","article_modified_time":"2020-02-28T09:09:37+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2018\/05\/featured_image14.jpg","type":"image\/jpeg"}],"author":"Claire","twitter_card":"summary_large_image","twitter_creator":"@TM_France","twitter_site":"@TM_France","twitter_misc":{"\u00c9crit par":"Claire","Dur\u00e9e de lecture estim\u00e9e":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/"},"author":{"name":"Claire","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c"},"headline":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia","datePublished":"2018-05-02T11:46:55+00:00","dateModified":"2020-02-28T09:09:37+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/"},"wordCount":1385,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"keywords":["Codage"],"articleSection":["D\u00e9veloppement Web","Tutoriels"],"inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/","url":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/","name":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia \u2b50 TemplateMonster Blog France","isPartOf":{"@id":"https:\/\/monsterspost.com\/fr\/#website"},"datePublished":"2018-05-02T11:46:55+00:00","dateModified":"2020-02-28T09:09:37+00:00","description":"Nous connaissons tous Bootstrap, car c'est le framework web en open source le plus populaire. Mark Otto et Jacob Thorton ont r\u00e9ussi \u00e0 cr\u00e9er l'un des","breadcrumb":{"@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/fr\/bootstrap-3-le-systeme-de-grille-et-les-requetes-media\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3 : le syst\u00e8me de grille et les requ\u00eates m\u00e9dia"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/fr\/#website","url":"https:\/\/monsterspost.com\/fr\/","name":"TemplateMonster Blog France","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/fr\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/fr\/#organization","name":"MonsterPost France","url":"https:\/\/monsterspost.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/fr\/wp-content\/uploads\/sites\/9\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost France"},"image":{"@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.instagram.com\/template_monster\/","https:\/\/www.pinterest.com\/templatemonster\/","https:\/\/www.youtube.com\/user\/TemplateMonsterCo\/","https:\/\/www.facebook.com\/TemplateMonsterFrance\/","https:\/\/twitter.com\/TM_France"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/4884946d097972046d54ec3b5524621c","name":"Claire","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/monsterspost.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/db0976148c5793ad6317a44bd5f93582?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Claire"},"description":"Claire est une \u00e9crivaine talentueuse et curieuse. Sa principale priorit\u00e9 est de transmettre en termes simples des informations difficiles. Elle adore le monde de la conception Web et partage des trucs sympas sur sa page Facebook. Elle s'int\u00e9resse \u00e9galement activement \u00e0 la litt\u00e9rature, aux traductions et communique avec plaisir avec les abonn\u00e9s en ligne.","url":"https:\/\/monsterspost.com\/fr\/author\/claire\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/574"}],"collection":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/users\/1672325"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/comments?post=574"}],"version-history":[{"count":9,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/574\/revisions"}],"predecessor-version":[{"id":3096,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/posts\/574\/revisions\/3096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media\/582"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/media?parent=574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/categories?post=574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/fr\/wp-json\/wp\/v2\/tags?post=574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}