Abbiamo già parlato in passato di Bootstrap e di quanto faciliti la creazione di layout.
L'esempio di oggi consiste nel creare la classica form, che tipicamente in passato veniva ricreata attraverso delle tabelle, utilizzando solo stili:
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstName" class="col-sm-2 control-label">Nome</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstName" placeholder="Nome"> </div> </div> <div class="form-group"> <label for="lastName" class="col-sm-2 control-label">Cognome</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastName" placeholder="Cognome"> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-default">Conferma</button> </div> </div> </form>
Il tutto si basa sulla griglia di Bootstrap e sull'uso della classe form-group, che provvede a raggruppare i contenuti. Di default, la label apparità sulla sinistra, mentre la form a destra. Grazie al supporto per il respondive design di bootstrap, in automatico la label e il campo saranno allineati uno sotto l'altro in caso di mancanza di spazio, ottimizzando l'esperienza d'uso su un device mobile.
Il risultato ottenuto è disponibile in questa immagine:
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare un service principal per accedere a Azure Container Registry
Cambiare la chiave di partizionamento di Azure Cosmos DB
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare domini personalizzati gestiti automaticamente con Azure Container Apps
Usare una container image come runner di GitHub Actions
Eseguire le GitHub Actions offline
Utilizzare gli snapshot con Azure File shares
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Creare un'applicazione React e configurare Tailwind CSS
Come migrare da una form non tipizzata a una form tipizzata in Angular
Eseguire query verso tipi non mappati in Entity Framework Core
Implementare l'infinite scroll con QuickGrid in Blazor Server