Stampa
Categoria: principale
Visite: 2524

Joomla 3 and this template integrates the Bootstrap framework for fast and easy deployment of web design. Insert formatted text or icons is easy with the following examples (Typography) valid on any template that supports Bootstrap and jQuery present in Joomla.


Tooltip example

<p>Example Tooltip on the word <abbr class="hasTooltip" title="This is a simple Tooltip">Joomla</abbr></p>

Example Tooltip on the word Joomla


Formatted block

<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

Simple Block

<pre>Blocco semplice in evidenza</pre>

 

Image with polaroid effect

<img class="img-polaroid" src="/business/images/sampledata/parks/animals/220px_spottedquoll_2005_seanmcclean.jpg" alt="nome immagine" />

nome immagine


Image Popup

<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="/business/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="/business/images/sampledata/parks/landscape/120px_pinnacles_western_australia.jpg" alt="nome immagine" /></a>

nome immagine


Buttons

Insert buttons

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

Inizio



Buttons with different color and size

<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



Buttons with icons

    <a href="#" class="btn"><i class="icon-edit"></i> <strong>Edit</strong></a>
<a href="#" class="btn btn-inverse"><i class="icon-trash icon-white"></i> <strong>Delete</strong></a>
<a href="#" class="btn"><i class="icon-share"></i> <strong>Share</strong></a>

Edit Delete Share


 

Use one of hundreds of vector icons available (see list)
<i class="icon-thumbs-up"></i>


Example of button that opens a window "modal" with a picture inside

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

 


Example images with slide effect Carousel

<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="/business/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="/business/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="/business/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>

 

 

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal
  • icon-hdd
  • icon-bullhorn
  • icon-bell
  • icon-certificate
  • icon-thumbs-up
  • icon-thumbs-down
  • icon-hand-right
  • icon-hand-left
  • icon-hand-up
  • icon-hand-down
  • icon-circle-arrow-right
  • icon-circle-arrow-left
  • icon-circle-arrow-up
  • icon-circle-arrow-down
  • icon-globe
  • icon-wrench
  • icon-tasks
  • icon-filter
  • icon-briefcase
  • icon-fullscreen