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
Utilizzare le View Transition API di JavaScript
Centralizzare gli endpoint AI Foundry con Azure API Management
Utilizzare zizmor per rendere più sicuri i workflow di GitHub
Fissare una versione dell'agent nelle pipeline di Azure DevOps
Creare espressioni riutilizzabili nelle query LINQ per Entity Framework
Semplificare la gestione dei modelli con Azure AI Foundry Model Router
Creare una file based app con C#
Gestire progetti .NET + React in .NET Aspire
Configuratione e utilizzo .NET Aspire CLI
Integrazione di Copilot in .NET Aspire
Utilizzo delle stepped value functions nel CSS
Impostare automaticamente l'altezza del font tramite CSS




