Italiano

Tutorial Bootstrap

Layout Bootstrap

Contenuto Bootstrap

Componenti Bootstrap

Bootstrap Formulari

Aiuti Bootstrap

Utilità Bootstrap

Demos Bootstrap

Bootstrap - Checkout Demo

Panoramica

Ciao, futuri sviluppatori web! Oggi ci imbarcheremo in un viaggio entusiasmante per creare una pagina di checkout utilizzando Bootstrap. Come il tuo amico insegnante di informatica del quartiere, sono felice di guidarti in questo processo. Non preoccuparti se sei nuovo alla programmazione - procederemo passo dopo passo, e alla fine, avrai un modulo di checkout professionale di cui essere orgoglioso!

Bootstrap-Checkout Demo

Cos'è Bootstrap?

Prima di immergerci, parliamo di Bootstrap. Immagina di costruire una casa. Invece di creare ogni mattonella da zero, non sarebbe fantastico se avessi muri e tetti pre-fatti? Questo è ciò che Bootstrap fa per lo sviluppo web - una raccolta di componenti e stili pre-costruiti che rendono la creazione di siti web belli molto più semplice e veloce.

Configurazione del Progetto

Passo 1: Includere Bootstrap

Prima di tutto, dobbiamo includere Bootstrap nel nostro progetto. È come preparare il nostro set di attrezzi prima di iniziare a lavorare. Aggiungi queste linee nel <head> del tuo file HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

Queste linee recuperano gli stili e gli script di Bootstrap da internet, quindi non dobbiamo scaricare nulla.

Passo 2: Struttura HTML di Base

Ora, impostiamo la nostra 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>Checkout Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>Modulo di Checkout</h1>
<!-- Il nostro modulo andrà qui -->
</div>

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

Questo crea una pagina web di base con un titolo e un contenitore per il nostro modulo. La classe container è una classe Bootstrap che centra il nostro contenuto e gli aggiunge un po' di padding.

Creazione del Modulo di Checkout

Passo 3: Creare il Modulo

Ora, aggiungiamo il nostro modulo all'interno del contenitore:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Nome</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">Cognome</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">Indirizzo</label>
<input type="text" class="form-control" id="address" placeholder="1234 Via Principale" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">Effettua Ordine</button>
</form>

Analizziamo questo:

  1. Utilizziamo il sistema di griglia di Bootstrap con row e col-md-6 per creare due colonne per il nome e il cognome.
  2. La classe mb-3 aggiunge margine inferiore a ciascun gruppo di modulo.
  3. form-label e form-control sono classi Bootstrap che stilizzano le nostre etichette e input.
  4. Le classi btn stilizzano il nostro pulsante di invio.

Passo 4: Aggiungere Informazioni di Pagamento

Aggiungiamo una sezione per le informazioni di pagamento:

<h4 class="mb-3">Pagamento</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">Carta di credito</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit">Carta di debito</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">Nome sulla carta</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">Numero della carta</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">Scadenza</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Qui, abbiamo aggiunto pulsanti radio per la selezione del metodo di pagamento e campi per i dettagli della carta. La classe gy-3 aggiunge spazi verticali tra le righe.

Miglioramento dell'Esperienza Utente

Passo 5: Aggiungere Feedback di Validazione

Bootstrap fornisce classi per il feedback di validazione del modulo. Aggiungiamo alcuni al nostro input del nome:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">Nome</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
Sembra buono!
</div>
<div class="invalid-feedback">
Per favore inserisci il tuo nome.
</div>
</div>

Per far funzionare questo, dobbiamo aggiungere un po' di JavaScript:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

Questo script aggiunge la classe was-validated al modulo alla提交, il che attiva la visualizzazione del feedback di validazione.

Conclusione

Complimenti! Hai appena creato un modulo di checkout professionale utilizzando Bootstrap. Ecco un riassunto di ciò che abbiamo imparato:

  1. Come includere Bootstrap nel nostro progetto
  2. Utilizzare il sistema di griglia di Bootstrap per il layout
  3. Stilizzare gli elementi del modulo con le classi Bootstrap
  4. Aggiungere feedback di validazione

Ricorda, la pratica rende perfetti. Prova a modificare questo modulo, aggiungi nuovi campi o cambia gli stili. Più esperimenti fai, meglio diventerai!

Ecco una tabella delle principali classi Bootstrap che abbiamo utilizzato:

Classe Scopo
container Centra il contenuto e aggiunge padding
row Crea un gruppo orizzontale di colonne
col-md-6 Crea una colonna che è 50% larga su schermi medi e superiori
form-label Stile delle etichette del modulo
form-control Stile degli input del modulo
btn Stile di base del pulsante
btn-primary Dà al pulsante un colore blu
btn-lg Rende il pulsante più grande
form-check Stile dei checkbox e dei pulsanti radio
valid-feedback Mostra il feedback per l'input valido
invalid-feedback Mostra il feedback per l'input non valido

Buon coding, e ricorda - ogni esperto era una volta un principiante. Continua a praticare, e sarai sorpreso di ciò che puoi creare!

Credits: Image by storyset

Tutorial precedente:
Demo di Prezzi Bootstrap
Prossimo tutorial:
Demo Prodotto Bootstrap