Per un sito Web reattivo per dispositivi mobili, utilizzate i modelli campione Bootstrap e trascinate e rilasciate i componenti Bootstrap in Dreamweaver.

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.

Nota:

Le versioni di Bootstrap attualmente supportate includono v4.0.0 e v3.3.7.

Domande frequenti

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.3.7 e 4.0.0 di Bootstrap:

“Bootstrap 3.3.7 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.0.0, 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.

Se desiderate creare un documento Bootstrap ex-novo, potete semplicemente procedere come descritto nella sezione Creare documenti Bootstrap.

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.3.7.
  • Se il sito contiene il file CSS di Bootstrap v4, la versione di Bootstrap in Gestisci sito > Impostazioni avanzate > Bootstrap è impostata su 4.0.0.
  • 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.0.0.

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, vedete 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.

  1. Fate clic su File > Nuovo.

  2. Nella finestra di dialogo Nuovo documento visualizzata, fate clic su Modelli per iniziare, quindi selezionate il modello richiesto dall'elenco di modelli di Bootstrap.

  3. Fate clic su Crea

    Viene creata una pagina HTML basata sul modello scelto. Ora potete modificare liberamente la pagina, aggiungendo o eliminando i componenti, modificando il testo o le risorse.

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.

  1. Fate clic su File > Nuovo.

  2. Nella finestra di dialogo Nuovo documento visualizzata, fate clic su Nuovo documento > HTML, quindi selezionate la scheda Bootstrap.

  3. Per creare un nuovo file bootstrap.css (e gli altri file bootstrap), effettuate le seguenti operazioni:

    Specificate se creare un nuovo CSS Bootstrap o utilizzare un CSS esistente.

    Se scegliete di creare un nuovo CSS, viene creata una cartella "css" nella cartella principale del sito e il file bootstrap.css viene copiato nella nuova cartella. Se scegliete di utilizzare un file CSS esistente, specificate il percorso o sfogliate nel percorso del CSS.

    1. Fate clic su Crea nuovo.

      Creazione di un nuovo documento Bootstrap
      Creazione di un nuovo documento Bootstrap
    2. (Facoltativo) Per allegare qualsiasi altro CSS al documento corrente, fate clic su  nella sezione Allega CSS. Viene visualizzata la finestra di dialogo Associa foglio di stile esterno. Specificate le impostazioni e fate clic su OK.

    3. L'opzione Includi un layout predefinito fornisce una struttura di base del documento Bootstrap:

      Se non volete utilizzare la struttura di base, preferendo iniziare con un documento vuoto, deselezionate l'opzione Includi un layout predefinito.

    4. (Facoltativo) Il layout predefinito contiene 12 colonne con un margine di 30 px. Le dimensioni dello schermo predefinite sono 576 px, 768 px, 992 px e 1200px. 

      Per modificare queste impostazioni, fate clic su Personalizza. Il file bootstrap.css verrà modificato di conseguenza.

      Nota:

      In Bootstrap v3.3.7, le dimensioni predefinite dello schermo sono 768 px, 992 px e 1200 px.

    5. Selezionate Usate Extract per creare la pagina dalle composizioni Photoshop per aprire il pannello Extract, nel caso sia chiuso. In questo modo, potete iniziare immediatamente a estrarre le risorse da composizioni Photoshop.

      Bootstrap v4.0.0 è utilizzato per impostazione predefinita per la creazione del sito. Una volta creato il documento, le cartelle css e js sono situate nella cartella principale del sito. Se desiderate tuttavia creare un sito utilizzando Bootstrap versione 3.3.7, selezionate Sito > Gestisci siti. Selezionate la cartella principale del sito. Fate clic su Impostazioni avanzate > Bootstrap. Nel campo a discesa Versione di Bootstrap, selezionate 3.3.7. Nel caso di Bootstrap v3.3.7, nella cartella principale del sito sono disponibili le cartelle css, js e fonts.

      Selezione della versione 3.3.7 di Bootstrap
      Selezione della versione 3.3.7 di Bootstrap
  4. Per utilizzare i file esistenti del framework Bootstrap, effettuate le seguenti operazioni:

    1. Fate clic su Usa esistente e specificate il percorso del file bootstrap.css. Potete anche sfogliare il percorso in cui è salvato il CSS.

      Creazione di documenti di Bootstrap utilizzando i file esistenti del framework
      Creazione di documenti di Bootstrap utilizzando i file esistenti del framework

    2. (Facoltativo) Per allegare qualsiasi altro CSS al documento corrente, fate clic su  nella sezione Allega CSS. Nella finestra di dialogo Associa foglio di stile esterno, specificate le impostazioni e fate clic su OK.

    3. L'opzione Includi un layout predefinito fornisce una struttura di base del documento Bootstrap: Se non volete utilizzare la struttura di base, preferendo iniziare con un documento vuoto, deselezionate l'opzione Includi un layout predefinito.

  5. Fate clic su Crea.

Nota:

il file bootstrap.css creato è di sola lettura. Questi stili non possono essere pertanto modificati con CSS Designer; nei file Bootstrap, il riquadro Proprietà in CSS Designer è disattivato.

Per modificare lo stile del documento Bootstrap, create un altro file CSS per sovrascrivere gli stili esistenti, quindi associatelo al documento.

Aprire file Bootstrap

Nota:

in Dreamweaver, è consigliabile aprire e modificare i documenti creati solo in Bootstrap versione 3 e successive.

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">

Nota:

Dreamweaver supporta i fogli di stile di Bootstrap nei tag link e import. Tuttavia, l'importazione di elementi nidificati, cioè di collegamenti a fogli di stile che a loro volta consentono di importare altri fogli di stile, non è supportata.

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.

Nascondere gli elementi di Bootstrap in Dreamweaver
Nascondere gli elementi di Bootstrap in Dreamweaver

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.

Gestire elementi nascosti di Bootstrap
Gestire elementi nascosti di Bootstrap

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.

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.0.0 è 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.0.0.
Componenti supportati in Bootstrap 4.0.0
Componenti supportati in Bootstrap 4.0.0

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.

Nota:

l'opzione Aggiungi riga o Aggiungi colonna consente di duplicare la riga o la colonna con classi, ma senza 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à.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online