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
Ordinare randomicamente una lista in C#
Utilizzare i primary constructor di C# per inizializzare le proprietà
Creare una libreria CSS universale: Clip-path
Usare le navigation property in QuickGrid di Blazor
Gestire i dati con Azure Cosmos DB Data Explorer
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Ottimizzazione dei block template in Angular 17
Eseguire un metodo asincrono dopo il set di una proprietà in Blazor 8
Utilizzare una qualunque lista per i parametri di tipo params in C#
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Usare il colore CSS per migliorare lo stile della pagina
I più letti di oggi
- Pubblicare immagini Docker su un registro privato di Azure
- Spegnere automaticamente ogni giorno una VM Azure
- Moonlight 2.0 in beta, con un po' di Silverlight 3.0 per Linux
- Impostare un promemoria per ruotare le chiavi di Azure Storage
- Routing HTTP con i proxy delle Azure Function
- Effettuare il download di un file via FTP con la libreria FluentFTP di .NET