{"id":4117,"date":"2018-07-09T11:27:21","date_gmt":"2018-07-09T09:27:21","guid":{"rendered":"https:\/\/www.addlance.com\/blog\/?p=4117"},"modified":"2021-02-17T23:34:46","modified_gmt":"2021-02-17T22:34:46","slug":"responsive-web-design-bootstrap","status":"publish","type":"post","link":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/","title":{"rendered":"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti"},"content":{"rendered":"<p><strong><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-4159 size-medium\" title=\"responsive web design bootstrap\" src=\"https:\/\/www.addlance.com\/wp-content\/uploads\/2018\/06\/responsive-web-design-300x200.jpg\" alt=\"\" width=\"300\" height=\"200\" srcset=\"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-300x200.jpg 300w, https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-1024x684.jpg 1024w, https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-768x513.jpg 768w, https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-610x407.jpg 610w, https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-1080x721.jpg 1080w, https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg 1200w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/>Bootstrap <\/strong>nasce nel <strong>2010 <\/strong>come progetto interno al social <strong>Twitter<\/strong>. Data la sua forte <strong>efficacia <\/strong>ed il suo utilizzo <strong>semplice <\/strong>ed <strong>intuitivo <\/strong>\u00e8 stato poi reso <strong>indipendente <\/strong>e <strong>fruibile <\/strong>per <strong>tutti<\/strong>. Esso \u00e8 infatti ad oggi il <strong>framework pi\u00f9 utilizzato al mondo<\/strong> per la creazione di <strong>interfacce <a href=\"https:\/\/www.addlance.com\/s\/web-design\"><em>web responsive<\/em><\/a><\/strong>, ovvero in grado di adattarsi automaticamente a tutti gli schermi e presenti ad oggi.<\/p>\n<p>La sua definizione \u00e8 <em>&#8220;HTML, CSS, and JS toolkit from Twitter&#8221;,<\/em> ovvero un insieme di <strong>strumenti grafici<\/strong>, di <strong>impaginazione <\/strong>e <strong>stilistici <\/strong>che aiutano gli sviluppatori (e non) a raggiungere le loro esigenze mediante l&#8217;utilizzo delle <strong>funzionalit\u00e0 <\/strong>e <strong>stili <\/strong>forniti da Bootstrap stesso.<\/p>\n<p><!--more--><\/p>\n<p>Bootstrap \u00e8 <strong>compatibile <\/strong>con tutti i <strong>moderni browser<\/strong> e viene utilizzato principalmente per la sua funzione di spicco: il <strong>Responsive Web Design<\/strong>. Per Responsive Web Design si intende la <em>capacit\u00e0 di adattare il design di un sito web in modo dinamico a seconda della grandezza e delle caratteristiche del dispositivo utilizzato<\/em>.<\/p>\n<p>Grazie a queste caratteristiche esso viene considerato il miglior framework <strong>multi dispositivo <\/strong>e <b>multi-piattaforma<\/b>.<\/p>\n<p>&nbsp;<\/p>\n<h2>Responsive Web Design, ecco le componenti principali di Bootstrap<\/h2>\n<ul>\n<li><strong>Grid System:<\/strong> ovvero un insieme di fogli che considerano il contenitore generale disposto su una griglia con una larghezza base di <strong>960px<\/strong>, nella quale distribuire i contenuti in varie <strong>righe <\/strong>e <strong>colonne<\/strong>, che definiranno il layout, ovvero la struttura base del sito.<\/li>\n<li><strong>CSS Base:<\/strong> contiene una serie di <strong>stili predefiniti <\/strong>riguardanti tutta la parte <strong>tipografica<\/strong>, ovvero la parte riguardante i titoli (H1, H2, &#8230;) e la gestione di <strong>tabelle<\/strong>, <strong>paragrafi<\/strong>, <strong>form <\/strong>e anche <strong>pulsanti <\/strong>per richiamare stili e icone <strong>pronti all&#8217;uso<\/strong>.<\/li>\n<li><strong>Componenti e javascript:<\/strong> ovvero elementi come <strong>men\u00f9 dropdown<\/strong>, <strong>interfacce a<\/strong> <strong>tab<\/strong>, <strong>tooltip<\/strong>, <strong>alert<\/strong>, <strong>menu ad accordion<\/strong>, <strong>slider<\/strong>, <strong>banner di navigazione<\/strong>, PopOver che ci aiutano nell&#8217;implementazione degli <em>elementi dinamici della pagina senza la necessit\u00e0 di scrivere codice Javascript<\/em> grazie alla presenza dei <strong>data attributes<\/strong>, che Bootstrap interpreta e gestisce senza nessun intervento da parte dello sviluppatore.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Le principali versioni di Bootstrap<\/h2>\n<p>L&#8217;ultima versione stabile \u00e8 stata rilasciata nel <strong>luglio 2016<\/strong> con Bootstrap <strong>v3.3.7<\/strong>, mentre solo nell&#8217;<strong>agosto 2017<\/strong> viene rilasciata la versione beta di <strong>Bootstrap 4.0.0<\/strong>. Queste tempistiche giustificano una forte attenzione da parte del team di sviluppo di Bootstrap nel fornire un sistema <strong>sicuro ed affidabile<\/strong>. Tuttavia ancora oggi, quasi un anno dopo la <em>release<\/em> beta di Bootstrap 4, rimane ancora forte il dubbio relativo al passaggio dalla versione 3, ormai consolidata, alla versione 4.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<h2>Bootstap 4, cosa offre rispetto a Bootstrap 3? Tutto in 11 punti<\/h2>\n<p>L&#8217;ultima versione beta di Bootstrap 4 \u00e8 stata rilasciata dopo 2 anni, il <strong>10 agosto 2017<\/strong>. Alcuni hanno definito questa versione una semplice riscrittura della precedente, ma in seguito vengono elencate le reali differenze tra la versione 3 e la versione 4:<\/p>\n<h3>#1 Navigazione<\/h3>\n<p>In Bootstrap 4, il componente di <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/migration\/#navs\">navigazione<\/a> \u00e8 stato semplificato in larga misura. \u00c8 necessario creare un nuovo elenco di elementi che impiegano la classe di base <em>nav<\/em>. \u00a0Ci sono anche alcune aggiunte recenti come la classe <strong>nav-link<\/strong>, la classe <strong>nav-item<\/strong> e gli <em>stili della barra di navigazione<\/em>.<\/p>\n<h3>#2 Aspetto<\/h3>\n<p>Sebbene non ci siano cambiamenti drastici nell&#8217;aspetto, ci sono alcuni cambiamenti da tenere in considerazione, come la dimensione dei <em>font<\/em> alterata, il colore di contesto primario e il colore di sfondo principale.<\/p>\n<p>Inoltre, il <em>framework<\/em> Bootstrap 4 non viene pi\u00f9 fornito assieme a <a href=\"http:\/\/glyphicons.com\/\"><strong>Glyphicons<\/strong><\/a>, ovvero un sistema di icone preimpostato, il quale semplifica l&#8217;utilizzo e le tempistiche di creazione di icone. Questa decisione rende il framework pi\u00f9 <strong>leggero<\/strong>, ma obbliga chi lo utilizza ad adottare <em>soluzioni alternative<\/em>.<\/p>\n<h3>#3 Il sistema Reboot<\/h3>\n<p>Bootstrap 3 utilizza <a href=\"https:\/\/necolas.github.io\/normalize.css\/\">Normalize.css<\/a> per rendere l&#8217;aspetto di tutti gli elementi HTML coerente tra i vari <em>devices<\/em> e <em>browser<\/em>. Bootstrap 4 ha adottato una versione migliorata di Normalize.css, denominata <a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/content\/reboot\/\"><strong>Reboot<\/strong><\/a>, la quale apporta notevoli migliorie al sistema precedente.<\/p>\n<h3>#4 Grid system<\/h3>\n<p>Bootstrap 4 pone molta enfasi sulla <strong>personalizzazione<\/strong>, infatti il nuovo sistema <strong><em>grid<\/em><\/strong> \u00a0permette la creazione di griglie con al massimo <strong>5 file<\/strong>, creando cosi un sistema <em>grid <\/em>migliorato rispetto alla versione precedente.<\/p>\n<p>Inoltre esso utilizza il nuovissimo sistema <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\"><strong>css grid<\/strong><\/a>.<\/p>\n<h3>#5 Flexbox<\/h3>\n<p><strong>Flexbox <\/strong>\u00e8 un modello di <em>layout<\/em> che consente la formazione di <em>layout <\/em>complessi con facilit\u00e0. Pu\u00f2 essere utilizzato per ridimensionare elementi o applicare capacit\u00e0 <em>responsive <\/em>avanzate, sia orizzontali che verticali. Non sostituisce il <em>layout<\/em> di pagina gi\u00e0 esistente. Questa \u00e8 una delle migliorie principali apportate dall&#8217;ultima versione di Bootstrap, e forse il principale motivo per utilizzarlo.<\/p>\n<h3>#6 Form control<\/h3>\n<p>Bootstrap 4 offre un controllo migliore dei <em>form<\/em> utilizzati. Esso fornisce infatti una validazione migliorata dei campi utilizzati oltre ad una vasta gamma di nuovi moduli avanzati, sotto forma di caselle di controllo personalizzate e ingressi radio.<\/p>\n<h3>#7 Dropdown<\/h3>\n<p>Nella versione 4, la classe <strong><em>dropdown<\/em><\/strong> deve essere applicata a ogni <em>input<\/em> di tipo <em>dropdown<\/em>. Il simbolo <em>caret<\/em> viene aggiunto in modo automatico ai pulsanti a discesa che sono stati creati utilizzando la nuova classe <em>dropdown.<\/em><\/p>\n<h3>#8 Paginazione<\/h3>\n<p>In Bootstrap 3 \u00e8 stata creata una componente di impaginazione applicando la classe di impaginazione a qualsiasi elemento <strong><em>ul<\/em><\/strong>. Ora Bootstrap 4 ne richiede solamente uno per indicare correttamente l&#8217;impaginazione e collegare gli elementi utilizzando le classi <strong>page-item<\/strong> e <strong>page-link<\/strong>. Questa miglioria permette una maggiore versatilit\u00e0 nell&#8217;utilizzo di componenti HTML per la creazione di sistemi di paginazione.<\/p>\n<h3>#9 Plugins<\/h3>\n<p>Come in Bootstrap 3, le componenti erano divise in due categorie, ovvero una sezione dedicata agli stili (<strong>CSS<\/strong>) ed una agli <em>script<\/em> (<strong>Javascript<\/strong>). Non ci sono cambiamenti significativi su come le componenti sono compilate in Bootstrap 4. Nell&#8217;ultima versione, le regole di stile sono composte usando <a href=\"https:\/\/it.wikipedia.org\/wiki\/Sass\"><strong>SASS<\/strong><\/a>. Mentre i plug-in sono disponibili sotto l&#8217;oggetto <strong>jQuery<\/strong> <strong>globale<\/strong>.<\/p>\n<h3>#10 Browser support<\/h3>\n<p>Bootstrap 4 offre supporto a tutti i principali e rinomati <em>browser<\/em>, come <strong>Safari<\/strong>, <strong>Chrome<\/strong>, <strong>Opera <\/strong>e <strong>Internet Explorer<\/strong> (i8 e superiori).<\/p>\n<h3>#11 Classi di utilit\u00e0<\/h3>\n<p>In Bootstrap 4 sono state incluse nuove classi di utilit\u00e0 senza ostacolare alcuna funzionalit\u00e0 esistente. Le aggiunte pi\u00f9 importanti riguardano le <strong>classi <em>responsive<\/em> <\/strong>e di <strong>allineamento del testo<\/strong>, <strong><em>float responsive<\/em> <\/strong>e <strong>incorporamento <em>responsive<\/em><\/strong><em>.<\/em> Oltre a offrire molte scorciatoie, queste utilit\u00e0 consentono di modificare l&#8217;allineamento del testo, il galleggiamento degli elementi e il ridimensionamento delle proporzioni di qualsiasi media incorporata (e.g. <em>form <\/em>di terze parti o altre componenti).<\/p>\n<h2>Tabella comparativa: Bootstrap 3 vs Bootstrap 4<\/h2>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<table class=\" aligncenter\" width=\"593\">\n<tbody>\n<tr>\n<td width=\"199\"><strong>Parametro<\/strong><\/td>\n<td width=\"197\"><strong>Bootstrap 3<\/strong><\/td>\n<td width=\"197\"><strong>Bootstrap 4<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>CSS file sorgente<\/em><\/td>\n<td width=\"197\">LESS<\/td>\n<td width=\"197\">SASS<\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>File per griglia<\/em><\/td>\n<td width=\"197\">4 file grid system<\/td>\n<td width=\"197\">5 file grid system<\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>Struttura Dropdown<\/em><\/td>\n<td width=\"197\">possono essere create con &lt;ul&gt; e &lt;li&gt;<\/td>\n<td width=\"197\">possono essere create con &lt;ul&gt; o &lt;div&gt;<\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>Paginazione di Default<\/em><\/td>\n<td width=\"197\">la classe <strong>.pagination<\/strong> deve essere aggiunta all&#8217;elemento &lt;ul&gt;<\/td>\n<td width=\"197\">la classe <strong>.page-item<\/strong> deve essere aggiunta all&#8217;elemento &lt;li&gt; e la classe <strong>.page-link<\/strong> all&#8217;elemento &lt;a&gt;<\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>Immagini Responsive<\/em><\/td>\n<td width=\"197\">classe <strong>.img-responsive<\/strong><\/td>\n<td width=\"197\">classe <strong>.img-fluid<\/strong><\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>Responsive Tables<\/em><\/td>\n<td width=\"197\">classe <strong>.table-responsive<\/strong> da aggiungere sull&#8217;elemento &lt;div&gt; padre<\/td>\n<td width=\"197\">classe <strong>.table-responsive<\/strong> da aggiungere sull&#8217;elemento &lt;table&gt; padre<\/td>\n<\/tr>\n<tr>\n<td width=\"199\"><em>Allineamento della Navbar<\/em><\/td>\n<td width=\"197\">necessario utilizzare le classi <strong>.navbar-right, .navbar-left<\/strong> per allineare i componenti<\/td>\n<td width=\"197\">necessario utilizzare le utilities come <strong>.mr-auto<\/strong>, o mediante l&#8217;utilizzo delle utilities di allineamento <strong>flexbox<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2>Responsive Web Design, meglio Bootstrap 3 o Bootstrap 4?<\/h2>\n<p>Arrivati a questo punto non resta altro che decidere quale versione utilizzare. Personalmente ritengo che Bootstrap 4 sia la migliore, per il semplice fatto che utilizza il <strong>sistema Flexbox<\/strong>, il quale alleggerisce e rende molto pi\u00f9 efficiente Boostrap stesso. Questa migrazione \u00e8 da considerarsi come un grandissimo risultato per questo sistema. Ricapitolando rispetto alla versione precedente la versione 4 offre le seguenti migliorie:<\/p>\n<ul>\n<li>Griglie basate sul sistema Flexbox<\/li>\n<li>Griglie con auto-layout di ultima generazione<\/li>\n<li>Possibilit\u00e0 di <em>customizzare<\/em> le <em>navbar<\/em><\/li>\n<li>Nuove <em>utilities <\/em>di <em>spacing<\/em><\/li>\n<li>Assenza di sistemi <em>font<\/em> come Glyphicons<\/li>\n<li>Dimensionamento <em>responsive<\/em><\/li>\n<li>Elementi galleggianti (e.g. Modali) <em>responsive<\/em><\/li>\n<li>Auto Margini<\/li>\n<li>Centratura verticale<\/li>\n<\/ul>\n<p>Se vuoi creare dei sistemi <strong>moderni ed efficaci<\/strong>, in linea con le ultime tecnologie, non ti resta che utilizzare <strong>Bootstrap 4<\/strong>, altrimenti se preferisci mantenere le vecchie abitudini o semplicemente non vuoi rischiare \u201ccomportamenti anomali\u201d, Boostrap 3 \u00e8 ci\u00f2 che fa per te.<\/p>\n<p><em>Guest post a cura di Nicola Castellani<\/em><\/p>\n<p>&nbsp;    \t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Web Design, \u00e8 meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce web responsiv<\/p>\n","protected":false},"author":5,"featured_media":4159,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[17,16],"tags":[18,31],"class_list":["post-4117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programmazione","category-web-design","tag-programmazione","tag-web-design"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Responsive Web Design, B3 vs B4 in 11 Punti<\/title>\n<meta name=\"description\" content=\"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Responsive Web Design, B3 vs B4 in 11 Punti\" \/>\n<meta property=\"og:description\" content=\"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/\" \/>\n<meta property=\"og:site_name\" content=\"AddLance Blog Caf\u00e9\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-09T09:27:21+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-02-17T22:34:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"801\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Guest Post\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Guest Post\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/\"},\"author\":{\"name\":\"Guest Post\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/#\\\/schema\\\/person\\\/f20b36d12c64ebc5560dc04b5b75e1a5\"},\"headline\":\"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti\",\"datePublished\":\"2018-07-09T09:27:21+00:00\",\"dateModified\":\"2021-02-17T22:34:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/\"},\"wordCount\":1279,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/responsive-web-design.jpg\",\"keywords\":[\"Programmazione\",\"Web Design\"],\"articleSection\":[\"Articoli su Programmazione\",\"Articoli su Web Design\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/\",\"url\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/\",\"name\":\"Responsive Web Design, B3 vs B4 in 11 Punti\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/responsive-web-design.jpg\",\"datePublished\":\"2018-07-09T09:27:21+00:00\",\"dateModified\":\"2021-02-17T22:34:46+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/#\\\/schema\\\/person\\\/f20b36d12c64ebc5560dc04b5b75e1a5\"},\"description\":\"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/responsive-web-design.jpg\",\"contentUrl\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/06\\\/responsive-web-design.jpg\",\"width\":1200,\"height\":801},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/responsive-web-design-bootstrap\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/\",\"name\":\"AddLance Blog Caf\u00e9\",\"description\":\"Trova freelance italiani online\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/#\\\/schema\\\/person\\\/f20b36d12c64ebc5560dc04b5b75e1a5\",\"name\":\"Guest Post\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g\",\"caption\":\"Guest Post\"},\"url\":\"https:\\\/\\\/www.addlance.com\\\/blog\\\/author\\\/guest-post\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Responsive Web Design, B3 vs B4 in 11 Punti","description":"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive","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:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/","og_locale":"it_IT","og_type":"article","og_title":"Responsive Web Design, B3 vs B4 in 11 Punti","og_description":"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive","og_url":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/","og_site_name":"AddLance Blog Caf\u00e9","article_published_time":"2018-07-09T09:27:21+00:00","article_modified_time":"2021-02-17T22:34:46+00:00","og_image":[{"width":1200,"height":801,"url":"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg","type":"image\/jpeg"}],"author":"Guest Post","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Guest Post","Tempo di lettura stimato":"6 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#article","isPartOf":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/"},"author":{"name":"Guest Post","@id":"https:\/\/www.addlance.com\/blog\/#\/schema\/person\/f20b36d12c64ebc5560dc04b5b75e1a5"},"headline":"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti","datePublished":"2018-07-09T09:27:21+00:00","dateModified":"2021-02-17T22:34:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/"},"wordCount":1279,"commentCount":0,"image":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg","keywords":["Programmazione","Web Design"],"articleSection":["Articoli su Programmazione","Articoli su Web Design"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/","url":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/","name":"Responsive Web Design, B3 vs B4 in 11 Punti","isPartOf":{"@id":"https:\/\/www.addlance.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#primaryimage"},"image":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#primaryimage"},"thumbnailUrl":"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg","datePublished":"2018-07-09T09:27:21+00:00","dateModified":"2021-02-17T22:34:46+00:00","author":{"@id":"https:\/\/www.addlance.com\/blog\/#\/schema\/person\/f20b36d12c64ebc5560dc04b5b75e1a5"},"description":"Responsive Web Design, meglio usare Bootstrap 3 o Bootstrap 4? Scoprilo in questo articolo sul framework pi\u00f9 usato per la creazione di interfacce Web responsive","breadcrumb":{"@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#primaryimage","url":"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg","contentUrl":"https:\/\/www.addlance.com\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design.jpg","width":1200,"height":801},{"@type":"BreadcrumbList","@id":"https:\/\/www.addlance.com\/blog\/responsive-web-design-bootstrap\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.addlance.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti"}]},{"@type":"WebSite","@id":"https:\/\/www.addlance.com\/blog\/#website","url":"https:\/\/www.addlance.com\/blog\/","name":"AddLance Blog Caf\u00e9","description":"Trova freelance italiani online","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.addlance.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Person","@id":"https:\/\/www.addlance.com\/blog\/#\/schema\/person\/f20b36d12c64ebc5560dc04b5b75e1a5","name":"Guest Post","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b1d0fd2536027fcd08c8f2e4a1fce43856aa81547d3845d9bfe5e4c7d7854c9?s=96&d=mm&r=g","caption":"Guest Post"},"url":"https:\/\/www.addlance.com\/blog\/author\/guest-post\/"}]}},"_links":{"self":[{"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/posts\/4117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/comments?post=4117"}],"version-history":[{"count":1,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/posts\/4117\/revisions"}],"predecessor-version":[{"id":10929,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/posts\/4117\/revisions\/10929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/media\/4159"}],"wp:attachment":[{"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/media?parent=4117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/categories?post=4117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.addlance.com\/blog\/wp-json\/wp\/v2\/tags?post=4117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}