Bootstrap - Buttoni Dimostrazione

Ciao هناك، super stella del coding futuro! Oggi, ci immergeremo nel meraviglioso mondo dei pulsanti di Bootstrap. Come il tuo amico insegnante di computer del vicinato, sono qui per guidarti in questo viaggio, passo dopo passo. Allora, prendi la tua bevanda preferita, mettiti comodo, e insieme intraprendiamo questa avventura emozionante!

Bootstrap - Buttons Demo

Cos'è un Bottone Bootstrap?

Prima di addentrarci nei dettagli, parliamo di cosa sono esattamente i pulsanti Bootstrap. Immagina di stanno costruendo una casa. Le pareti e il tetto sono la tua struttura HTML, la vernice è il tuo CSS, e Bootstrap? Beh, è come avere una cassetta degli attrezzi magica che rende tutto più facile e bello. I pulsanti Bootstrap sono pulsanti pre-stilizzati e pronti all'uso che puoi aggiungere facilmente alle tue pagine web.

Iniziare con Bootstrap

Prima di tutto, dobbiamo allestire il nostro campo di gioco Bootstrap. Non preoccuparti, è più facile che impostare una partita a Monopoli!

Passo 1: Configurazione della Struttura HTML

Iniziamo con una struttura HTML 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 Buttoni Dimostrazione</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<!-- I nostri pulsanti andranno qui -->
</div>

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

Questo è come preparare il tuo canvas prima di dipingere. Abbiamo incluso i file CSS e JS di Bootstrap, che ci danno accesso a tutti i benefici di Bootstrap.

Pulsanti Bootstrap di Base

Ora, aggiungiamo alcuni pulsanti alla nostra pagina!

<button type="button" class="btn btn-primary">Primario</button>
<button type="button" class="btn btn-secondary">Secondario</button>
<button type="button" class="btn btn-success">Successo</button>
<button type="button" class="btn btn-danger">Pericolo</button>
<button type="button" class="btn btn-warning">Avviso</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Chiaro</button>
<button type="button" class="btn btn-dark">Scuro</button>

Ecco cosa fa ogni classe:

btn: Questa è la classe di base per tutti i pulsanti Bootstrap.
btn-primary, btn-secondary, ecc.: Queste classi definiscono il colore e lo stile del pulsante.

Dimensioni dei Pulsanti

Proprio come puoi ottenere diverse dimensioni di patatine in un fast-food, anche i pulsanti Bootstrap sono disponibili in diverse dimensioni!

<button type="button" class="btn btn-primary btn-lg">Pulsante grande</button>
<button type="button" class="btn btn-primary">Pulsante predefinito</button>
<button type="button" class="btn btn-primary btn-sm">Pulsante piccolo</button>

btn-lg: Rende il pulsante più grande
btn-sm: Rende il pulsante più piccolo

Pulsanti a Bordo

A volte, vuoi un pulsante un po' più sottile. È qui che entrano in gioco i pulsanti a bordo!

<button type="button" class="btn btn-outline-primary">Primario</button>
<button type="button" class="btn btn-outline-secondary">Secondario</button>
<button type="button" class="btn btn-outline-success">Successo</button>

Le classi btn-outline-* ti danno pulsanti con bordi colorati e sfondi trasparenti.

Pulsanti a Blocco

Hai bisogno di un pulsante che occupi toda la larghezza del suo genitore? I pulsanti a blocco sono i tuoi amici!

<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Pulsante a blocco</button>
<button class="btn btn-primary" type="button">Pulsante a blocco</button>
</div>

La classe d-grid sul div genitore e la classe gap-2 aggiungono dello spazio tra i pulsanti.

Stati dei Pulsanti

I pulsanti possono avere diversi stati, proprio come noi abbiamo diversi umori!

<button type="button" class="btn btn-primary">Pulsante Normale</button>
<button type="button" class="btn btn-primary active">Pulsante Attivo</button>
<button type="button" class="btn btn-primary" disabled>Pulsante Disabilitato</button>

La classe active fa sembrare il pulsante premuto.
L'attributo disabled rende il pulsante non cliccabile.

Pulsanti a Commutazione

I pulsanti a commutazione sono come interruttori della luce - possono essere accesi o spenti!

<button type="button" class="btn btn-primary" data-bs-toggle="button">Pulsante a commutazione</button>
<button type="button" class="btn btn-primary active" data-bs-toggle="button" aria-pressed="true">Pulsante a commutazione attivo</button>

L'attributo data-bs-toggle="button" abilita la funzionalità di commutazione.

Gruppi di Pulsanti

A volte, i pulsanti piace socializzare. È qui che entrano in gioco i gruppi di pulsanti!

<div class="btn-group" role="group" aria-label="Esempio di base">
<button type="button" class="btn btn-primary">Sinistra</button>
<button type="button" class="btn btn-primary">Centro</button>
<button type="button" class="btn btn-primary">Destra</button>
</div>

La classe btn-group raggruppa i pulsanti insieme.

Pulsanti a Dropdown

I pulsanti a dropdown sono come scatole sorpresa - cliccali, e appaiono altre opzioni!

<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Pulsante a dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Azione</a></li>
<li><a class="dropdown-item" href="#">Un'altra azione</a></li>
<li><a class="dropdown-item" href="#">Qualcosa di diverso qui</a></li>
</ul>
</div>

La classe dropdown-toggle e l'attributo data-bs-toggle="dropdown" abilitano la funzionalità dropdown.

Conclusione

Congratulazioni! Hai appena completato un girotondo attraverso i pulsanti Bootstrap. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con diverse combinazioni. Chi lo sa? Potresti creare la prossima grande cosa nel design web!

Ecco una tabella di riferimento rapida di tutte le classi di pulsanti che abbiamo coperto:

Classe	Descrizione
btn	Classe di base del pulsante
btn-primary	Pulsante colore primario
btn-secondary	Pulsante colore secondario
btn-success	Pulsante colore successo
btn-danger	Pulsante colore pericolo
btn-warning	Pulsante colore avviso
btn-info	Pulsante colore info
btn-light	Pulsante colore chiaro
btn-dark	Pulsante colore scuro
btn-lg	Pulsante grande
btn-sm	Pulsante piccolo
btn-outline-*	Pulsante a bordo
active	Pulsante stato attivo
disabled	Pulsante disabilitato
data-bs-toggle="button"	Pulsante a commutazione
btn-group	Gruppo di pulsanti
dropdown-toggle	Pulsante a dropdown

Buon coding, e possa il Bootstrap essere con te!

Credits: Image by storyset

Tutorial precedente:

Bootstrap - Demo Griglia

Prossimo tutorial:

Bootstrap - Dimostrazione di navigazione