Permette di creare una finestra in sovrapposizione facendo clic sul pulsante.

 

 

 

 

 


<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

 

LA LARGHEZZA DELL'IMMAGINE DEVE ESSERE DI CIRCA 900PX, L'ALTEZZA è INDIFFERENTE, MA TUTTE LE IMMAGINI DEVONO AVERE LA STESSA GRANDEZZA

LO SLIDER VISUALIZZA SEMPRE UN PO' DI GRIGIO IN FONDO ALL'IMMAGINE

 

 

 

 

 

 

 

<div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- Indicators --> <!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active"><img src="/images/IMG01.jpg" alt="" /><br />
<div class="carousel-caption">
<h3>Prima immagine</h3>
<p>Descrizione prima immagine.</p>
</div>
</div>
<div class="item"><img src="/images/IMG02.jpg" alt="" /><br />
<div class="carousel-caption">
<h3>Seconda immagine</h3>
<p>Descrizione seconda immagine</p>
</div>
</div>
<div class="item"><img src="/images/IMG03.jpg" alt="" /><br />
<div class="carousel-caption">
<h3>Terza immagine</h3>
<p>Descrizione terza immagine e così via.</p>
</div>
</div>
</div>
<!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="sr-only">Next</span> </a></div>

 

 

Immagine con bordi arrotondati

 

 

<img class="img-rounded" src="/images/DelBuonoAgostino.jpg" alt="" />

 

 

 

Immagine circolare

 <img class="img-circle" src="/images/DelBuonoAgostino.jpg" alt="" />

 

 

 

Immagine thumbnail

 <img class="img-thumbnail" src="/images/DelBuonoAgostino.jpg" alt="" />


Primo titoletto

Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi

Action


Secondo titoletto

Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi

Action


Terzo titoletto

Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi

Action

 

 

 

<div class="row">
<div class="col-md-4">
<div class="thumbnail"><img src="/images/Attestato.jpg" alt="" /><br />
<div class="caption">
<h3>Primo titoletto</h3>
<p>Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi</p>
<p><a class="btn btn-primary" href="#">Action</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail"><img src="/images/DelBuonoAgostino.jpg" alt="" /><br />
<div class="caption">
<h3>Secondo titoletto</h3>
<p>Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi</p>
<p><a class="btn btn-primary" href="#">Action</a></p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail"><img class="img-circle" src="/images/SatiaLombardi.jpg" alt="" /><br />
<div class="caption">
<h3>Terzo titoletto</h3>
<p>Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi</p>
<p><a class="btn btn-primary" href="#">Action</a></p>
</div>
</div>
</div>
</div>

 

 

IL CODICE PRECEDENTE COMBINA IL DISCORSO COLONNE (UTILIZZATE TRE DI LARGHEZZA 4, TOTALE SEMPRE 12) CON LE CLASSI IMMAGINI (VEDI LA TERZA IMMAGINE CIRCOLARE).

 

PER FARE DUE COLONNE OCCORRE METTERE COL-MD-6 anziché COL-MD-4 E TOGLIERE UN BLOCCO DIV CLASS="col-md-4"

 


Secondo titoletto

Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi

Action


Terzo titoletto

Breve descrizione fdiousfu osfdiu fodsu foiu fsdoiu sfdoiu fdsoiufsd oi

Action

 

 

Hello, world!

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

Learn more

 

 

<div class="jumbotron">
<h2>
Hello, world!
</h2>
<p>
This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.
</p>
<p>
<a class="btn btn-primary btn-large" href="#">Learn more</a>
</p>
</div>