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
Usare i settings di serializzazione/deserializzazione di System.Text.Json di ASP.NET all'interno di un'applicazione non web
Selettore CSS :has() e i suoi casi d'uso avanzati
Gestione degli eventi nei Web component HTML
Utilizzare Intersect e Except per filtrare set di dati in TSql
Gestire progetti .NET + React in .NET Aspire
Implementare il throttle in JavaScript
Eseguire query in contemporanea con EF
Disabilitare le run concorrenti di una pipeline di Azure DevOps
Montare Azure Blob Storage su Linux con BlobFuse2
Path addizionali per gli asset in ASP.NET Core MVC
Configurare e gestire sidecar container in Azure App Service
Creare una libreria CSS universale - Rotazione degli elementi
I più letti di oggi
- Integrare OpenAI tramite Aspire
- Usare l'explicit operator per eseguire codice di mapping in C#
- Interagire con Azure DevOps tramite MCP Server
- Creare un agente A2Acon Azure Logic Apps
- Office 2007 Developer Conference, il 13 e 14 Giugno a Milano
- Gestione file Javascript in Blazor con .NET 9
- Definire il colore di una scrollbar HTML tramite CSS