Progettazione di siti Web reattivi con Bootstrap

Bootstrap è un diffuso framework HTML, CSS e JavaScript gratuito per lo sviluppo di siti Web reattivi per dispositivi mobili. Il framework include modelli CSS e HTML reattivi per pulsanti, tabelle, elementi di navigazione, caroselli di immagini e altri elementi che è possibile utilizzare nelle pagine Web. Sono disponibili alcuni plug-in JavaScript aggiuntivi, che consentono anche agli sviluppatori meno esperti di creare siti Web reattivi di grande impatto.

Dreamweaver consente di creare documenti Bootstrap e anche di modificare pagine Web esistenti create con Bootstrap. Con Dreamweaver potete modificare sia i file di progetti Bootstrap completi sia quelli ancora in corso d’opera; non solo potete modificare il codice, ma anche sfruttare le funzioni di modifica visiva quali la modifica nella vista Dal vivo, CSS Designer, media query visive ed Extract.

Sto utilizzando griglie fluide in Dreamweaver. Come posso iniziare a usare Bootstrap?

Quando avete creato documenti a griglia fluida, Dreamweaver ha reso le pagine reattive applicando automaticamente le classi appropriate. Non avete dovuto fare altro che concentrarvi sul contenuto e decidere come devono riadattarsi nei diversi fattori di forma.

Analogamente, nei documenti Bootstrap, dovete solo concentrarvi su contenuto e progettazione, mentre la reattività della pagina Web è gestita da Dreamweaver, che è strettamente integrato con il framework Bootstrap.

Dreamweaver supporta attualmente le versioni 3.4.1 e 4.4.1 di Bootstrap:

“Bootstrap 3.4.1 include un sistema a griglia fluida per dispositivi mobili, reattivo che può essere opportunamente scalato fino a 12 colonne all’aumentare delle dimensioni del dispositivo o del riquadro di visualizzazione. Include classi predefinite per opzioni di layout semplici, nonché potenti combinazioni per la generazione di più layout semantici”. - Documentazione Bootstrap.

“Bootstrap 4.4.1, nel quale sono state implementate modifiche sostanziali, include una griglia flexbox per dispositivi mobili che si ridimensiona grazie a un sistema a dodici colonne per creare layout di tutte le forme, cinque livelli di risposta predefiniti, variabili e mixin Sass e diverse classi predefinite”. - Documentazione Bootstrap.

Per iniziare a utilizzare documenti Bootstrap in Dreamweaver, è consigliabile utilizzare Modelli campione di Bootstrap. Dreamweaver include una serie di modelli pensati per diversi tipi di siti Web che è possibile creare, ad esempio e-commerce o portfolio.

Posso migrare documenti a griglia fluida esistenti in documenti Bootstrap in Dreamweaver?

No, non c’è un metodo diretto di conversione di documenti a griglia fluida esistenti in documenti Bootstrap. Tuttavia, l’esperienza dell’utente in Dreamweaver durante la creazione e la progettazione di documenti Bootstrap è simile a quella di documenti a griglia fluida. Ad esempio, potete iniziare creando un documento Bootstrap direttamente dalla finestra di dialogo Nuovo documento. Durante la creazione di documenti a griglia fluida per tre fattori di forma base, Mobile, Tablet e Desktop, per Bootstrap, iniziate creando un documento per le dimensioni di schermo di base: piccole, medie, grandi e molto grandi. Le opzioni di modifica del layout che vengono visualizzate quando fate clic sugli elementi nei documenti Bootstrap sono simili a quelle dei documenti a griglia fluida.

Posso importare siti datati nella versione più recente di Dreamweaver?

Sì, potete importare siti datati nella versione più recente di Dreamweaver. Quando aprite il sito in Dreamweaver, il file CSS di Bootstrap è ricercato nel percorso site root/css/. 

• Se il sito contiene il file CSS di Bootstrap v3, la versione di Bootstrap in Gestisci sito > Impostazioni avanzate > Bootstrap è impostata su 3.4.1.
• Se il sito contiene il file CSS di Bootstrap v4, la versione di Bootstrap in Gestisci sito > Impostazioni avanzate > Bootstrap è impostata su 4.4.1.
• Se il sito non contiene un file CSS di Bootstrap nel percorso site root/css, la versione di Bootstrap in Gestisci sito > Impostazioni avanzate > Bootstrap è impostata su 4.4.1.

Creare documenti Bootstrap

Potete iniziare a progettare il sito Web Bootstrap utilizzando una delle seguenti opzioni dalla finestra di dialogo Nuovo documento:

