HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Impostazione della viewport per una corretta
visualizzazione sui dispositivi mobili -->
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<!-- Bootstrap: foglio di stile core -->
<link href="../css/bootstrap.css" rel="stylesheet" />
<!-- Foglio di stile core della personalizzazione -->
<link href="../css/custom.css" rel="stylesheet" />
<title>Esperimenti Bootstrap</title>
</head>
<body>
<!-- Testata del sito -->
<header class="jumbotron">
<!-- container: larghezza fissa con
margine destro e sisistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<!-- mb-sm classe che aggiunge un margine
inferiore di 15px definito in custom.css -->
<div class="row mb-sm">
<!-- Il logo è largo due colonne su schermo large e medio,
4 colonne su tablet verticale e 6 colonne su smartphone-->
<div class="col-md-2 col-md-offset-5 col-sm-4 col-sm-offset-4 col-xs-6 col-xs-offset-3"> <img src="../img/Logo-Accademia.png" alt="Logo Accademia" class="img-responsive center-block" /> </div>
</div>
</div>
<!-- container: larghezza fissa con
margine destro e sisistro uguali -->
<div class="container">
<!-- row: contenitore per elementi con classi col-*-* -->
<div class="row">
<!-- La testata è divisa in due colonne uguali su medio,
2 colonne asimmetrice si schermo HD -->
<div class="col-md-6 col-lg-4"> <img src="http://lorempixel.com/970/970" alt="Immagine casuale da lorempixel" class="img-responsive img-circle" /> </div>
<div class="col-md-6 col-lg-8">
<h1>Questo è un titolo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, ducimus! Magnam fugiat porro illo, tenetur.</p>
</div>
</div>
</div>
</header>
<!-- container: larghezza fissa con
margine destro e sisistro uguali -->
<div class="container">
<div class="row">
<!-- row: contenitore per elementi con classi col-*-* -->
<div class="col-sm-4">
<h1 class="text-center"> <span class="glyphicon glyphicon-user glyphicon-circle"></span><br />
<small>Biografia</small> </h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quod facilis, aliquam ut asperiores.</p>
<p class="text-center"> <a href="#" class="btn btn-primary">Per saperne di più</a> </p>
</div>
<div class="col-sm-4">
<h1 class="text-center"> <span class="glyphicon glyphicon-text-width glyphicon-circle"></span><br />
<small>Tipografia</small> </h1>
<p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate repellat quod facilis, aliquam ut asperiores.</p>
<p class="text-center"> <a href="../tipografia/index.html" class="btn btn-primary">Guarda qua...</a> </p>
</div>
<div class="col-sm-4"> </div>
</div>
</div>
<!-- Libreria jQuery -->
<script src="../js/jquery-3.2.0.min.js"></script>
<!-- Plugin di Bootstrap -->
<script src="../js/bootstrap.min.js"></script>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
/* Modifica colori di fondo e di primo piano di jumbotron*/
.jumbotron{
background-color: #333333;
color:white;
}
/* Aggiunge ad un elemento un margine inferiore
di 15 oixel */
.mb-sm {
margin-bottom: 15px;
}
.icon-circle {
border: solid 2px #888;
padding: 12px 7px 7px 15px;
border-radius: 50%;
}
/* Ho creato questa nuova classe da aggiungere alla classe gluphicon
per ottenere un incona grande circondata da un bordo circolare
Migliore della precedente e meno legata alla grandezza del carattere*/
.glyphicon-circle {
border: solid 2px #888;
padding: 12px 15px;
border-radius: 50%;
font-size: 36px;
top:2px;
}
/* Elimina l'arrotondamete dei pulsanti */
.btn {
border-radius: 0;
}