Italiano

Tutorial Bootstrap

Layout Bootstrap

Contenuto Bootstrap

Componenti Bootstrap

Bootstrap Formulari

Aiuti Bootstrap

Utilità Bootstrap

Demos Bootstrap

Bootstrap - Checkout RTL Demo

Panoramica

Ciao, futuri sviluppatori web! Oggi esploreremo il mondo affascinante di Bootstrap e creeremo una bellissima pagina di checkout con supporto RTL (da destra a sinistra). Non preoccuparti se sei nuovo a questo – ti guiderò passo dopo passo con la pazienza di un insegnante esperto che ha aiutato innumerevoli studenti come te.

Bootstrap-Checkout RTL Demo

Cos'è Bootstrap?

Prima di immergerci nel nostro demo di checkout, prendiamo un momento per comprendere cos'è Bootstrap. Immagina di costruire una casa. Bootstrap è come un kit prefabbricato che ti fornisce tutti gli elementi strutturali di base di cui hai bisogno. È un framework CSS gratuito e open-source che ti aiuta a creare siti web reattivi e ottimizzati per i dispositivi mobili velocemente e facilmente.

Perché usare Bootstrap?

  1. Risparmia tempo
  2. Garantisce coerenza
  3. Design reattivo pronto all'uso
  4. Grande comunità e supporto

Configurazione del Progetto

Iniziamo configurando il nostro progetto. Dobbiamo includere Bootstrap nel nostro file HTML. Ecco come fare:

<!DOCTYPE html>
<html lang="it" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Checkout RTL Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" rel="stylesheet">
</head>
<body>
<!-- Il nostro contenuto andrà qui -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

In questa configurazione, includiamo sia la versione regolare di Bootstrap CSS che quella RTL. L'attributo dir="rtl" nel tag <html> indica al browser di visualizzare la pagina in direzione da destra a sinistra.

Creazione del Modulo di Checkout

Ora creiamo il nostro modulo di checkout. Useremo il sistema di griglia e i componenti di modulo di Bootstrap per creare un layout reattivo.

<div class="container mt-5">
<h1 class="mb-4">Checkout</h1>
<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>
<!-- Altri campi del modulo andranno qui -->
</form>
</div>

Analizziamo questo codice:

  • La classe container crea un contenitore centrato per il nostro contenuto.
  • Le classi row e col-md-6 creano un layout a due colonne reattivo.
  • Le classi form-label e form-control stilizzano le nostre etichette e input.

Aggiunta di Altri Campi del Modulo

Aggiungiamo altri campi al nostro modulo:

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="address" class="form-label">Indirizzo</label>
<input type="text" class="form-control" id="address" required>
</div>
<div class="row">
<div class="col-md-5 mb-3">
<label for="country" class="form-label">Paese</label>
<select class="form-select" id="country" required>
<option value="">Scegli...</option>
<option>Stati Uniti</option>
<option>Canada</option>
<option>Messico</option>
</select>
</div>
<div class="col-md-4 mb-3">
<label for="state" class="form-label">Stato</label>
<select class="form-select" id="state" required>
<option value="">Scegli...</option>
<option>California</option>
<option>New York</option>
<option>Texas</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="zip" class="form-label">CAP</label>
<input type="text" class="form-control" id="zip" required>
</div>
</div>

Qui abbiamo aggiunto campi per l'email, l'indirizzo, il paese, lo stato e il CAP. Nota come stiamo usando form-select per i menu a discesa.

Informazioni di Pagamento

Ora aggiungiamo una sezione per le informazioni di pagamento:

<h3 class="mb-3">Pagamento</h3>
<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 class="form-check">
<input id="paypal" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="paypal">PayPal</label>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-3">
<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 mb-3">
<label for="cc-number" class="form-label">Numero della carta di credito</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
</div>
<div class="row">
<div class="col-md-3 mb-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 mb-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

Questa sezione include pulsanti radio per la selezione del metodo di pagamento e campi per i dettagli della carta.

Aggiunta del Pulsante di Invio

Infine, aggiungiamo un pulsante di invio al nostro modulo:

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

Le classi btn, btn-primary, e btn-lg stilizzano il nostro pulsante come un pulsante grande e di colore primario.

Considerazioni RTL

Quando si lavora con layout RTL, tenere a mente questi punti:

  1. Allineamento del testo: Nel layout RTL, il testo è generalmente allineato a destra.
  2. Layout del modulo: Le etichette dei moduli dovrebbero apparire a destra dei loro input.
  3. Icone: Le icone direzionali (come le frecce) dovrebbero essere invertite.

Il CSS RTL di Bootstrap si occupa automaticamente della maggior parte di queste considerazioni!

Conclusione

Complimenti! Hai appena creato una pagina di checkout reattiva e RTL-friendly utilizzando Bootstrap. Ricorda, la pratica fa la perfezione. Prova a modificare questo modulo, aggiungi nuovi campi o cambia lo stile per renderlo tuo.

Ecco una tabella che riassume le principali classi Bootstrap che abbiamo utilizzato:

Classe Scopo
container Crea un contenitore centrato per il contenuto
row Crea un gruppo orizzontale di colonne
col-md-* Crea colonne di varie larghezze
form-label Stile delle etichette dei moduli
form-control Stile degli input dei moduli
form-select Stile dei menu a discesa
form-check Stile dei checkbox e dei pulsanti radio
btn Stile base del pulsante
btn-primary Applica il colore primario al pulsante
btn-lg Rende il pulsante grande

Buon codice, e ricorda – ogni esperto era una volta un principiante. Continua a praticare, e diventerai un esperto di Bootstrap in breve tempo!

Credits: Image by storyset

Tutorial precedente:
Demo Album Bootstrap RTL
Prossimo tutorial:
Demo Bootstrap-Carousel RTL