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
Generare token per autenicarsi sulle API di GitHub
Sfruttare GPT-4o realtime su Azure Open AI per conversazioni vocali
Utilizzare Azure AI Studio per testare i modelli AI
Usare lo spread operator con i collection initializer in C#
Eseguire script pre e post esecuzione di un workflow di GitHub
Usare le collection expression per inizializzare una lista di oggetti in C#
Filtrare i dati di una QuickGrid in Blazor con una drop down list
Ottimizzazione dei block template in Angular 17
Utilizzare EF.Constant per evitare la parametrizzazione di query SQL
Evitare il flickering dei componenti nel prerender di Blazor 8
Migliorare la scalabilità delle Azure Function con il Flex Consumption
Gestire la cancellazione di una richiesta in streaming da Blazor