Vedi l'esercizio a piena pagina
/bootstrap/index.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/custom.css
@charset "utf-8";
/* CSS Document */
/* Modifica colori di fondo e di primo piano di jumbotron*/
.jumbotron {
background-color: #333333;
color: white;
}
/* =================================================
COLORI
================================================= */
/*
=========================================================
Invece che definire i colori per l'elemento con classe
jumbotron posso definire classi generiche che applichino
accoppiamenti di colore e di caratteristiche di font
applicabili a qualsiasi elemento
=========================================================
*/
/* colori di sfondo e di primo piano per gli elementi com
class bg-dark */
.bg-dark {
background-color: #333333;
color: white;
}
/* Definisto a colori per il link ipertestuale */
.bg-dark a {
color: #ffffaa;
}
.bg-dark a:hover {
color: #bbbb99;
}
/*
Bootstrap definisce un colore specifico per l'elemento
small (elemento html che serve a identificare una
parte di testo scritta in corpo minore dello standard)
quando e dentro un titolo. Questo colore (#777777) è poco
leggibile con il background che ho scelto quindi lo
cambio. Uso l'opzione !important per fare in modo che
questa regola sostituisca qualsiasi regola precedente
anche se più specifica.
*/
.bg-dark small, .bg-dark .small {
color: #bbbbbb !important;
}
/* Altro esempio */
.bg-deepblue {
background-color: #001633;
color: #ffffee;
}
.bg-deepblue small, .bg-deepblue .small {
color: #bbbbaa !important;
}
.bg-deepblue a {
color: #bbffff;
}
.bg-deepblue a:hover {
color: #bbbbaa;
}
/* =================================================
UTILITÀ
================================================= */
/* Aggiungono margine inferiore
classe responsive più sotto vengono definiti
margini maggiori per schermi superioni a 768px*/
.mb-sm {
margin-bottom: 5px;
}
.mb-md {
margin-bottom: 15px;
}
.mb-lg {
margin-bottom: 30px;
}
/* Classe sostituita da quella definita sotto */
.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;
}
/* La classe text-center-sm allinea
il testo al centro solo sui dispositivi a schermo piccolo */
.text-center-sm {
text-align: center;
}
/* =================================================
BOTTONI
================================================= */
/* Elimina l'arrotondamento dei pulsanti */
.btn {
border-radius: 0;
/* Converte i maiuscolo e aumente lo spazio tr i caratteri */
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-outline, a.btn-outline {
background-color: transparent;
color: #ffffee;
border: solid 2px #ffe;
letter-spacing: 3px;
}
.btn-outline:hover, a.btn-outline:hover {
background-color: rgba(255, 255, 255, 0.6);
color: #333333;
}
/* =================================================
NAVBAR
=================================================*/
.navbar-fixed-padding {
padding-top: 50px;
}
.navbar-darkblue {
background-color: darkblue;
}
.navbar-darkblue .navbar-brand {
color: yellow;
}
.navbar .navbar-header .navbar-brand {
padding-top: 5px;
padding-bottom: 8px;
height: 70px;
}
.navbar .navbar-header .navbar-brand img {
max-height: 100%;
width: auto;
display: inline-block;
margin-right: 10px;
}
.navbar .navbar-header .navbar-brand span {
padding-top: 19px;
padding-bottom: 25px;
display: inline-block;
}
.navbar {
height: 70px;
}
.navbar-nav >li > a {
padding-top: 25px;
padding-bottom: 25px;
}
/* =================================================
SEZIONI
================================================= */
.sezione {
padding: 80px 0;
}
/* =================================================
ANIMAZIONI
================================================= */
.animated {
transition-property: all;
transition-timing-function: ease-in-out;
transition-duration: 1s;
}
.delay05 {
transition-delay: 0.5s;
}
.delay1 {
transition-delay: 1s;
}
.delay2 {
transition-delay: 2s;
}
.slow {
transition-duration: 1.5s;
}
.fast {
transition-duration: 0.5;
}
.animated.out {
opacity:0;
}
.fade-top.out {
transform: translateY(-50px);
}
.rotate.out {
transform: rotate(-720deg);
}
/* ==================================================
INTERRUTTORE
================================================== */
.interruttore {
border: 0;
background-color: transparent;
height: 90px;
width: 90px;
background-image: url(../img/interruttore.png);
background-position: top left;
}
.interruttore.on {
background-position: top right;
}
.interruttore:focus {
outline: 0;
}
#esercizio4 img {
transition: all 0.7s;
}
.shrink {
height:0;
transition: all 1s;
opacity: 0;
}
/* ==================================================
FULLSCREEN
================================================== */
.fullscreen-cover {
min-height: 100vh;
background-size: cover;
background-position: center;
background-image: url(https://unsplash.it/1280/720/?image=279);
position: relative;
}
.center-title {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bg-gray {
background-color: rgba(50,50,50,0.4);
}
.bottom-title {
width: 100%;
position: absolute;
top: 75%;
transform: translateY(-50%);
}
/* ==================================================
GALLERIA
==================================================*/
/* Miniature responsice a proporsione fissa (75% = 4/3)*/
.miniatura {
display: block;
padding-bottom: 75%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
/* Contenitore galleria: definisce un margine superiore e uno
inferiore*/
.galleria {
margin-top: 30px;
margin-bottom: 50px;
}
/* Gli elementi con classe row all'interno della galleria ha
margini destro e sinistro di -1px anzich+è di -15px */
.galleria .row {
margin-left: -1px;
margin-right: -1px;
}
/* Gli elementi con classe che contene col- all'interno della
galleria hanno padding destro e sinistro di 1px anzichè
15px. Si aggiunge poi un padding inferiore di 1px per
distanziare l'immagine da quella sotto'*/
.galleria [class*="col-"] {
padding-right: 1px;
padding-left: 1px;
padding-bottom: 1px;
}
/* =================================================
RESPONSIVE
================================================= */
/* Tablet verticali */
@media only screen and (min-width:768px) {
.mb-sm {
margin-bottom: 15px;
}
.mb-md {
margin-bottom: 30px;
}
.mb-lg {
margin-bottom: 60px;
}
}
/* Tablet orizzontali */
@media only screen and (min-width:992px) {
/* Su tablet orizzontali e desk top la classe text-center-sm allinea
il testo a sinistra */
.text-center-sm {
text-align: left;
}
}
/css/custom-fints.css
In questo foglio di stile ho inserito solo le regole di stile che riguardato i font personalizzati (Google Fonts) che ho utilizzato nelle mia pagina di esempio
@charset "utf-8";
/*
================================================================
File: /css/custom-fonts.css
Ho creato uno foglio di stile specifico per i fonts in modo da
non modificare custom.css.
In questo file:
1. Importo con la direttiva @import le regole di stile che mi
consentono di utilizzare i fonts Google
2. Imposto le regole di stile di body e di h1 - h6 e delle
classi bootstrap .h1 - .h6 per l'utilizzo dei font scelti.
=================================================================
*/
/* Importo le regole che mi consentono di utilizzare i Google Fonts */
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700|Quicksand:300,700');
body {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 400;
line-height: 1.4;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
font-family: 'Quicksand', sans-serif;
}
.giant {
font-size: 3.38em;
}
.huge {
font-size: 2.95em;
}
h1, .h1 {
font-size: 2.58em;
}
h2, .h2 {
font-size: 1.82em;
}
h3, .h3 {
font-size: 2.48em;
}
h4, .h4 {
font-size: 1.29em;
}
h5, .h5 {
font-size: 1.15em;
}
h6, .h6 {
font-size: 1em;
}
.small, small {
font-size: .85em;
}