Valutazione attuale: 0 / 5

Stella inattivaStella inattivaStella inattivaStella inattivaStella inattiva
 

http://demo.joomlahost.it/31/index.php/6-esempi-di-utilizzo-bootstrap

 

http://demo.joomlahost.it

 

 

Dettagli Scritto da Joomla 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.

Esempio di Tooltip sulla parola Joomla

Esempio di Tooltip sulla parola Joomla Blocco formattato

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. Someone famous Source Title Blocco semplice in evidenza

Blocco semplice in evidenza

Immagine con effetto cornice polaroid nome immaginenome immagine Immagine miniatura che apre la grande

nome immagine nome immagine Utilizzare una delle centinaia di icone vettoriali disponibili (vedi elenco)Aumentare a piacere le dimensioni delle icone

 

Modificare anche il colore delle icone

 

Allineare l'icona grande con il testo normale 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); 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 Modifica Cancella ChiaveModifica Cancella Chiave Inserire dei tasti

Inizio

Inizio Sempre tasti ma di colore e dimensione differenti Default Info Success Warning Danger InverseDefault Info Success Warning Danger Inverse Blocco di allerta con bottone di chiusura

Attenzione! Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.

×Attenzione! Ricordati di disabilitare l'editor prima di utilizzare questi codici nell'HTML del tuo contenuto.

Blocco errore

Blocco errore

Blocco errore con immaginetta...

Blocco errore con immaginetta...

Blocco successo

Blocco successo

Blocco informazioni

Blocco informazioni

Blocco informazioni con immaginetta...

Blocco informazioni con immaginetta... Blocco in evidenza all'interno di testo con dimensione e float e classe

Testo nel blocco...

Testo artico.... Blocco semplice in evidenza con dimensione e floatQuesto 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

Apri finestra popup Esempio slide immagini con effettto Carousel

Prima immagine Descrizione prima immagine.... ‹› 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

 

 

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