Joomla 3 integra il framework Bootstrap 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>
Immagine con effetto cornice polaroid
<img class="img-polaroid" src="/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg" alt="nome immagine" />
Immagine miniatura che apre la grande
<div id="myModal2" class="modal hide fade" style=" width:auto;">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel2">Titolo finestra</h3>
</div>
<div class="modal-body"><img src="/images/sampledata/parks/landscape/800px_pinnacles_western_australia.jpg" alt="nome immagine" /></div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button></div>
</div>
<a href="#myModal2" data-toggle="modal"><img class="img-polaroid" src="/images/sampledata/parks/landscape/120px_pinnacles_western_australia.jpg" alt="nome immagine" /></a>
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....
Questo esempio mostra come sia possibile inserire un blocco di testo all'interno di un paragrafo per evidenziare frasi o altre informazioni.
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;
Esempio di tasto che apre una finestra "modal" con all'interno una immagine
<div id="myModal" class="modal hide fade">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h3 id="myModalLabel">Titolo finestra</h3>
</div>
<div class="modal-body"><img class="img-polaroid" src="/images/headers/walden-pond.jpg" alt="nome immagine" /></div>
<div class="modal-footer"><button class="btn" data-dismiss="modal">Chiudi</button></div>
</div>
<div class="bs-docs-example" style="padding-bottom: 24px;"><a class="btn btn-primary btn-large" href="#myModal" data-toggle="modal">Apri finestra popup</a></div>
Esempio slide immagini con effettto Carousel
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="/images/headers/windows.jpg" alt="">
<div class="carousel-caption">
<h4>Prima immagine</h4>
<p>Descrizione prima immagine....</p>
</div>
</div>
<div class="item">
<img src="/images/headers/blue-flower.jpg" alt="">
<div class="carousel-caption">
<h4>Seconda immagine</h4>
<p>Descrizione seconda immagine...</p>
</div>
</div>
<div class="item">
<img src="/images/headers/walden-pond.jpg" alt="">
<div class="carousel-caption">
<h4>Terza immagine</h4>
<p>Descrizione terza immagine...</p>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
Prima immagine
Descrizione prima immagine....
Seconda immagine
Descrizione seconda immagine...
Terza immagine
Descrizione terza immagine...
Questo l'elenco delle Icone disponibili in Joomla 3
