{"id":3495,"date":"2018-11-09T10:42:39","date_gmt":"2018-11-09T10:42:39","guid":{"rendered":"https:\/\/www.templatemonster.com\/it\/blog\/?p=3495"},"modified":"2018-11-09T10:42:39","modified_gmt":"2018-11-09T10:42:39","slug":"bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/","title":{"rendered":"Bootstrap 3: il sistema di griglia e le query multimediali"},"content":{"rendered":"<p>Conosciamo tutti Bootstrap, perch\u00e8 \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.<\/p>\n<p>Quando \u00e8 stato publicato Bootstrap 3, il cambiamento pi\u00f9 interessante \u00e8 stata la differenza nei sistemi di griglia. Bootstrap 2 si adattava a due diverse dimensioni del browser (desktop e dispositivo mobile). Con Bootstrap 3, \u00e8 possibile creare prima i dispositivi mobili e il sistema di griglie consente di creare le griglie diverse in base alle dimensioni del browser. Una tendenza simile si osserva nella versione pi\u00f9 recente del framework: Alpha Release di Bootstrap 4.<\/p>\n<div class=\"spacer\" style=\"text-align: justify;\"><\/div>\n<div class=\"spacer\"><\/div>\n<table>\n<tbody>\n<tr style=\"background-color: #ebebeb;\">\n<td style=\"text-align: center;\" width=\"33%\">\n<h4>Bootstrap 2<\/h4>\n<\/td>\n<td style=\"text-align: center;\" width=\"34%\">\n<h4>Bootstrap 3<\/h4>\n<\/td>\n<td style=\"text-align: center;\" width=\"33%\">\n<h4>Bootstrap 4<\/h4>\n<\/td>\n<\/tr>\n<tr style=\"background-color: #fcfcfc;\">\n<td style=\"text-align: center;\" width=\"319\">La griglia che crei funziona sui desktop e si sovrappone quando la dimensione del browser \u00e8 inferiore a 767px. Questa \u00e8 una rete limitata di 1 griglia su browser di dimensioni desktop. Ti rimane una griglia impilata sui dispositivi mobili.<\/td>\n<td style=\"text-align: center;\" width=\"319\">Il nuovo sistema di griglia Bootstrap si applica prima ai dispositivi mobili. Quando si dichiara una dimensione di griglia specifica che \u00e8 la griglia per quella dimensione e sopra.<\/td>\n<td style=\"text-align: center;\" width=\"319\">L'ultima versione di Bootstrap offre agli utenti un sistema di griglia migliorato con un nuovo livello che ti consente di indirizzare gli utenti mobili come mai prima d\u2019ora. Inoltre, anche i mixaggi semantici hanno subito l'aggiornamento importante. D'ora in poi potrai accedere a tutti i mixaggi necessari da qualsiasi luogo.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Esempio di colonne Bootstrap 3<\/strong><\/h2>\n<p>Questo \u00e8 un p\u00f2 difficile da comprendere all'inizio, quindi ecco un esempio. Supponiamo che tu voglia un sito che abbia:<\/p>\n<ul style=\"text-align: justify;\">\n<li>1 colonna su dispositivi extra-piccoli<\/li>\n<li>2 colonne su dispositivi piccoli e medi<\/li>\n<li>4 colonne su dispositivi di grandi dimensioni<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">Dal momento che il sistema a griglia \u00e8 ora in cascata dai dispositivi mobili, questo \u00e8 il modo in cui questo codice apparir\u00e0.<\/p>\n<div style=\"text-align: justify;\"><\/div>\n<div style=\"text-align: justify;\"><\/div>\n<table style=\"height: 74px; border-color: #ffffff;\" width=\"639\">\n<tbody>\n<tr>\n<td style=\"width: 164px; border-color: #ffffff;\">Questo fa parte della nostra griglia.<\/td>\n<td style=\"width: 164px; border-color: #ffffff;\">Questo fa parte della nostra griglia.<\/td>\n<td style=\"width: 164px; border-color: #ffffff;\">Questo fa parte della nostra griglia.<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 164px; border-color: #ffffff;\">Questo fa parte della nostra griglia.<\/td>\n<td style=\"width: 164px; border-color: #ffffff;\"><\/td>\n<td style=\"width: 164px; border-color: #ffffff;\"><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<div class=\"spacer\"><\/div>\n<div class=\"row\"><\/div>\n<p>Non \u00e8 necessario definire nulla per i dispositivi di piccole dimensioni, perch\u00e8 l\u2019impostazione predefinita \u00e8 una colonna. Dobbiamo impostare una dimensione della griglia per i dispositivi di piccole dimensioni<strong>, ma non per i dispositivi di medie dimensioni.<\/strong> Questo perch\u00e9 la griglia si innalza. Quindi, se si imposta una dimensione della griglia per sm, md e lg. Noi spiegheremo le diverse dimensioni della griglia e come crearle e mostrarai degli esempi.<\/p>\n<hr \/>\n<h2 class=\"spacer\" style=\"text-align: center;\">\u00a0<strong>Le dimensioni della griglia<\/strong><\/h2>\n<p style=\"text-align: justify;\">Questa \u00e8 la parte migliore del nuovo sistema di griglia. Puoi effettivamente visualizzare la tua griglia su 4 diverse dimensioni del browser. Ecco la ripartizione delle diverse dimensioni.<\/p>\n<div class=\"spacer\"><\/div>\n<div class=\"wp_syntax\">\n<table>\n<tbody>\n<tr>\n<td class=\"code\">\n<pre class=\"php\"><span style=\"font-family: monospace;\"><span style=\"color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">.<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">col<\/span><span style=\"color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">xs<\/span><span style=\"color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-299735e9\" style=\"background-color: rgba(17, 0, 0, 0.15); cursor: inherit;\"><span style=\"font-family: monospace;\">$   Extra small     Telefoni inferiori a 768 px<\/span><\/span> <\/span>         \r\n<span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">.<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">col<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">sm<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">$  Small Devices   Tablet di 768 px e pi\u00f9 grande\r\n<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">.<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">col<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">md<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">$<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">  Medium Devices  Desktop  di 992 px e pi\u00f9 grande<\/span>\r\n<span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">.<\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">col<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">lg<\/span><span style=\"font-family: monospace; color: #339933;\"><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"background-color: rgba(17, 0, 0, 0.15);\">-<\/span><\/span><span class=\"sumo_twilighter_highlighted twilighter-218fab37\" style=\"font-family: monospace; background-color: rgba(17, 0, 0, 0.15);\">$\u00a0 Large Devices\u00a0  Grande Schermo di 1200 px e pi\u00f9 grande<\/span><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<div class=\"spacer\"><\/div>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/getbootstrap.com\/docs\/3.3\/css\/\" target=\"_blank\" rel=\"nofollow\">I documenti Bootstrap ufficiali<\/a> danno una comprensione molto pi\u00f9 completa di come funziona la griglia. Dai un'occhiata a questa pagina per avere una panoramica migliore delle dimensioni delle colonne, delle dimensioni dei ganci, delle dimensioni massime delle colonne e della larghezza massima del sito globale in base alle dimensioni del browser.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\" style=\"text-align: center;\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Dimensioni predefinite per la griglia Bootstrap<\/strong><\/h2>\n<p style=\"text-align: justify;\">A volte dovrai utilizzare le query multimediali per far s\u00ec che il tuo sito funzioni nel modo desiderato. Conoscere le dimensioni della griglia di default \u00e8 essenziale per estendere la griglia Bootstrap. Abbiamo scritto un piccolo suggerimento per mostrarti le dimensioni predefinite, quindi dai un'occhiata se hai bisogno delle query multimediali e dei punti di interruzione Bootstrap.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Bootstrap 3 Media Query Breakpoints<\/strong><\/h2>\n<p style=\"text-align: justify;\">Bootstrap 3 \u00e8 un framework front-end e mobile-first. Ho incluso l'ordine corretto per le Media Queries qui sotto, ma ho anche incluso sotto i primi punti di interruzione non mobili nel caso in cui alcune persone non siano abituate alla metodologia mobile-first dal momento che tecnicamente entrambi funzioneranno. <strong>Min-Width:<\/strong> si riferisce a qualsiasi valore superiore o uguale alla quantit\u00e0 indicata. <strong>Max-Width<\/strong>: si riferisce a tutto ci\u00f2 che \u00e8 inferiore o uguale alla quantit\u00e0 indicata.<\/p>\n<div class=\"spacer\"><\/div>\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;\">\/*==========  Primo metodo mobile ==========*\/<\/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, Telefoni *\/<\/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, Tablet *\/<\/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, Desktop *\/<\/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, Grande Schermo *\/<\/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;\">\/*==========  Metodo non mobile  ==========*\/<\/span>\r\n\u00a0\r\n\t<span style=\"color: #666666; font-style: italic;\">\/* Large Devices, Grande Schermo *\/<\/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, Desktop*\/<\/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, Tablet *\/<\/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, Telefoni *\/<\/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<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 class=\"aligncenter\" style=\"text-align: center;\"><strong>Bootstrap 2.3.2 Punti interrogativi medi<\/strong><\/h2>\n<div class=\"spacer\"><\/div>\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<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Utilit\u00e0 Responsive<\/strong><\/h2>\n<p>Proprio come Bootstrap 2, Bootstrap 3 fornisce utilit\u00e0 responsive per nascondere e visualizzare gli elementi in base alle dimensioni del browser. Questo ci aiuter\u00e0 anche a definire il nostro sistema di rete.<\/p>\n<div class=\"spacer\"><\/div>\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>Questo aiuta perch\u00e9 siamo in grado di mostrare alcuni \u00a0elementi in base alle dimensioni. Nei nostri esempi di oggi, mostreremo una barra laterale aggiuntiva su desktop sui grandi dimensioni.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Esempi<\/strong><\/h2>\n<p style=\"text-align: justify;\">Ecco alcuni esempi delle griglie che puoi creare. Analizzeremo alcuni siti di base che alcune persone potrebbero desiderare e dimostreremo quanto sia facile costruire quel sito con la griglia di Bootstrap 3.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Semplice: grande desktop vs schermo mobile<\/strong><\/h2>\n<p>Supponiamo che tu desideri che un sito abbia una colonna su dispositivi extra-piccoli (telefono) e piccoli (tablet), 2 colonne su dispositivi medi (desktop medio) e 4 colonne su dispositivi di grandi dimensioni (desktop).<\/p>\n<table style=\"background-color: #ffffff; border-color: #ffffff; height: 50px;\" width=\"495\">\n<tbody>\n<tr>\n<td style=\"background-color: #ffffff; text-align: center;\">Grandi dispositivi<\/td>\n<td style=\"background-color: #ffffff; text-align: center;\">Grandi dispositivi<\/td>\n<td style=\"background-color: #ffffff; text-align: center;\">Grandi dispositivi<\/td>\n<td style=\"background-color: #ffffff; border-color: #ffffff; text-align: center; vertical-align: middle;\">Grandi dispositivi<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">Ecco il codice per quell'esempio:<\/p>\n<pre>            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-sm text-primary\"&gt;Small Devices&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-md-6 col-lg-3\"&gt;\r\n                    &lt;div class=\"visible-lg text-success\"&gt;Large Devices!&lt;\/div&gt;\r\n                    &lt;div class=\"visible-md text-warning\"&gt;Medium Devices!&lt;\/div&gt;\r\n                     &lt;div class=\"visible-sm text-primary\"&gt;Small Devices&lt;\/div&gt;\r\n                    &lt;div class=\"visible-xs visible-sm text-danger\"&gt;Extra Small and Small Devices&lt;\/div&gt;\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<div class=\"wp_syntax\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Intermedio: mostra colonna aggiuntiva su desktop di grandi dimensioni<\/strong><\/h2>\n<p>Questo \u00e8 un esempio interessante e eccelente che la nuova griglia eccelle. Supponiamo che tu abbia un sito con una barra laterale e una sezione di contenuto principale. Per dispositivi di piccole dimensioni, si desidera una colonna, il contenuto principale con la barra laterale impilata sotto di essa. Per dispositivi di piccole e medie dimensioni, vogliamo che la barra laterale e il contenuto principale siano affiancati. Ora per dispositivi di grandi dimensioni, vogliamo utilizzare lo spazio su dispositivi pi\u00f9 grandi. Vogliamo aggiungere una barra laterale aggiuntiva per visualizzare pi\u00f9 contenuti. Modifichiamo le dimensioni del contenuto principale per coprire 6 colonne su dispositivi di grandi dimensioni per fare \u00a0lo spazio alla nostra seconda barra laterale. Questo \u00e8 un ottimo modo per utilizzare lo spazio su desktop pi\u00f9 grandi.<\/p>\n<table style=\"background-color: #ffffff; border-color: #ffffff;\">\n<tbody>\n<tr>\n<td style=\"background-color: #ffffff; border-color: #ffffff;\">Contenuto Principale<\/td>\n<td style=\"background-color: #ffffff; border-color: #ffffff;\">Barra laterale principale<\/td>\n<td style=\"background-color: #ffffff; border-color: #ffffff; text-align: center;\">Barra laterale aggiuntiva,<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #ffffff; border-color: #ffffff;\"><\/td>\n<td style=\"background-color: #ffffff; border-color: #ffffff;\"><\/td>\n<td style=\"background-color: #ffffff; border-color: #ffffff; text-align: center;\">\u00a0che appare solo su dispositivi Large.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">Ed ecco il codice per questo esempio.<\/p>\n<pre> &lt;div class=\"row\"&gt;\r\n  &lt;div class=\"col-sm-9 col-lg-6 text-danger\"&gt;\r\n   G\u0142\u00f3wna tre\u015b\u0107.\r\n     &lt;\/div&gt;\r\n      &lt;div class=\"col-sm-3 text-warning\"&gt;\r\n        G\u0142\u00f3wny pasek boczny.\r\n          &lt;\/div&gt;\r\n           &lt;div class=\"col-lg-3 visible-lg text-success\"&gt;\r\n     Una barra laterale aggiuntiva che appare solo su dispositivi Large.\r\n            &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<div class=\"row\"><\/div>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<div class=\"spacer\"><\/div>\n<h2 style=\"text-align: center;\"><strong>Avanzato: griglia diversa per ogni dimensione<\/strong><\/h2>\n<p>Questo sar\u00e0 un esempio pi\u00f9 complesso. Diciamo che in nessun punto del nostro sistema di rete vogliamo impilare tutte le nostre colonne. Per dispositivi molto piccoli, vogliamo 2 colonne. Per dispositivi di piccole dimensioni, vogliamo 3 colonne. Per dispositivi di medie dimensioni, vogliamo 4 colonne. Per dispositivi di grandi dimensioni, vogliamo 6 colonne (una che viene visualizzata solo su dispositivi di grandi dimensioni).<\/p>\n<table style=\"background-color: #ffffff; border-color: #ffffff; width: 639px;\">\n<tbody>\n<tr>\n<td style=\"border-color: #ffffff; background-color: #ffffff; width: 67px; text-align: center;\">Contenuto!<\/td>\n<td style=\"width: 67px; text-align: center;\">Contenuto!<\/td>\n<td style=\"width: 67px; text-align: center;\">Contenuto!<\/td>\n<td style=\"width: 68px; text-align: center;\">Contenuto!<\/td>\n<td style=\"width: 68px; text-align: center;\">Contenuto!<\/td>\n<td style=\"width: 13px; text-align: center;\">Contenuto, visibile solo su dispositivi di grandi dimensioni!<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">Il codice sar\u00e0 simile a questo:<\/p>\n<pre>            &lt;div class=\"row\"&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    Tre\u015b\u0107!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    Tre\u015b\u0107!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    Tre\u015b\u0107!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    Tre\u015b\u0107!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2\"&gt;\r\n                    Tre\u015b\u0107!\r\n                &lt;\/div&gt;\r\n                &lt;div class=\"col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg\"&gt;\r\n               Contenuto, visibile solo su dispositivi di grandi dimensioni!\r\n                &lt;\/div&gt;\r\n            &lt;\/div&gt;\r\n<\/pre>\n<p style=\"text-align: justify;\">Puoi vedere che quando le dimensioni del browser si riducono, le colonne iniziano a formarsi. Inoltre, il contenuto all'interno di ciascuna inizier\u00e0 a impilare.<\/p>\n<div class=\"spacer\"><\/div>\n<hr \/>\n<h2 style=\"text-align: center;\"><strong>\u00c8 Gridtactic!<\/strong><\/h2>\n<p>Puoi vedere quanto \u00e8 facile \u00a0creare siti complessi e dinamici con la griglia Bootstrap 3. Dai siti mobili a 2 colonne a complessi nascondigli e visualizzando gli elementi su desktop di grandi dimensioni, \u00e8 possibile creare qualsiasi tipo di sito. Speriamo che questi esempi ti diano un'idea della flessibilit\u00e0 del nuovo sistema di griglia e di tutte le grandi cose che puoi creare.<\/p>\n<p><strong>Happy Coding J.<\/strong><\/p>\n<p style=\"text-align: justify;\">Se\u00a0 disponi gi\u00e0 di un sito web basato su HTML con un pannello di amministrazione esistente, \u00e8 possibile rivedere i nostri <a href=\"https:\/\/www.templatemonster.com\/it\/type\/admin-templates\/\" target=\"_blank\">temi di amministrazione Bootstrap creati con la funzionalit\u00e0 Bootstrap.<\/a> Questi <a href=\"https:\/\/www.templatemonster.com\/it\/temi-bootstrap\/\" target=\"_blank\">temi di bootstrap <\/a>ti mostreranno tutta la potenza di Bootstrap 3!<\/p>\n<div class=\"mistape_caption\">\n<p style=\"text-align: center;\">***<\/p>\n<p style=\"text-align: center;\"><em>Questo articolo \u00e8 stato tradotto da inglese. L\u2019originale puoi trovare qui:\u00a0<a href=\"https:\/\/www.templatemonster.com\/blog\/bootstrap-3-grid-system-guide\/\" target=\"_blank\">Bootstrap 3: The Grid System and Media Queries\u00a0<\/a><\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Conosciamo tutti Bootstrap, perch\u00e8 \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati. Quando \u00e8 stato publicato Bootstrap 3, il cambiamento pi\u00f9 interessante \u00e8 stata la differenza nei sistemi di griglia. Bootstrap 2 si adattava a due diverse dimensioni del browser [&hellip;]<\/p>\n","protected":false},"author":1806027,"featured_media":3702,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,135],"tags":[150,151,136],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.11 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Bootstrap 3: il sistema di griglia e le query multimediali<\/title>\n<meta name=\"description\" content=\"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.\" \/>\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\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bootstrap 3: il sistema di griglia e le query multimediali\" \/>\n<meta property=\"og:description\" content=\"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\" \/>\n<meta property=\"og:site_name\" content=\"TemplateMonster Blog Italia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TemplateMonster.italia\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-11-09T10:42:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2018\/11\/Bootstrap-00.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=\"Natalia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:site\" content=\"@templatemonster\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Natalia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\"},\"author\":{\"name\":\"Natalia\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d\"},\"headline\":\"Bootstrap 3: il sistema di griglia e le query multimediali\",\"datePublished\":\"2018-11-09T10:42:39+00:00\",\"dateModified\":\"2018-11-09T10:42:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\"},\"wordCount\":1123,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\"},\"keywords\":[\"Bootstrap\",\"Browser\",\"Codifica\"],\"articleSection\":[\"Tutorial\",\"Web Development\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\",\"url\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\",\"name\":\"Bootstrap 3: il sistema di griglia e le query multimediali\",\"isPartOf\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#website\"},\"datePublished\":\"2018-11-09T10:42:39+00:00\",\"dateModified\":\"2018-11-09T10:42:39+00:00\",\"description\":\"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.\",\"breadcrumb\":{\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/monsterspost.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Bootstrap 3: il sistema di griglia e le query multimediali\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/monsterspost.com\/it\/#website\",\"url\":\"https:\/\/monsterspost.com\/it\/\",\"name\":\"TemplateMonster Blog Italia\",\"description\":\"Just another MonsterPost Sites site\",\"publisher\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/monsterspost.com\/it\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/monsterspost.com\/it\/#organization\",\"name\":\"MonsterPost Italia\",\"url\":\"https:\/\/monsterspost.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png\",\"contentUrl\":\"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png\",\"width\":180,\"height\":180,\"caption\":\"MonsterPost Italia\"},\"image\":{\"@id\":\"https:\/\/monsterspost.com\/it\/#\/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\/TemplateMonster.italia\/\",\"https:\/\/twitter.com\/templatemonster\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d\",\"name\":\"Natalia\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/monsterspost.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?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\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g\",\"caption\":\"Natalia\"},\"description\":\"A freelance copywriter, who has a great interest in writing, content-related stuff, traveling, and photography. She is always mastering her writing skills to synthesize the essence of any business ideology in an easy-to-use nugget of words to get people to feel, think, or respond. Instagram.\",\"url\":\"https:\/\/monsterspost.com\/it\/author\/natalia\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bootstrap 3: il sistema di griglia e le query multimediali","description":"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.","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\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/","og_locale":"it_IT","og_type":"article","og_title":"Bootstrap 3: il sistema di griglia e le query multimediali","og_description":"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.","og_url":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/","og_site_name":"TemplateMonster Blog Italia","article_publisher":"https:\/\/www.facebook.com\/TemplateMonster.italia\/","article_published_time":"2018-11-09T10:42:39+00:00","og_image":[{"width":900,"height":538,"url":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2018\/11\/Bootstrap-00.jpg","type":"image\/jpeg"}],"author":"Natalia","twitter_card":"summary_large_image","twitter_creator":"@templatemonster","twitter_site":"@templatemonster","twitter_misc":{"Scritto da":"Natalia","Tempo di lettura stimato":"8 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#article","isPartOf":{"@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/"},"author":{"name":"Natalia","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d"},"headline":"Bootstrap 3: il sistema di griglia e le query multimediali","datePublished":"2018-11-09T10:42:39+00:00","dateModified":"2018-11-09T10:42:39+00:00","mainEntityOfPage":{"@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/"},"wordCount":1123,"commentCount":0,"publisher":{"@id":"https:\/\/monsterspost.com\/it\/#organization"},"keywords":["Bootstrap","Browser","Codifica"],"articleSection":["Tutorial","Web Development"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/","url":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/","name":"Bootstrap 3: il sistema di griglia e le query multimediali","isPartOf":{"@id":"https:\/\/monsterspost.com\/it\/#website"},"datePublished":"2018-11-09T10:42:39+00:00","dateModified":"2018-11-09T10:42:39+00:00","description":"Bootstrap \u00e8 il framework web open source pi\u00f9 popolare. Mark Otto e Jacob Thorton hanno creato uno dei pi\u00f9 potenti framework CSS mai progettati.","breadcrumb":{"@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/monsterspost.com\/it\/bootstrap-3-il-sistema-di-griglia-e-le-query-multimediali\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/monsterspost.com\/it\/"},{"@type":"ListItem","position":2,"name":"Bootstrap 3: il sistema di griglia e le query multimediali"}]},{"@type":"WebSite","@id":"https:\/\/monsterspost.com\/it\/#website","url":"https:\/\/monsterspost.com\/it\/","name":"TemplateMonster Blog Italia","description":"Just another MonsterPost Sites site","publisher":{"@id":"https:\/\/monsterspost.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/monsterspost.com\/it\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/monsterspost.com\/it\/#organization","name":"MonsterPost Italia","url":"https:\/\/monsterspost.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png","contentUrl":"https:\/\/monsterspost.com\/it\/wp-content\/uploads\/sites\/7\/2020\/03\/Logo-TM.png","width":180,"height":180,"caption":"MonsterPost Italia"},"image":{"@id":"https:\/\/monsterspost.com\/it\/#\/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\/TemplateMonster.italia\/","https:\/\/twitter.com\/templatemonster"]},{"@type":"Person","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/4ab7691ed51077c6a15c92452722844d","name":"Natalia","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/monsterspost.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/aeb0ab46ce12e644bbacc90b90035ca8?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\/aeb0ab46ce12e644bbacc90b90035ca8?s=96&d=https%3A%2F%2Fwww.templatemonster.com%2Fblog%2Fwp-content%2Fthemes%2Fredesign%2Fimages%2Fdefault_avatar.jpg&r=g","caption":"Natalia"},"description":"A freelance copywriter, who has a great interest in writing, content-related stuff, traveling, and photography. She is always mastering her writing skills to synthesize the essence of any business ideology in an easy-to-use nugget of words to get people to feel, think, or respond. Instagram.","url":"https:\/\/monsterspost.com\/it\/author\/natalia\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3495"}],"collection":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/users\/1806027"}],"replies":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/comments?post=3495"}],"version-history":[{"count":47,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3495\/revisions"}],"predecessor-version":[{"id":3765,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/posts\/3495\/revisions\/3765"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/media\/3702"}],"wp:attachment":[{"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/media?parent=3495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/categories?post=3495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monsterspost.com\/it\/wp-json\/wp\/v2\/tags?post=3495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}