Boostrap, tra le altre cose, include un sistema di layout basato su griglie, all'interno del quale vengono ipoteticamente suddivise 12 colonne, responsive e in grado di supportare differenti tipi di risoluzione.
Il supporto è previsto per differenti tipi di layout, in particolare:
- Extra small (meno di 768px): col.xs-*
- Small (più di 768px): col.sm-*
- Medium (più di 992px): col.md-*
- Large (più di 1200px): col.lg-*
Perché funzioni, il tutto deve essere contenuto in un elemento con class container e ogni riga dentro un elemento con class row. Le varie classi possono assumere, ad esempio, i valori tra col-sm-1 e col-sm-12.
Ecco un esempio:
<div class="container"> <div class="row"> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> <div class="col-md-3">.col-md-3</div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> </div>
La prima riga sarà visualizzata con 3 colonne della stessa dimensione, mentre la seconda avrà una colonna, la prima, grande il doppio rispetto alla seconda.
Fino alla risoluzione Medium, il layout sarà questo. In caso di risoluzione inferiore, gli elementi saranno ordinati uno sopra l'altro.
Nei prossimi script vedremo come gestire scenari avanzati e come supportare contemporaneamente più tipi di layout.
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Consumare un endpoint generico in Blazor
Determinare lo stato di un pod in Kubernetes
Elencare le container images installate in un cluster di Kubernetes
Migrare un repository che contiene large file storage objects in GitHub
Utilizzare flat e flatMap per appiattire array innestati in array
Permettere l'append ai file di un Azure Storage immutabile
Gestire dati sensibili nella configurazione in ASP.NET Core
Generare file PDF da Blazor WebAssembly con iText
Organizzare il codice JavaScript utilizzando i moduli
Condividere i workflow tra più repository in GitHub
Migrare un progetto ASP.NET Core da .NET 6 a .NET 7
Usare il versioning con i controller di ASP.NET Core Web API