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
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Filtrare e rimuovere gli elementi dalla cache del browser tramite le API JavaScript
Eseguire le GitHub Actions offline
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare database e servizi con gli add-on di Container App
Usare Refit e Polly in Blazor per creare client affidabili e fortemente tipizzati
Generare file PDF da Blazor WebAssembly con iText
Utilizzare un service principal per accedere a Azure Container Registry
Configurare dependabot per aggiornare le dipendenze di terze parti con GitHub Actions
Ottimizzazione dei block template in Angular 17
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
I più letti di oggi
- Nuova versione per jQuery e prima alpha per jQuery Mobile
- Paginare i risultati con QuickGrid in Blazor
- Utilizzare il trigger SQL con le Azure Function
- Eliminare una determinata proprietà da un oggetto JavaScript
- Ottimizzare le performance delle collection con le classi FrozenSet e FrozenDictionary
- Modern web apps with Blazor