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
Gestire i dati con Azure Cosmos DB Data Explorer
Utilizzare Hybrid Cache in .NET 9
Gestire il routing HTTP in Azure Container App
Utilizzare l nesting nativo dei CSS
Gestione dei nomi con le regole @layer in CSS
Loggare le query più lente con Entity Framework
Utilizzare i variable font nel CSS
Combinare Container Queries e Media Queries
Recuperare le subissue e il loro stato di completamento in GitHub
Migliorare l'organizzazione delle risorse con Azure Policy
Centralizzare gli endpoint AI Foundry con Azure API Management
Integrare SQL Server in un progetto .NET Aspire
I più letti di oggi
- Gestione file Javascript in Blazor con .NET 9
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!