Italiano

Tutorial Bootstrap

Layout Bootstrap

Contenuto Bootstrap

Componenti Bootstrap

Bootstrap Formulari

Aiuti Bootstrap

Utilità Bootstrap

Demos Bootstrap

Bootstrap - FooterNavbar fissato in basso Demo

Ciao a tutti, aspiranti sviluppatori web! Oggi ci imbarcheremo in un viaggio entusiasmante per creare una footer navbar fissata in basso utilizzando Bootstrap. Come il vostro amico del computer di quartiere, vi guiderò attraverso questo processo passo per passo, assicurandomi che comprendiate ogni pezzo di codice che scriviamo. Allora, prendete la vostra bevanda preferita, sedetevi e tuffiamoci dentro!

Bootstrap-Sticky footer navbar Demo

Cos'è una Footer Navbar Fissata in Basso?

Prima di iniziare a codificare, capiremo cosa stiamo cercando di ottenere. Una footer navbar fissata in basso è una barra di navigazione che rimane in fondo alla pagina, indipendentemente dalla quantità di contenuto presente o da quanto si scende nella pagina. È come quel fedele amico che ti rimane accanto attraverso le avversità!

Perché Usare una Footer Navbar Fissata in Basso?

  1. Fornisce un facile accesso a link o azioni importanti.
  2. Risparmia spazio sullo schermo, specialmente sui dispositivi mobili.
  3. Migliora l'esperienza utente mantenendo le opzioni di navigazione sempre visibili.

Ora che sappiamo cosa stiamo costruendo e perché è utile, mettiamo le mani sporche con un po' di codice!

Configurazione della Struttura HTML

Prima di tutto, dobbiamo configurare la struttura di base del nostro documento HTML. Non preoccupatevi se siete nuovi a HTML; spiegherò ogni parte mentre procediamo.

<!DOCTYPE html>
<html lang="it" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Navbar Fissata in Basso Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex flex-column h-100">
<!-- Aggiungeremo il nostro contenuto qui -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Ecco una spiegazione dettagliata:

  1. <!DOCTYPE html>: Questo informa il browser che stiamo utilizzando HTML5.
  2. <html lang="it" class="h-100">: L'elemento radice della nostra pagina. Abbiamo aggiunto la classe h-100 per fare in modo che occupi il 100% dell'altezza del viewport.
  3. All'interno del tag <head>:
  • Impostiamo la codifica dei caratteri e il viewport.
  • Diamo alla nostra pagina un titolo.
  • Colleghiamo il file CSS di Bootstrap.
  1. <body class="d-flex flex-column h-100">: Utilizziamo le classi di Bootstrap per fare del corpo un contenitore flessibile che occupa il 100% dell'altezza del viewport.
  2. Alla fine del <body>, includiamo il file JavaScript di Bootstrap.

Creazione dell'Header

Ora, aggiungiamo un header alla nostra pagina:

<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar fissata</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabilitato</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Cerca" aria-label="Cerca">
<button class="btn btn-outline-success" type="submit">Cerca</button>
</form>
</div>
</div>
</nav>
</header>

Questo codice crea una barra di navigazione reattiva che rimane in alto sulla pagina. Include un nome del brand, link di navigazione e un modulo di ricerca. La barra di navigazione si riduce a un menu a hamburger sui dispositivi più piccoli.

Aggiunta del Contenuto Principale

Successivamente, aggiungiamo del contenuto principale alla nostra pagina:

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer fissato con navbar fissata</h1>
<p class="lead">Fissa un footer in fondo al viewport nei browser desktop con questo HTML e CSS personalizzati.</p>
<p>Usa <a href="#">il footer fissato con una navbar fissata</a> se necessario, troppo.</p>
</div>
</main>

La classe flex-shrink-0 sull'elemento <main> assicura che non si riduca quando c'è poco spazio, spingendo il nostro footer in basso.

Creazione del Footer Fissato

Ora, arrivederci al nostro showpiece, il footer fissato:

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Metti qui il contenuto del footer fissato.</span>
</div>
</footer>

La classe mt-auto spinge il footer in fondo alla pagina quando non c'è abbastanza contenuto per riempire il viewport.

Aggiunta del CSS Personalizzato

Per fare in modo che tutto funzioni perfettamente, dobbiamo aggiungere un po' di CSS personalizzato. Aggiungete questo dentro un tag <style> all'interno del <head> del vostro documento:

<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>

Questo CSS aggiungesome padding all'alto del nostro contenuto principale (per evitare che venga nascosto dalla navbar fissata) e imposta un colore di sfondo per il footer.

Mettere Tutto Insieme

Ecco il nostro codice completo:

<!DOCTYPE html>
<html lang="it" class="h-100">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Footer Navbar Fissata in Basso Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
main > .container {
padding: 60px 15px 0;
}

.footer {
background-color: #f5f5f5;
}
</style>
</head>
<body class="d-flex flex-column h-100">
<header>
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar fissata</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabilitato</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Cerca" aria-label="Cerca">
<button class="btn btn-outline-success" type="submit">Cerca</button>
</form>
</div>
</div>
</nav>
</header>

<main class="flex-shrink-0">
<div class="container">
<h1 class="mt-5">Footer fissato con navbar fissata</h1>
<p class="lead">Fissa un footer in fondo al viewport nei browser desktop con questo HTML e CSS personalizzati.</p>
<p>Usa <a href="#">il footer fissato con una navbar fissata</a> se necessario, troppo.</p>
</div>
</main>

<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<span class="text-muted">Metti qui il contenuto del footer fissato.</span>
</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Conclusione

Ecco fatto, ragazzi! Abbiamo creato con successo una pagina web con una footer navbar fissata in basso utilizzando Bootstrap. Ricorda, lo sviluppo web è come cucinare - richiede pratica per farlo bene. Quindi non ti scoraggiare se non ha un aspetto perfetto al primo tentativo. Continua a sperimentare, e prima di sapere, sarai in grado di creare pagine web bellissime come un cuoco esperto!

Ecco un rapido riassunto di cosa abbiamo imparato:

Componente Scopo
Struttura HTML Fornisce la struttura di base della nostra pagina web
CSS di Bootstrap Ci dà componenti pre-stilizzati e classi di utilità
CSS Personalizzato Ci permette di affinare l'aspetto della nostra pagina
Header Contiene la nostra barra di navigazione
Contenuto Principale Contiene il contenuto principale della nostra pagina
Footer Rimane in fondo alla pagina, anche quando il contenuto è breve
JS di Bootstrap Abilita componenti interattivi come la barra di navigazione collapse

Ricorda, la chiave per padroneggiare lo sviluppo web è la pratica e la curiosità. Quindi continua a codificare, continua a imparare, e, cosa più importante, divertiti! Fino alla prossima volta, happy coding!

Credits: Image by storyset

Tutorial precedente:
Demo Dashboard Bootstrap
Prossimo tutorial:
Demo Bootstrap-Masonry