Sintesi della lezione
Materiali da utilizzare per la lezione
Logo in formato png con sfondo trasparente (clicca l'iimagine per scaricarla):
Thumbnails
Immagini intere
Approfondimenti su Bootstrap
Come inserire Bootstrap 4 in una pagina Web
Codice HTML ottenuto
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Esempio</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<script
src="http://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/bootstrap.bundle.min.js"></script>
</body>
</html>
Inserire la componente navbar
Codice HTML ottenuto
<nav class="navbar navbar-expand-lg navbar-dark bg-personale2 fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="immagini/testata.png" alt="Logo"/>
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
Regole inserite in css/custom.css
.navbar-brand img {
height: 35px;
width: auto;
}
.bg-personale2 {
background-color: rgba(1,51,13,0.71)
}
Inserire una cover a pieno schermo
Codice HTML ottenuto
<div class="fullscreen-cover d-flex">
<div class="bg-personale-light w-100 mt-auto mb-3">
<div class="container">
<h1 class="display-3">Bologna sogna</h1>
<p class="display-4">Mostra permanente</p>
<p>Palazzo Fava, Bologna</p>
</div>
</div>
</div>
Regole inserite in css/custom.css
/* Cover */
.fullscreen-cover {
min-height: 100vh;
background-image: url(../immagini/BarberiaViaTestoni_l.jpg);
background-size: cover;
background-position: center;
}
.bg-personale-light {
background-color: rgba(255,253,253,0.75);
}
Inserire una sezione con testo e immagine
Codice HTML ottenuto
<section class="page-section" id="chisiamo">
<div class="container">
<h1>Chi siamo</h1>
<div class="row">
<div class="col-md-9">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos
sit incidunt minus officia porro accusamus culpa, eum, reprehenderit,
nam omnis iure similique, illum magni! Ipsam tempora similique non aliquam
necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quod
eligendi fugiat, expedita! Magni rem, quibusdam tempora, vel ratione nam
optio soluta minus incidunt ut consequatur dolor quae facere? Quia. Lorem
ipsum dolor sit amet, consectetur adipisicing elit. Architecto consequuntur
dicta tempora. Unde distinctio cumque odio assumenda, adipisci placeat, vel
quaerat obcaecati quos velit, modi consequatur molestias laudantium,
quisquam possimus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis illum quae
magni, itaque laudantium iusto nobis laboriosam labore, maxime quaerat soluta
esse sit, reprehenderit animi rerum explicabo. Facilis, impedit, officiis.
</p>
</div>
<div class="col-md-3">
<img src="immagini/um7buv3a.jpg" class="img-fluid" alt=""/>
</div>
</div>
</div>
</section>
Regole inserite in css/custom.css
.page-section {
padding-top: 61px;
padding-bottom: 61px;
}
Inserire una galleria di immagini utilizzando fancybox 3
Codice HTML ottenuto
<head>
........
<!-- Inserimento del foglio di stile necessario per utilizzare il plugin Fancybox -->
<link href="css/jquery.fancybox.min.css" rel="stylesheet" type="text/css">
</head>
<body>
...........
<section class="page-section" id="gallery">
<div class="container">
<h1>Galleria di foto</h1>
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/OsteriaDelSole_xl.jpg" data-fancybox="galleria">
<img src="immagini/OsteriaDelSole.jpg" class="img-fluid"
alt="Osteria del sole">
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/BarberiaViaTestoni_l.jpg" data-fancybox="galleria">
<img src="immagini/BarberiaViaTestoni.jpg" class="img-fluid"
alt="Osteria del sole">
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/ExCartoleriaPalombo_l.jpg" data-fancybox="galleria">
<img src="immagini/ExCartoleriaPalombo.jpg" class="img-fluid"
alt="Osteria del sole">
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/FarmaciaZarri_3_l.jpg" data-fancybox="galleria">
<img src="immagini/FarmaciaZarri_3.jpg" class="img-fluid"
alt="Osteria del sole">
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/LanerieZinelli_2 _l.jpg" data-fancybox="galleria">
<img src="immagini/LanerieZinelli_2.jpg" class="img-fluid"
alt="Osteria del sole">
</a>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<a href="immagini/Maiani_2 _l.jpg" data-fancybox="galleria">
<img src="immagini/Maiani_2.jpg" class="img-fluid" alt="Osteria del sole">
</a>
</div>
</div>
</div>
</section>
................
<!-- File javascipt necessario per utilizzare il plugin Fancybox -->
<script type="text/javascript" src="js/jquery.fancybox.min.js"></script>
</body>
Inserire un carosello di immagini utilizzando Bootstrap
Codice HTML ottenuto
<section class="page-section" id="slideshow">
<div class="container">
<h1>Carousel</h1>
<div id="carouselExampleSlidesOnly" class="carousel slide"
data-ride="carousel" data-interval="3000">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="immagini/ExCartoleriaPalombo_l.jpg"
alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="immagini/Maiani_2 _l.jpg" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="immagini/OsteriaDelSole_xl.jpg"
alt="Third slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="immagini/Tamburini_2 _l.jpg" alt="Third slide">
</div>
</div>
</div>
</div>
</section>
Inserire un video da Youtube in modo responsive
Codice HTML ottenuto
<section class="page-section" id="video">
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe src="https://www.youtube.com/embed/vDjcWlCT8rg" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen
class="embed-responsive-item"></iframe>
</div>
</div>
</section>
Inserire una mappa da Google Map in modo responsive
Codice HTML ottenuto
<section class="page-section" id="dovesiamo">
<div class="container">
<h1>Dove siamo</h1>
<div class="row">
<div class="col-md">
<div class="embed-responsive embed-responsive-1by1">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2845.912290228982!2d11.339848651154876!3d44.49646397899902!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477fd4bf11032ff7%3A0x510d3858866e7936!2sPalazzo+Fava!5e0!3m2!1sit!2sit!4v1521222748214"
class="embed-responsive-item" allowfullscreen></iframe>
</div>
</div>
<div class="col-md">
<h3>Palazzo Fava</h3>
<p>via Manzoni
<br> Bologna
</p>
<p>Tel.: </p>
<p> e-mail: </p>
</div>
</div>
</div>
</section>
Creare un footer utilizzando la navbar di bootstrap
Codice HTML ottenuto
<footer class="navbar navbar-dark bg-personale2 fixed-bottom">
<div class="navbar-text mx-auto">© 2018 Sida Group</div>
</footer>
Creare un footer utilizzando la navbar di bootstrap
Codice HTML ottenuto
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#chisiamo">Chi siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Esempi </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#gallery">Galleria foto</a>
<a class="dropdown-item" href="#slideshow">Carosello di immagini</a>
<a class="dropdown-item" href="#video">Video</a>
<a class="dropdown-item" href="#dovesiamo">Dove siamo</a>
</div>
</li>
</ul>