Bootstrap: come utilizzare le griglie

tramite: O2O
Difficoltà: media
14

Introduzione

Bootstrap è un insieme di elementi grafici, stilistici nati prima insieme a Twitter poi diventato un progetto indipendente ed è stato messo a disposizione a tutti gli sviluppatori come base per i progetti web. È utile usare questo programma quando si desidera creare un sito web senza dover iniziare proprio da zero. L'impalcatura funzionale del progetto è la griglia, vediamo insieme come utilizzare queste al meglio.

24

La griglia serve per creare layout fluidi, è composta da 12 colonne e da righe. La larghezza delle colonne è espressa in percentuale, calcolabile in maniera molto semplice. Le righe devono essere collocate all'interno di un contenitore avente larghezza fissa o fluida per il corretto allineamento degli elementi interni. Le righe permettono di isolare gruppi orizzontali nel layout responsivo. Per le colonne invece c'è il markup HTML, verranno inseriti i div con le classi l'corrispondenti al numero di colonne che l'elemento occupa. La somma delle colonna in una riga non può essere superiore a 12.

La griglia mette a disposizione quattro serie di classi:
-col-xs-s
-col-sm-x
-col-md-x
-col-lg-x
il loro uso fa si che ci sia un controllo scrupoloso del comportamento del layout e delle diverse risoluzioni. Il principio di base è che le classi xs regolano le altre in assenza di regole specifiche, ovvero di ulteriori classi. Lo stesso vale per le sm e le md.

34

Bootstrap permette di gestire quattro griglie in maniera indipendente, attraverso l'uso di quattro serie di classi, ma possono essere usate contemporaneamente. Variando la risoluzione si passa dalla griglia lg a md a sm e a xs, l'assetto del layout cambia per garantire la funzione dello spazio disponibile.
Per resettare le colonne basta fare reset delle colonne a una risoluzione; ciò significa creare una riga indipendente da altezza del contenuto delle singole colonne.

Continua la lettura
44

Le griglie annidate sono strutture del tipo "griglia nella griglia". Basta inserire nella colonna dove si vuole creare una nuova griglia le righe e le colonne. Le dimensioni sono in percentuale.
Le griglie sono gestite grazie all'offset, grazie all'applicazione di un certo numero di unità riesco a spostare la griglia a destra e a sinistra. Le colonne seguono l'ordine con cui sono inserite, ma per scambiare di posto ad una data risoluzione basta usare col-xx-push-yy e. Col-xx-pull-yy.
Con questo abbiamo concluso una breve panoramica sulle griglie, cercando di esaminare ogni possibile problematica riscontrata con il progredire del proprio lavoro.

Potrebbe interessarti anche

Segnala contenuti non appropriati

Tipo di contenuto
Devi scegliere almeno una delle opzioni
Descrivi il problema
Devi inserire una descrizione del problema
Si è verificato un errore nel sistema. Riprova più tardi.
Verifica la tua identità
Devi verificare la tua identità
chiudi
Grazie per averci aiutato a migliorare la qualità dei nostri contenuti

Guide simili

Programmazione

Bootstrap: la struttura della pagina

Bootstrap può essere definito il più potente, nonché il più popolare, front-end per sviluppare in modo semplice e veloce siti web. Con questo programma abbiamo quindi la possibilità di rendere unico il nostro sito web, personalizzandolo al massimo,...
Programmazione

Bootstrap: cos’è e perché usarlo

Bootstrap nasce nell'anno 2010 per opera degli sviluppatori Mark Otto e Jacob Thornton. Inizialmente si presentava come un progetto interno a Twitter, ma successivamente è diventato indipendente ed è, perciò, utilizzabile dagli sviluppatori di tutto...
Programmazione

Come realizzare un form con Bootstrap

Con il termine form in informatica si indica generalmente un'interfaccia di applicazione che consente a un utente client di inserire e successivamente inviare al web server uno o molteplici dati che sono liberamente digitati dallo stesso. Solitamente...
Programmazione

Bootstrap: come gestire gli alert

Creare un sito web non è compito semplice: richiede una serie di conoscenze e praticità a livello di programmazione informatica. Ciò non implica che solo i più esperti nel campo possano aprire una pagina Internet - al contrario, queste sono sempre...
Programmazione

Bootstrap: come formattare il testo

Bootstrap è la più popolare applicazione per PC per lo sviluppo di applicazioni web. Grazie al supporto per HTML, Javascript e CSS, potremo realizzare il nostro sito web personale in un batter d'occhio. Attraverso le numerose funzioni di cui è fornito,...
Programmazione

Bootstrap: come gestire le progress bar

Oggi aprire un sito Internet è diventato sempre più popolare: chiunque può farlo e per le motivazioni più svariate - magari per gestire al meglio la propria attività lavorativa o per condividere le proprie passioni con migliaia di utenti. Certo,...
Programmazione

Bootstrap: come gestire le immagini responsive

Ricordate i vecchi tempi, quando potevamo accedere ai diversi siti web esclusivamente tramite computer? I monitor dei nostri vecchi computer erano pressoché omologati e non occorreva, quindi, realizzare siti web che dovessero adattarsi a schermi differenti....
Programmazione

Bootstrap: come animare i pulsanti con Javascript

La tecnica di creazione di interfacce web tramite Bootstrap è la più utilizzata ad oggi. Le possibilità di personalizzazione di questa piattaforma sono enormi, potendo inserire qualsiasi tipo di carattere o pulsante liberamente sullo schermo. Il progetto,...
I presenti contributi sono stati redatti dagli autori ivi menzionati a solo scopo informativo tramite l’utilizzo della piattaforma www.o2o.it e possono essere modificati dagli stessi in qualsiasi momento. Il sito web, www.o2o.it e Arnoldo Mondadori Editore S.p.A. (già Banzai Media S.r.l. fusa per incorporazione in Arnoldo Mondadori Editore S.p.A.), non garantiscono la veridicità, correttezza e completezza di tali contributi e, pertanto, non si assumono alcuna responsabilità in merito all’utilizzo delle informazioni ivi riportate. Per maggiori informazioni leggi il “Disclaimer »”.