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

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>

×

Titolo finestra

Chiudi

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

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

×

Titolo finestra

Chiudi

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>

Prima immagine

Descrizione prima immagine....

Seconda immagine

Descrizione seconda immagine...

Terza immagine

Descrizione terza immagine...

‹ ›