Supporto volontario e collaborativo per Joomla!® in italiano

Esempi di utilizzo Bootstrap

Valutazione attuale: 4 / 5

Stella attivaStella attivaStella attivaStella attivaStella inattiva
 

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

 joomla

Arrows

 chevron-up, uparrow, arrow-up
 chevron-right, rightarrow, arrow-right
 chevron-down, downarrow, arrow-down
 chevron-left, leftarrow, arrow-left
 arrow-first
 arrow-last
 arrow-up-2
 arrow-right-2
 arrow-down-2
 arrow-left-2
 arrow-up-3
 arrow-right-3
 arrow-down-3
 arrow-left-3
 menu-2
 arrow-up-4
 arrow-right-4
 arrow-down-4
 arrow-left-4
 share, redo
 undo
 forward-2
 backward-2, reply
 unblock, refresh, redo-2
 undo-2
 move
 expand
 contract
 expand-2
 contract-2
 play
 pause
 stop
 previous, backward
 next, forward
 first
 last
 play-circle
 pause-circle
 stop-circle
 backward-circle
 forward-circle
 loop
 shuffle

Search

 search
 zoom-in
 zoom-out

Edit

 apply, edit, pencil
 pencil-2
 brush

Actions

 save-new, plus-2
 ban-circle, minus-sign, minus-2
 delete, remove, cancel-2
 publish, save, ok, checkmark
 new, plus
 plus-circle
 minus, not-ok
 minus-circle
 unpublish, cancel
 cancel-circle
 checkmark-2
 checkmark-circle
 info
 info-2, info-circle
 question, question-sign, help
 question-2, question-circle
 notification
 notification-2, notification-circle
 pending, warning
 warning-2, warning-circle

Checkboxes

 checkbox-unchecked
 checkin, checkbox, checkbox-checked
 checkbox-partial
 square
 radio-unchecked
 radio-checked
 circle
 signup

Grid

 grid, grid-view
 grid-2, grid-view-2
 menu
 list, list-view
 list-2
 menu-3

Folders

 folder-open, folder
 folder-close, folder-2
 folder-plus
 folder-minus
 folder-3
 folder-plus-2
 folder-remove

Files

 file
 file-2
 file-add, file-plus
 file-remove, file-minus
 file-check
 file-remove
 save-copy, copy
 stack

Tree

 tree
 tree-2

Alignment

 paragraph-left
 paragraph-center
 paragraph-right
 paragraph-justify

Screens

 screen
 tablet
 mobile

Downloads

 box-add
 box-remove
 download
 upload

Home

 home
 home-2

Links

 out-2,-tab
 out-3,-tab-2
 link

Media

 picture, image
 pictures, images
 palette, color-palette
 camera
 camera-2, video
 play-2, video-2, youtube
 music

Users

 user
 users
 vcard
 address
 share-alt, out
 enter
 exit

Messages

 comment, comments
 comments-2
 quote, quotes-left
 quote-2, quotes-right
 quote-3, bubble-quote

Contact

 phone
 phone-2
 envelope, mail
 envelope-opened, mail-2
 unarchive, drawer
 archive, drawer-2
 briefcase

Tags

 tag
 tag-2
 tags
 tags-2

Tools

 options, cog
 cogs
 screwdriver, tools
 wrench
 equalizer
 dashboard
 switch
 filter
 purge, trash
 checkedout, lock, locked
 unlock
 key
 support
 database
 scissors
 health
 wand
 eye-open, eye
 eye-close, eye-blocked, eye-2
 clock
 compass
 broadcast, connection, wifi
 book
 lightning, flash
 print, printer

Social

 feed

Calendar

 calendar
 calendar-2
 calendar-3

Stats

 pie
 bars
 chart

Extensions

 power-cord
 cube
 puzzle

Marked

 attachment, paperclip, flag-2
 lamp
 pin, pushpin
 location
 shield
 flag
 flag-3
 bookmark
 bookmark-2

Rating

 heart
 heart-2
 thumbs-up
 thumbs-down
 unfeatured, asterisk, star-empty
 star-2
 featured, default, star
 smiley, smiley-happy
 smiley-2, smiley-happy-2
 smiley-sad
 smiley-sad-2
 smiley-neutral
 smiley-neutral-2

Cart

 cart
 basket

Creditcard

 credit
 credit-2



Icon set (64px)

Joomla

Arrows

Search

Edit

Actions

Checkboxes

Grid

Folders

Files

Tree

Alignment

Screens

Downloads

Home

Links

Media

Users

Messages

Contact

Tags

Tools

Social

Calendar

Stats

Extensions

Marked

Rating

Cart

Creditcard

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.0 Stabile Italiana
Data di rilascio: 25 Aprile 2016
(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

Libri consigliati

Torna su

Joomla.it sui Social Network

JoomlaDay Italia

JoomlaDay

Newsletter

Inserisci qui la tua e.mail: