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
Routing statico e PreRendering in una Blazor Web App
Rinnovare il token di una GitHub App durante l'esecuzione di un workflow
Utilizzare i primary constructor di C# per inizializzare le proprietà
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Eseguire query verso tipi non mappati in Entity Framework Core
Creare un'applicazione React e configurare Tailwind CSS
Gestione dei nomi con le regole @layer in CSS
Ottimizzazione dei block template in Angular 17
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Aggiungere interattività lato server in Blazor 8
Creare alias per tipi generici e tuple in C#
I più letti di oggi
- Utilizzare AAD su SQL Database durante lo sviluppo con Visual Studio
- Utilizzare il TransferControl in Windows Phone
- Gestione dei token negli input di testo con la Universal Windows Platform
- Dare temporaneamente accesso ad un blob di Azure Storage
- Impostare le policy CORS con Azure API Management
- Utilizzare database e servizi con gli add-on di Container App
- Utilizzare HttpModule in modalità asincrona
- Indicizzare i Blob Storage con Azure Search
- Creazione di StateTrigger personalizzati in Universal Windows Platform
- Modificare i criteri della clausola Where del LinqDataSource di ASP.NET