• Modelli campione di Bootstrap (Modelli per iniziare > Modelli di Bootstrap) - Utilizzate questa opzione per iniziare rapidamente senza preoccuparvi di creare ex-novo il layout della pagina. Modificate semplicemente il testo e sostituite, se necessario, le risorse per creare rapidamente un sito Web reattivo. Per ulteriori informazioni, consultate Utilizzare i modelli campione di Bootstrap.
• Create un documento HTML basato sul framework Bootstrap (Nuovo documento > HTML > Bootstrap) - Utilizzate questa opzione per creare un sito Web ex-novo, utilizzando CSS e componenti di Bootstrap presenti in Dreamweaver. Per ulteriori informazioni, consultate Creare documenti HTML basati sul framework Bootstrap.
  

Utilizzare i modelli campione di Bootstrap

I modelli campione di Bootstrap consentono di creare pagine Web per i temi più comuni in un attimo. Tutti i file dipendenti nel framework sono salvati automaticamente.

Creare documenti HTML basati sul framework Bootstrap

Per progettare un sito Web reattivo, potete iniziare a creare un documento HTML basato sul framework Bootstrap. Potete scegliere di creare un insieme di file del framework Bootstrap o utilizzare quelli esistenti. Dopo aver creato il file, potete aggiungere componenti di Bootstrap come i pannelli a soffietto e caroselli tramite il pannello Inserisci di Dreamweaver. Oppure, se avete a disposizione delle composizioni Photoshop, potete utilizzare Extract per importare immagini, font, stili, testo e altro ancora nel documento Bootstrap.

Aprire file Bootstrap

Potete aprire i file Bootstrap utilizzando uno dei modi seguenti:

• Selezionate File > Apri, quindi individuate il file HTML di Bootstrap.
• (Scelta consigliata) Create un sito con Dreamweaver e scegliete come cartella del sito la cartella che contiene tutti i file Bootstrap.

Quando si apre un file HTML di Bootstrap in Dreamweaver:

• Le righe sono evidenziate con linee grigie tratteggiate di colore grigio con gli angoli arrotondati
• Le colonne sono evidenziate con linee tratteggiate di colore blu

Dreamweaver riconosce i file CSS associati a un file HTML Bootstrap se il nome del file CSS contiene “bootstrap”. Il riferimento al file CSS può essere una o più delle seguenti opzioni:

• Percorso locale:

  È disponibile in locale il file CSS in versione ridotta o estesa. Ad esempio:

  <link href="css/bootstrap.css" rel="stylesheet"> o
  <link href="css/bootstrap.min.css" rel="stylesheet">

• Percorso remoto:

È disponibile in remoto il file CSS in versione ridotta o estesa. Ad esempio:

<link href="http://somewebsite.com/css/bootstrap.css" rel="stylesheet">
<link href="http://somewebsite.com/css/bootstrap.min.css" rel="stylesheet">

• CDN

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/<bootstrap_version_number>/css/bootstrap.min.css" rel="stylesheet">

Nascondere, visualizzare e gestire elementi nascosti di Bootstrap

In alcuni casi, per scopi di progettazione, potrebbe essere necessario visualizzare l’elemento in un riquadro di visualizzazione, nascondendolo invece in un secondo riquadro di visualizzazione. 

Per nascondere un elemento di Bootstrap, fate clic con il pulsante destro e selezionate Nascondi elemento. L’elemento viene temporaneamente nascosto dalla vista.

Per visualizzare e scoprire gli elementi nascosti, fate clic con il pulsante destro e selezionate Gestisci elementi nascosti. Gli elementi nascosti vengono visualizzati su uno sfondo sfocato grigio. Fate clic sull’icona a forma di occhio per scoprire l’elemento.

Aggiungere componenti di Bootstrap

L’opzione Componenti di Bootstrap nel pannello Inserisci elenca tutti i componenti di Bootstrap che potete aggiungere alla pagina Web in Dreamweaver. A seconda della versione di Bootstrap nel file bootstrap.css collegato alla pagina HTML, i componenti appropriati sono elencati nel pannello Inserisci.  Ad esempio, in Bootstrap v4.0.0, sono visualizzati componenti aggiuntivi quali Card e Badge. Analogamente, i componenti Glyphicon, Panel, Well e Thumbnail sono disponibili solo in Bootstrap v3.3.7. I componenti appropriati nel pannello Inserisci variano quindi a seconda della versione di Bootstrap. Inoltre, il componente Spinners è disponibile solo in Bootstrap v4.4.1.

L’inserimento dei componenti nel pannello Inserisci avviene in base ai seguenti criteri:

