Bootstrap - Demo laterale
Ciao, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio emozionante nel mondo delle barre laterali di Bootstrap. Come il vostro amico insegnante di scienze informatiche del quartiere, sono entusiasta di guidarvi attraverso questo argomento. Allora, prendetevi la vostra bevanda preferita, mettetevi comodi e tuffiamoci!
Cos'è una barra laterale?
Prima di iniziare a codificare, capiremo cos'è effettivamente una barra laterale. Immagina di leggere un libro e di avere una colonna stretta sul lato della pagina con informazioni aggiuntive o link rapidi. Questo è essenzialmente ciò che è una barra laterale nel design web!
Una barra laterale è una colonna verticale tipicamente posizionata sul lato sinistro o destro di una pagina web. Spesso contiene link di navigazione, informazioni aggiuntive o altri contenuti che completano l'area principale del contenuto. Le barre laterali aiutano a organizzare le informazioni e migliorano l'esperienza utente fornendo un accesso rapido a elementi importanti.
Creare una barra laterale di base con Bootstrap
Ora che sappiamo cos'è una barra laterale, creiamo una utilizzando Bootstrap. Inizieremo con un esempio semplice e poi lo svilupperemo gradualmente.
Passo 1: Configurare la struttura HTML
Prima di tutto, dobbiamo configurare la nostra struttura HTML. Ecco un template di base:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Sidebar Demo</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<!-- Barra laterale -->
<div class="col-md-3 sidebar">
<!-- Il contenuto della barra laterale andrà qui -->
</div>
<!-- Contenuto principale -->
<div class="col-md-9 main-content">
<!-- Il contenuto principale andrà qui -->
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>In questo template, abbiamo creato un contenitore con due colonne: una per la barra laterale (3 unità di larghezza) e una per il contenuto principale (9 unità di larghezza). Bootstrap utilizza un sistema di griglia a 12 colonne, quindi questi numeri sommati arrivano a 12.
Passo 2: Aggiungere contenuto alla barra laterale
Aggiungiamosome contenuto alla nostra barra laterale:
<!-- Barra laterale -->
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu della Barra Laterale</h3>
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Servizi</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contatti</a>
</li>
</ul>
</div>Qui, abbiamo aggiunto un titolo e una lista di link di navigazione alla nostra barra laterale. La classe bg-light gli dà un colore di sfondo chiaro.
Passo 3: Aggiungere contenuto principale
Aggiungiamo del contenuto all'area principale:
<!-- Contenuto principale -->
<div class="col-md-9 main-content">
<h1 class="mt-3">Benvenuti sul nostro sito web</h1>
<p>Questo è l'area del contenuto principale. È dove verrà visualizzata l'informazione primaria della vostra pagina.</p>
</div>Migliorare la barra laterale
Ora che abbiamo una barra laterale di base, miglioriamola con alcune funzionalità aggiuntive.
Aggiungere una casella di ricerca
<div class="col-md-3 sidebar bg-light">
<h3 class="mt-3">Menu della Barra Laterale</h3>
<form class="d-flex mb-3">
<input class="form-control me-2" type="search" placeholder="Cerca" aria-label="Cerca">
<button class="btn btn-outline-success" type="submit">Cerca</button>
</form>
<!-- ... il resto del contenuto della barra laterale ... -->
</div>Questo aggiunge una casella di ricerca in alto nella nostra barra laterale, dando agli utenti un modo rapido per trovare contenuti.
Aggiungere menu a discesa
Aggiungiamo un menu a discesa alla nostra barra laterale:
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Prodotti
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Prodotto 1</a></li>
<li><a class="dropdown-item" href="#">Prodotto 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Offerta speciale</a></li>
</ul>
</li>Aggiungete questo codice all'interno del <ul class="nav flex-column"> nella vostra barra laterale. Questo crea un menu a discesa per "Prodotti".
Rendere la barra laterale reattiva
Una delle sfide con le barre laterali è renderle funzionanti bene sui dispositivi mobili. Rendiamo la nostra barra laterale reattiva:
<div class="container-fluid">
<div class="row">
<!-- Barra laterale -->
<div class="col-md-3 sidebar bg-light" id="sidebar">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="collapse" data-bs-target="#sidebarContent">
Attiva/Disattiva Barra Laterale
</button>
<div class="collapse d-md-block" id="sidebarContent">
<!-- ... contenuto della barra laterale ... -->
</div>
</div>
<!-- Contenuto principale -->
<div class="col-md-9 main-content">
<!-- ... contenuto principale ... -->
</div>
</div>
</div>Abbiamo aggiunto un pulsante di attivazione/disattivazione che appare solo su schermi piccoli (d-md-none), e abbiamo avvolto il contenuto della barra laterale in un div collapse. Su schermi più grandi, la barra laterale sarà sempre visibile (d-md-block).
Stile della barra laterale
Infine, aggiungiamosome CSS personalizzato per rendere la nostra barra laterale ancora più bella:
<style>
.sidebar {
min-height: 100vh;
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}
.sidebar .nav-link {
color: #333;
}
.sidebar .nav-link.active {
color: #007bff;
}
</style>Aggiungete questo al <head> del vostro HTML. Questo CSS rende la barra laterale dell'altezza piena, aggiunge un'ombra sottile e stila i link di navigazione.
Conclusione
Congratulazioni! Avete appena creato una barra laterale Bootstrap completamente funzionale e reattiva. Ricordate, la pratica fa la perfezione, quindi non avete paura di sperimentare con diversi layout e stili.
Ecco una tabella che riassume le classi chiave di Bootstrap che abbiamo utilizzato:
| Classe | Scopo |
|---|---|
| container-fluid | Crea un contenitore a larghezza piena |
| row | Crea un gruppo orizzontale di colonne |
| col-md-3 | Crea una colonna 3 unità larga su schermi medi e superiori |
| bg-light | Aggiunge un colore di sfondo chiaro |
| nav | Indica un componente di navigazione |
| nav-item | Stila un elemento di navigazione |
| nav-link | Stila un link di navigazione |
| dropdown | Crea un menu a discesa |
| btn | Stila un pulsante |
| form-control | Stila input form |
Continuate a programmare, continuate a imparare e, soprattutto, divertitevi! Ricordate, ogni maestro è stato prima un principiante. Il vostro viaggio nello sviluppo web è appena iniziato, e sono entusiasta di vedere dove vi porterà!
Credits: Image by storyset