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

×

Titolo finestra

Chiudi

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>

Modifica Cancella Chiave

Inserire dei tasti

<p><a href="#"  class="btn btn-large btn-primary">Inizio</a></p>

Inizio

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

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>

×

Titolo finestra

Chiudi

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">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</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