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
Definire il colore di una scrollbar HTML tramite CSS
Supportare la crittografia di ASP.NET Core con Azure Container App
Montare Azure Blob Storage su Linux con BlobFuse2
Evitare memory leaks nelle closure JavaScript
Importare repository da Bitbucket a GitHub Enterprise Cloud
Self-healing degli unit test con Copilot in GitHub
Collegare applicazioni server e client con .NET Aspire
Recuperare gli audit log in Azure DevOps
Conoscere il rendering Server o WebAssembly a runtime in Blazor
Ottimizzare le performance usando Span<T> e il metodo Split
Simulare Azure Cosmos DB in locale con Docker
Selettore CSS :has() e i suoi casi d'uso avanzati


