Joomla 3 integra il framework Bootstrap (versione 2.3) per una veloce e facile implementazione del web design. Inserire icone o testo formattato risulta semplice con i seguenti esempi (Typography) validi su qualsiasi template che supporta Bootstrap e jQuery presenti in Joomla!.
<p>Esempio di Tooltip sulla parola <abbr title="Il nostro caro CMS">Joomla</abbr></p>
Esempio di Tooltip sulla parola Joomla
Blocco formattato
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title
Blocco semplice in evidenza
<pre>Blocco semplice in evidenza</pre>
Utilizzare una delle centinaia di icone vettoriali disponibili (vedi elenco)
<i class="icon-thumbs-up icon-large"></i>
<span style="font-size: 50px;" aria-hidden="true" class="icon-picture icon-large"></span>
Aumentare a piacere le dimensioni delle icone
<div style="font-size: 40px;">
<i class="icon-zoom-in icon-large"></i>
</div>
Modificare anche il colore delle icone
<div style="font-size: 40px; color: #DC143C">
<i class="icon-question-sign icon-large"></i>
</div>
Allineare l'icona grande con il testo normale
<i class="icon-quote icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: left;"></i> testo....testo...
In questo esempio l'icona è allineata a sinistra (float: left;) ed ha le dimensioni di valore 60 (font-size: 60px;) ed i valori per i margini sul testo sono i seguenti: 30px 60px 30px 0px
Risultà semplice modificare il valore del colore dell'icona, la dimensione ed i relativi margini. Nel primo valore dei margini metti la metà del valore della dimensione dell'icona, nel secondo il valore intero e nella terza ancora la metà del valore, mentre l'ultimo valore rimane a zero.
Questi alcuni esempi di codice colore: GIALLO (255, 255, 0); ROSSO (255, 0, 0); CELESTE (0, 0, 255); VERDE (0, 255, 0); ROSA (255, 0, 255); MARRONE (204, 102, 0); GRIGIO (85, 85, 85);
<i class="icon-quote-2 icon-large" style="color: rgb(0, 0, 255); font-size: 60px; margin: 30px 60px 30px 0px; float: right;"></i> testo....testo...
Mentre questo esempio utilizza lo stesso codice del precedente tranne l'allineamento dell'icona che è impostato a destra (float: right;) ed ovviamente una differente icona............................
Utilizzare le icone come bottoni
<a class="btn btn-small" href="#"><i class="icon-star"></i></a>
<a href="#" class="btn"><i class="icon-edit"></i> <strong>Modifica</strong></a>
<a href="#" class="btn"><i class="icon-trash"></i> <strong>Cancella</strong></a>
<a href="#" class="btn"><i class="icon-key"></i> <strong>Chiave</strong></a>
Inserire dei tasti
<p><a href="#" class="btn btn-large btn-primary">Inizio</a></p>
Sempre tasti ma di colore e dimensione differenti
<a href="#" class="btn">Default</a>
<a href="#" class="btn btn-small btn-info">Info</a>
<a href="#" class="btn btn-mini btn-success">Success</a>
<a href="#" class="btn btn-large btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-inverse">Inverse</a>
Default Info Success Warning Danger Inverse
Blocco di allerta con bottone di chiusura
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Attenzione!</strong> Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.
</div>
<div class="alert alert-error">
Blocco errore
</div>
<div class="alert alert-error"><span aria-hidden="true" class="icon-cancel"></span>
Blocco errore con immaginetta...
</div>
<div class="alert alert-success">
Blocco successo
</div>
<div class="alert alert-info">
Blocco informazioni
</div>
<div class="alert alert-info"><span aria-hidden="true" class="icon-flag-2 "></span> Blocco informazioni con immaginetta...
</div>
Blocco in evidenza all'interno di testo con dimensione e float e classe
<div class="alert alert-error" style=" float:left; width:150px; margin: 0 10px;">Testo nel blocco...</div>Testo artico....
E' possibile agire sulla classe sostituendola con quelle viste in precedenza per cambiare lo sfondo od il colore del carattere. Per modificare le dimensioni del blocco è necessario variare il valore della larghezza (width:150px;) mentre per allinearlo a destra è necessario cambiare float:left; con float:right;
