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
Evitare la script injection nelle GitHub Actions
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Migrare una service connection a workload identity federation in Azure DevOps
Creare gruppi di client per Event Grid MQTT
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Gestire undefined e partial nelle reactive forms di Angular
Miglioramenti nell'accessibilità con Angular CDK
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Creare alias per tipi generici e tuple in C#
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Creazione di componenti personalizzati in React.js con Tailwind CSS
I più letti di oggi
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- ASP.NET 3.5 per tutti
- .NET Conference Italia 2023 - Milano e Online
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- Utilizzare Docker Compose con Azure App Service
- Creare più ambienti in un'applicazione Angular