{"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:\/\/seven.addlance.com\/beta\/blog\/responsive-web-design-bootstrap\/","title":{"rendered":"Responsive Web Design, Bootstrap 3 vs 4 Spiegato in 11 Punti"},"content":{"rendered":"<p><strong><img 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:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-300x200.jpg 300w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-1024x684.jpg 1024w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-768x513.jpg 768w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-610x407.jpg 610w, https:\/\/seven.addlance.com\/beta\/blog\/wp-content\/uploads\/2018\/06\/responsive-web-design-1080x721.jpg 1080w, https:\/\/seven.addlance.com\/beta\/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":""},"categories":[17,16],"tags":[18,31],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/4117"}],"collection":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/comments?post=4117"}],"version-history":[{"count":1,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/4117\/revisions"}],"predecessor-version":[{"id":10929,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/posts\/4117\/revisions\/10929"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media\/4159"}],"wp:attachment":[{"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/media?parent=4117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/categories?post=4117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/seven.addlance.com\/beta\/blog\/wp-json\/wp\/v2\/tags?post=4117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}