Supporto volontario e collaborativo per Joomla!® in italiano

Usare Bootstrap in Joomla

Valutazione attuale: 5 / 5

Stella attivaStella attivaStella attivaStella attivaStella attiva
 

Come molti di voi sapranno dalla versione 3 di Joomla è stato implementato il framework “twitter bootstrap” una fantastica estensione che ci semplificherà di molto la realizzazione dei template.

Bootstrap può essere usato su qualsiasi piattaforma web, dal semplice sito statico al cms più complesso, il vantaggio di avere questo framework all'interno del core di Joomla è che tutto il codice generato dal cms viene già pensato per essere usato con questo framework, riducendo ulteriormente i tempi di realizzazione di un interfaccia grafica.

Cos'è Bootstrap?

Bootstrap è una libreria composta da una serie di stili css (e un po' di javascript), pensati e studiati per creare pagine web in poco tempo.

Grazie a questo framework possiamo creare intera struttura della nostra pagina internet senza dover scrivere una riga di codice css, una volta creata la struttura, possiamo poi personalizzare la pagina web, basterà aggiungere nuove classi e regole css per personalizzare la nostra interfaccia grafica.

Esempi di Bootstrap li troviamo ovunque nella versione 3 di Joomla!: la pagina d'installazione, il template “protostar” e il template base per area amministrativa sono tutti creati usando e personalizzando questa libreria.

installazione amministrazione template protostar

Bootstrap versione 2 o 3?

La versione di Bootstrap implementata in Joomla! è la versione 2, dopo poco tempo l'uscita di Joomla! 3 è uscita la versione 3 di Bootstrap, adesso la versione 2 di Bootstrap è considerata datata e non viene più supportata dal suo team sviluppo, ma anche se datata è una versione perfettamente funzionante e altamente testata sui principali browser web, anche sui dispositivi mobili.

Non so se nelle prossime versioni di Joomla! verrà implementato anche Bootstrap 3, ma nulla ci vieta di usare Bootstrap 3 all'interno di qualsiasi versione di Joomla! anche su versioni 2.5 o quelle precedenti, basterà implementare nel nostro template i file di questo framework (in un altro articolo vedremo come usare bootstrap 3 in Joomla 3.3).

Inoltre la versione 2 di Bootstrap è compatibile con i browser datati come internet explorer 7, mentre il supporto della versione 3 parte dalla versione 9 di IE (resa poi compatibile con la 8 grazie ad un file javascript esterno), la sintassi e il funzionamento delle classi di bootstrap 2 e 3 sono differenti.

Quando possiamo usare Bootstrap?

Non tutti i template della Joomla 3 usano Bootstrap, chi sviluppa un template è libero di scegliere se usarlo o non usarlo, se il template che usate per il vostro sito non ha implementato questa libreria, bisognerà implementare bootstrap nel template (cosa non sempre facile), ma questo richiede un minimo di conoscenza in ambito sviluppo dei template (vedremo in un altro articolo).

In genere i siti web che utilizzano Bootstrap (salvo eccezioni) caricano due file: un file css “bootstrap.css” e il file “bootstrap.js” (o le loro versioni minimizzate bootstrap.min.css e bootstrap.min.js) e altre librerie esterne come ad esempio jquery, se nel frontend vengono caricati questi file potete usare bootstrap. Ma il miglior modo per capire se Bootstrap è implementato e quello di testarlo direttamente nel nostro sito.

L'uso di Bootstrap richiede un minimo di conoscenza della sintassi html, gli editor di testo non sono pensati per inserimento di classi css (e quindi le cassi di Bootstrap) all'interno degli elementi html, e spesso quando trovano codici html come i tag (pensati per il layout e non per i testi di una pagina), li convertono o li modificano in automatico, quindi per usare bootstrap all'interno di un articolo o di un modulo html personalizzato, dovrete per forza disabilitare l'editor di Joomla.

Piccolo esempio di Bootstrap

Vediamo un piccolo esempio per capire come funziona Bootstrap

Una volta disattivato editor possiamo usarlo senza problemi: ipotizziamo di voler inserire un link in una nostra pagina, normalmente scriveremmo un codice di questo tipo:

 
<p>
  Testo della nostra pagina <a href="#" >link</a> 
</p>
 

Risultato:

Testo della nostra pagina link

Estetica di un semplice link cambia da template a template, ma di base un link non ha mai un aspetto molto “accattivante” per mettere in risalto questo link, ci basta aggiungere un pezzo di codice:

 
<p>
  Testo della nostra pagina <a href="#"  class="btn">link</a> 
</p>
 

e questo è il risultato:

Testo della nostra pagina link

Aggiungendo la classe “btn” diciamo al framework che quel link deve avere aspetto di un pulsante, e estetica del pulsante cambierà.

Ma non è finita qui! Pulsante bianco è carino ma non basta, vogliamo farlo risaltare al meglio e quel colore bianco proprio non ci piace, aggiungiamo quindi un po di colore, basta un ulteriore classe css.

 
<p>
  Testo della nostra pagina <a href="#"  class="btn btn-warning">link</a> 
</p>
 

risultato:

Testo della nostra pagina link

Ottimo direi, ma non fermiamoci qui: perché non renderlo anche più grande? Semplicissimo:

 
<p>
  Testo della nostra pagina <a href="#"  class="btn btn-warning btn-large">link</a> 
</p>
 

risultato:

Testo della nostra pagina link

Fantastico! Aggiungendo quache classe css abbiamo creato un pulsante senza scrivere neanche una riga di codice css!
Le classi: "btn", "btn-large", "btn-warning" sono tutte classi css implementate in bootstrap, quando si usa un framework css è importante rispettare, oltre alla sintassi, anche ordine delle classi:

La prima classe è "btn" , questa classe applica al nostro link tutti i parametri css di cui ha bisogno per creare il pulsante, aggiungendo "btn-warinng" andiamo a sovrascrivere alcuni dei parametri di "btn" cambiando di conseguenza i colori del pulsante, mentre con "btn-large" andiamo a modificare altre parti della classe "btn".
Ma non finisce qui! I pulsanti sono una minima parte di quello che è possibile creare con Bootstrap, all'interno del framework troviamo di tutto:

  • gruppi di pulsanti
  • barre di navigazione
  • una struttura a griglia
  • menu di paginazione
  • barre di progressione
  • menu di navigazione
  • form
  • liste
  • tipografia web
  • icone vettoriali
  • rendere visibile o invisibile un elemento in base al dispositivo che lo visualizza

Ma anche animazioni in Jquery:

  • Effetti di tipo lightbox
  • slider di immagini
  • accordion
  • tabs
  • ecc...

Elenco delle cose che possiamo fare sono tante, per vedere altri esempi di bootstrap clicca su questo link: esempi Bootstrap

CommentaCommenta questo articolo sul forum

Ho scritto e condiviso questo articolo su Joomla.it, fallo anche tu. Invia ora un nuovo articolo!
Claudio Carrera
Alcune informazioni su di me:
Sviluppatore siti internet Brescia


Ho anche scritto:
         ✔ diventa autore su Joomla.it

Ultima versione di Joomla!®

downloadVer. 3.7.2 Stabile Italiana
Data di rilascio: 23 Maggio 2017
(leggi la notizia Demo online

Le migliori estensioni gratuite

Un elenco aggiornato con i link a più di 100 estensioni fra componenti, moduli e plugin gratuiti per Joomla! 3

Manuale in italiano

Manuale in italianoPer conoscere meglio Joomla!, le sue caratteristiche ed il metodo di utilizzo leggi il manuale tradotto in italiano.

Molto utili anche le risposte alle domande più frequenti: FAQ

Sicurezza del proprio sito Joomla!Leggi anche: Nozioni sulla sicurezza del proprio sito

Autori di articoli recenti

Invia un articolo!Scrivi un articolo su Joomla.it e ricevi i ricavi dalle pubblicità di Google Adsense!
Segui queste istruzioni, condividi e collabora con la community. L'elenco degli autori attivi sul sito.

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: