Bootstrap

Menù (navbar con DATA API per i menù a scomparsa)

<div class="collapse navbar-collapse navbar-responsive-collapse">
 <ul class="nav navbar-nav">
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu item A<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 2</a></li>
</ul>
 </li>
 <li class="dropdown">
 <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu item B<span class="caret"></span></a>
 <ul class="dropdown-menu">
 <li><a href="#">Menu Item 1</a></li>
 <li><a href="#">Menu Item 2</a></li>
</ul>
 </li>
 <li><a href="itemC.html">Menu item C</a></li>
</ul>
 </div>

Struttura della pagina (row e cols)

<div class="container">
	<div class="row">
		<div class="col-sm-12">
....
		</div><!-- /.col-sm-12 -->
	</div><!-- /.row -->
</div><!-- /.container -->
Le colonne sono al massimo 12, per limitare la larghezza del layout e centrare al contempo la griglia, basta racchiuderla in un div con classe .container .

Per avere una pagina divisa in due colonne uguali useremo ad esempio due div con le classi .col-sm-6, se invece vogliamo che la prima sia la metà della seconda useremo .col-sm-4 nella prima e .col-sm-8 nella seconda.

Prefissi:
col-xs-* (extra-small): schermi fino a 767px;
col-sm-* (small): schermi larghi oltre i 767px;
col-md-* (medium): schermi larghi oltre i 991px;
col-lg-* (large): schermi larghi oltre i 1199px;

Se vogliamo che una colonna sia spostata verso destra, senza invertire l'ordine di come sono dichiarate le colonne, aggiungiamo anche la classe per tale scopo. Ad esempio .col-sm-offset-4 sposta di 4 unità della griglia small a destra. lasciando a sinistra un vuoto di 4 unità.

Se vogliemo che una colonna dichiarata prima di un'altra, in un layout che consente l'affiancamento, appaia a destra e non a sinistra (cioè prima, in quanto è stata dichiarta prima) aggiungiamo la classe col-sm-push-4, che lascierà a sinistra 4 unità di spazio che saranno riempite dalla colonna dichiarata successivamente che dovrà avere la classe col-sm-pull-8.

Se vogliamo nascondere una colonna per un certo formato aggiungiamo la classe hidden-sm ad esempio per il formato small, se invece vogliamo che sia mostrato solo per quel formato aggiungiamo la classe visible-sm .

Miniature (thumbinail)

<img src="immagine.jpg" class="img-thumbnail img-responsive">

Icone (icon font Glyphicons)

<span class="glyphicon glyphicon-print"></span>
salva: glyphicon-floppy-disk
stampa: glyphicon-print
entra: glyphicon-log-in
esci: glyphicon-log-out

Slider (carousel con DATA API)

<div id="segnalazioni-carousel" class="carousel slide">
 <div class="carousel-inner">
  <div class="item active">
   <div class="panel-carousel">
    <div class="panel-carousel-heading">
     <h4>Elemento 1</h4>
    </div>
    <div class="panel-carousel-body">
     <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
    </div>
    <div class="panel-carousel-footer">
     <p><a href="#">Leggi tutta la news</a></p> 
    </div>
   </div>
  </div>

  <div class="item">
   <div class="panel-carousel">
    <div class="panel-carousel-heading">
     <h4>Elemento 2</h4>
    </div>
    <div class="panel-carousel-body">
     <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
    </div>
    <div class="panel-carousel-footer">
     <p><a href="#">Leggi tutta la news</a></p> 
    </div>
   </div>
  </div>

 </div>
 <div class="panel-carousel-nav">
  <p class="text-right">
  <a class="panel-carousel-control" href="#segnalazioni-carousel" data-slide="prev">
   <span class="glyphicon glyphicon-chevron-left"></span>
  </a> 
  <a class="panel-carousel-control" href="#segnalazioni-carousel" data-slide="next">
   <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
  </p>	
 </div>
</div>

Tab (usando le DATA API)

<div id="segnalazioni-tab">
 <ul class="nav nav-tabs">
  <li class="active"><a href="#tab-1" data-toggle="tab">Lorem ipsum</a></li>
  <li><a href="#tab-2" data-toggle="tab">Sit dolor</a></li>
  <li><a href="#tab-3" data-toggle="tab">Adipiscing nunc</a></li>
  <li><a href="#tab-4" data-toggle="tab">Condimentum diam</a></li>
 </ul>
 <div class="tab-content">
  <div class="tab-pane active" id="tab-1">
   <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
  </div>
  <div class="tab-pane" id="tab-2">
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, <a href="#">tellus ac cursus</a> comodo egetine metuss gorp.</p>
  </div>
  <div class="tab-pane" id="tab-3">
   <p>Vivamus imperdiet condimentum diam, eget placerat felis consectetur id. Donec eget orci metus, ac adipiscing nunc.</p>
  </div>
  <div class="tab-pane" id="tab-4">
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus, <a href="#">tellus ac cursus</a> comodo egetine metuss gorp.</p>
  </div>
</div>
</div>

Tablatura con collasso veticale (con DATA API)

<div class="panel-group" id="accordion-faq">
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<h4 class="panel-title">
 				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-faq" href="#faq-pannello-1">
					Titolo primo tab</a>
 			</h4>
 		</div>
 		<div id="faq-pannello-1" class="panel-collapse collapse in">
 			<div class="panel-body">
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 		</div>
 	</div>
 	<div class="panel panel-default">
 		<div class="panel-heading">
 			<h4 class="panel-title">
 				<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion-faq" href="#faq-pannello-2">
					Titolo secondo TAB</a>
 			</h4>
 		</div>
 		<div id="faq-pannello-2" class="panel-collapse collapse">
 			<div class="panel-body">
 				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 			</div>
 		</div>
 	</div>   
 </div> 
 

Lista Raggruppata (List-Group)

<ul class="list-group servizi">
  <li class="list-group-item"><h4>Opzione Free</h4></li>
  <li class="list-group-item"><strong>Gratuito</strong></li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item"><button class="btn btn-success btn-block btn-round-bottom" type="button">Abbonati</button></li>
 </ul>

Galleria di media (media-list media-object)

Esempio:

 <ul class="media-list">
  <li class="media">
   <img class="media-object pull-left" src="assets/img/post-thumb-1.jpg">
   <div class="media-body">
   <h5 class="media-heading">Titolo post</h5>
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine.</p>    
   </div>
  </li>
  <li class="media">
   <img class="media-object pull-left" src="assets/img/post-thumb-2.jpg">
   <div class="media-body">
   <h5 class="media-heading">Titolo post</h5>
   <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine.</p>    
   </div>
  </li>
 </ul>

Secondo esempio (usando le DATA API):

<div class="portfolio-thumbnail">
 <a data-toggle="modal" href="#modal-1">
 <img src="assets/img/fancybox/pretty-1-th.jpg" alt="">
 <div class="portfolio-caption">
 <h4 class="text-center">Lorem ipsum</h4>
 </div>
 </a>
 </div>
.....
<div class="modal fade" id="modal-1">
 <div class="modal-dialog">
  <div class="modal-content">
   <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">Sito di Lorem.com</h4>
   </div>
   <div class="modal-body">
    <img src="assets/img/fancybox/pretty-1.jpg" alt="" class="img-responsive">
   </div>
   <div class="modal-footer">
    <a href="#" class="btn btn-primary">Visita il sito</a>
   </div>
  </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 

Menù a briciole di pane (breadcrumb)

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Pagina</a></li>
  <li class="active">Sotto-pagina</li>
</ul>