Bootstrap: come gestire le immagini responsive

Di:
tramite: O2O
Difficoltà: media
14

Introduzione

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. Tuttavia con l'avvento di smartphone e tablet, di è reso necessario rispondere ad una nuova esigenza degli utenti: realizzare siti web che si adattassero alla dimensione dello schermo in maniera pressoché autonoma. Questa nuova disciplina, chiamata responsive web design, permette, attraverso l'uso di alcune app, di rispondere a questa esigenza. Tra esse, figura bootstrap, l'app di design responsivo ad oggi forse più diffusa tra i profani. Tuttavia, seppur essa costituisce uno strumento potentissimo non è esente da problemi, soprattutto nella gestione delle immagini. Ecco, quindi, tre passi che vi aiuteranno a capire come gestire le immagini responsive su bootstrap.

24

Un aspetto più generale che va tenuto sempre in considerazione durante il processo di web design è considerare il framework solo come un punto di partenza. Esso infatti costituisce una semplice base, a partire dalla quale, potremmo iniziare la nostra progettazione sbizzarrendoci con tutti i set di layout di pagina e di presentazione di pagina. Chiarito questo concetto, prima di iniziare una progettazione vera e propria con Bootstrap, iniziate a prendere confidenza con questo sistema di personalizzazione esercitandovi su template basati proprio si Bootstrap.

34

Presa confidenza con la terminologia e gli strumenti di Bootstrap, potrete iniziare ad addentrarvi nella gestione delle immagini responsive. Se da un lato le celle delle colonne del layout e i caratteri si adattano senza problemi alle dimensioni del contenitori, altrettanto non può dirsi delle immagini. Se infatti l'immagine è più grande dello spazio che le viene assegnato potrebbe andare a coprire le colonne adiacenti. Una soluzione a questo problema potrebbe essere la seguente. Per rendere l'immagine responsiva non servirà altro che assegnarle la stessa la classe img-responsive: questa classe assegna all’immagine i valori max-width 100% e height auto e permetterà alla vostra immagine di ridimensionarsi automaticamente.

Continua la lettura
44

Tuttavia se questo inconveniente si ripresenta peer tutte le immagini successive potrete optare per una soluzione alternativa, che vi farà risparmiare tempo ed energie. Anziché procedere come nel passo 2 per tutte le immagini potrete utilizzare un semplice snippet jQuery: $(function () { $('img'). AddClass ('img-responsive');}); Questo comando adatterà alle giuste dimensioni tutte le immagini interessate, esonerandovi da una faticosa e quantomai inutile correzione manuale. Questo trucchetto è rivolto soprattutto ai più esperti, in quanto per applicarlo sono necessarie conoscenze pregresse di programmazione.

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: 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: 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

Bootstrap: come impaginare i contenuti

Bootstrap è uno dei framework più conosciuti e utilizzati nel mondo del Web per realizzare siti e applicazioni da mettere online. Questo nuovo strumento all'avanguardia ci permetterà di semplificare lo sviluppo della nostra pagina Web. Vediamo allora...
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

Come creare una pagina web responsive

Oggi la navigazione in internet è alla base di tantissimi servizi e fa ormai parte del nostro quotidiano. Qualunque sia il tipo di ricerca che vogliamo effettuare, il tipo di informazione che desideriamo ottenere, il web ha la risposta che fa per noi....
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

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 utilizzare le griglie

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...
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 »”.