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
Creare form tipizzati con Angular
Effettuare il binding di date in Blazor
Creare moduli CSS in React
Generare file PDF da Blazor WebAssembly con iText
Inizializzare i container in Azure Container Apps
Utilizzare il trigger SQL con le Azure Function
Generare token per autenicarsi sulle API di GitHub
Reactive form tipizzati con modellazione del FormBuilder in Angular
Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Cambiare la chiave di partizionamento di Azure Cosmos DB
Gestire domini wildcard in Azure Container Apps
I più letti di oggi
- PWAConf 2020 - Online
- Effettuare il binding di date in Blazor
- What's new in Azure Functions and Extensions
- Mantenere sempre reattiva una Lambda di AWS
- Proteggersi dagli attacchi di Open Redirect in ASP.NET Core MVC
- Gestire errori funzionali tramite exception in ASP.NET Core Web API
- Sblocca le performance della tua applicazione con .NET 8