• Documento attivo: i componenti nel pannello Inserisci sono inseriti in base alla versione di Bootstrap nel file Bootstrap collegato al documento. 
• Versione in Preferenze sito: in Dreamweaver, nel caso di un documento non Bootstrap, la versione è determinata da Preferenze sito > Avanzate > Bootstrap. Sono quindi inseriti i componenti appropriati in base alla versione in questa opzione. La versione 4.4.1 è quella predefinita per i nuovi siti.
• Il percorso in cui vengono salvati i file: per un documento non Bootstrap non incluso in nessun sito, nel pannello Inserisci sono presenti i componenti della versione 4.4.1.

Per aggiungere un componente, trascinatelo dal pannello sulla pagina Web. Prima di rilasciare il componente, annotatene i riferimenti visivi quali Guide dal vivo, inserimento di precisione (tramite DOM) e assistente di posizionamento. Utilizzare questi riferimenti per posizionare i componenti in modo rapido e preciso sulla pagina. Per ulteriori informazioni su come inserire elementi nella pagina Web, consultate Panoramica sul pannello Inserisci.

Aggiungere righe

Fate clic sulla riga dopo la quale desiderate aggiungere la nuova riga. Quindi, fate clic sull’icona Aggiungi nuova riga. Verrà aggiunta una riga di Bootstrap con due elementi colonna figlio, ciascuno con sei colonne.

Il codice relativo alla riga aggiunta è il seguente:

<div class="row">
<div class="col-*-6"></div>
<div class="col-*-6"></div>
</div>

dove * rappresenta le attuali dimensioni dello schermo in Dreamweaver.

Aggiungere colonne

Selezionate la colonna richiesta e quindi fate clic sull’icona Aggiungi nuova colonna. La colonna selezionata viene duplicata senza i relativi elementi figlio.

Tutte le colonne vuote avranno un’altezza minima di 20 pixel; tuttavia, la loro altezza non viene realmente aggiunta alla pagina, ma viene visualizzata solo nella vista Dal vivo, per facilitare l’inserimento di elementi all’interno delle colonne stesse.

Righe e colonne duplicate

Selezionate la riga o la colonna da duplicare, quindi fate clic sull’icona di duplicazione nell’angolo inferiore destro. L’intera riga o colonna viene duplicata con il suo contenuto.

Ridimensionare e impostare offset delle colonne

Ridimensionare e impostare un offset delle colonne è importante soprattutto quando create design reattivi con diverse finestre di visualizzazione. 

Ridimensionare le colonne

Per procedere al ridimensionamento, fate clic sulla colonna desiderata e trascinate la maniglia sul lato destro. Per un documento Bootstrap v4.0.0, quando ridimensionate una colonna, viene aggiunta la classe col-*-n, dove * rappresenta la media query corrente (sm, md, ld o xl) e n rappresenta il numero di colonne occupate. Per la dimensione dello schermo molto piccole è aggiunta la classe col-n.

Per un documento Bootstrap v3.3.7, quando ridimensionate una colonna, viene aggiunta la classe col-*-n, dove * rappresenta la media query corrente (xs, sm, md o lg) e n rappresenta il numero di colonne occupate.

Dreamweaver rileva le attuali dimensioni dello schermo e aggiunge la classe appropriata. Per ridimensionare le colonne in base a un riquadro di visualizzazione specifico, modificate le dimensioni della finestra di visualizzazione tramite le opzioni nell’angolo inferiore destro della barra di scorrimento. Ridimensionate quindi le colonne secondo le vostre necessità.

Impostare offset colonne

Per modificare l’offset, fate clic sulla colonna desiderata e trascinate la maniglia sul lato sinistro. L’offset viene visualizzato come un’area sfocata. Per un documento Bootstrap v4.0.0, quando modificate l’offset di una colonna, viene aggiunta la classe offset-*-n, dove * rappresenta la media query corrente (sm, md, lg o xl) e n rappresenta il numero di colonne occupate.

Per un documento Bootstrap v3.3.7, quando modificate l’offset di una colonna, viene aggiunta la classe col-*-n, dove * rappresenta la media query corrente (xs, sm, md o lg) e n rappresenta il numero di colonne di cui si sposta.

Dreamweaver rileva le attuali dimensioni dello schermo e aggiunge la classe appropriata. Per impostare l’offset delle colonne in base a un riquadro di visualizzazione specifico, modificate le dimensioni della finestra di visualizzazione tramite le opzioni nell’angolo inferiore destro della barra di scorrimento. Impostate quindi l’offset secondo le vostre necessità.