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 il nuovo modello GPT-4o con Azure OpenAI
Il nuovo controllo Range di Blazor 9
Change tracking e composition in Entity Framework
Utilizzare l nesting nativo dei CSS
Introduzione ai web component HTML
Supportare lo HierarchyID di Sql Server in Entity Framework 8
Creare una libreria CSS universale: Cards
Disabilitare automaticamente un workflow di GitHub (parte 2)
Sfruttare gli embedding e la ricerca vettoriale con Azure SQL Database
Utilizzare i variable font nel CSS
Utilizzare il metodo Index di LINQ per scorrere una lista sapendo anche l'indice dell'elemento
Evitare (o ridurre) il repo-jacking sulle GitHub Actions