Quando dobbiamo scegliere un framework front-end controlliamo sempre due cose: il grid-system e la costruzione delle forms.
Bootstrap 5, staccandosi dalle versioni precedenti, trova una parziale riscrittura dei forms che abbandona tutte le classi superflue (form-group, form-row, form-inline) e lascia il controllo al grid-system. Vediamo un prima e dopo che ci farà immediatamente capire la facilità di applicazione e aggiornamento di un layout scritto con le versioni precedenti.
<!--4.6-->
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email">
</div>
<!--5.0-->
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="text" class="form-control" id="email" placeholder="Email">
</div>Anche nella sua versione inline abbiamo una notevole semplificazione: tramite l'utilizzo delle classi row e col riusciamo a gestire il layout senza utilizzare classi che contestualizzano i singoli elementi verso una determinata configurazione grafica.
<!--4.6-->
<form class="form-inline">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="First name">
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputGroupUsername2" placeholder="Last name">
</form>
<!--5.0-->
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
Sulla documentazione troviamo inoltre una nuova area (https://getbootstrap.com/docs/5.0/forms/layout/), appunto riguardante i form, con i controlli e tutte le casistiche di applicazione.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Esporre workflow come server MCP con Azure Logic Apps
Integrare LLM alle nostre applicazioni in .NET con MCP
Gestire gli errori nelle Promise JavaScript con try()
Dallo sviluppo locale ad Azure con .NET Aspire
Building Custom Developer Agents
Definire il colore di una scrollbar HTML tramite CSS
.NET Aspire vs Dapr: differenze, sovrapposizioni e integrazione
Personalizzare i parametri del CSS Scroll Snap
Effettuare un clone parziale di un repository di GitHub
Eseguire una ExecuteUpdateAsync senza usare un'expression con Entity Framework
Running workloads and operations with Azure Kubernetes Service
Integrazione di Copilot in .NET Aspire


