Esempi di utilizzo Bootstrap

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


Attenzione! E' consigliato disabilitare l'editor di Joomla! prima di utilizzare queste parti di codice HTML nel contenuto.


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

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

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>
Attenzione! Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.

    <div class="alert alert-error">
Blocco errore
</div>
Blocco errore

<div class="alert alert-error"><span aria-hidden="true" class="icon-cancel"></span>
Blocco errore con immaginetta...
</div>
Blocco errore con immaginetta...

    <div class="alert alert-success">
Blocco successo
</div>
Blocco successo

 <div class="alert alert-info">
Blocco informazioni
</div>
Blocco informazioni

<div class="alert alert-info"><span aria-hidden="true" class="icon-flag-2 "></span> Blocco informazioni con immaginetta...
</div>
Blocco informazioni con immaginetta...


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....
Blocco semplice in evidenza con dimensione e float
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">&lsaquo;</a>
            <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
          </div>

Questo l'elenco delle Icone disponibili in Joomla 3

 icon-home
 icon-user
 icon-locked
 icon-comments
 icon-comments-2
 icon-out
 icon-redo
 icon-undo
 icon-file-add
 icon-plus
 icon-pencil
 icon-pencil-2
 icon-folder
 icon-folder-2
 icon-picture
 icon-pictures
 icon-list-view
 icon-power-cord
 icon-cube
 icon-puzzle
 icon-flag
 icon-tools
 icon-cogs
 icon-cog
 icon-equalizer
 icon-wrench
 icon-brush
 icon-eye
 icon-checkbox-unchecked
 icon-checkbox
 icon-checkbox-partial
 icon-star
 icon-star-2
 icon-star-empty
 icon-calendar
 icon-calendar-2
 icon-help
 icon-support
 icon-warning
 icon-checkmark
 icon-cancel
 icon-minus
 icon-remove
 icon-mail
 icon-mail-2
 icon-drawer
 icon-drawer-2
 icon-box-add
 icon-box-remove
 icon-search
 icon-filter
 icon-camera
 icon-play
 icon-music
 icon-grid-view
 icon-grid-view-2
 icon-menu
 icon-thumbs-up
 icon-thumbs-down
 icon-cancel-2
 icon-plus-2
 icon-minus-2
 icon-key
 icon-quote
 icon-quote-2
 icon-database
 icon-location
 icon-zoom-in
 icon-zoom-out
 icon-expand
 icon-contract
 icon-expand-2
 icon-contract-2
 icon-health
 icon-wand
 icon-refresh
 icon-vcard
 icon-clock
 icon-compass
 icon-address
 icon-feed
 icon-flag-2
 icon-pin
 icon-lamp
 icon-chart
 icon-bars
 icon-pie
 icon-dashboard
 icon-lightning
 icon-move
 icon-next
 icon-previous
 icon-first
 icon-last
 icon-loop
 icon-shuffle
 icon-arrow-first
 icon-arrow-last
 icon-arrow-up
 icon-arrow-right
 icon-arrow-down
 icon-arrow-left
 icon-arrow-up-2
 icon-arrow-right-2
 icon-arrow-down-2
 icon-arrow-left-2
 icon-play-2
 icon-menu-2
 icon-arrow-up-3
 icon-arrow-right-3
 icon-arrow-down-3
 icon-arrow-left-3
 icon-printer
 icon-color-palette
 icon-camera-2
 icon-file
 icon-file-remove
 icon-copy
 icon-cart
 icon-basket
 icon-broadcast
 icon-screen
 icon-tablet
 icon-mobile
 icon-users
 icon-briefcase
 icon-download
 icon-upload
 icon-bookmark
 icon-out-2