Bootstrap: come gestire le progress bar

tramite: O2O
Difficoltà: media
16

Introduzione

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, avere delle conoscenze base di programmazione informatica è essenziale prima di imbattersi in questo non sempre facile compito. Fortunatamente, lo stesso Web può fornirvi diverse soluzioni per realizzare un sito funzionale, in modo semplice e guidato: fra queste, troviamo certamente la piattaforma open source Bootstrap. In questa guida illustreremo come installarla e, in particolare, come gestire le "progress bar".

26

Occorrente

  • Bootstrap; Conoscenza base del codice HTML.
36

Bootstrap è un framework che raccoglie una serie di strumenti liberi i quali compongono, nell'insieme, l'interfaccia della pagina Web, e, in più, possono essere impiegati anche per lo sviluppo di applicazioni. Questa raccolta contiene modelli di progettazione basati, in parte, sul codice HTML, la cui conoscenza minima è per tanto indispensabile prima di procedere alla creazione dell'indirizzo Internet. Se non siete molto pratici non allarmatevi: esistono, infatti, numerose guide online, dai caratteri molto intuitivi, di cui potrete servirvi. Procedete, anzitutto, al download di Bootstrap da questo link getbootstrap.com, che troverete anche fra i link utili alla stessa guida.

46

Una volta installato il programma, potrete procedere dando un'occhiata generale alle varie funzioni che offre. In questa guida in particolare analizzeremo la gestione delle "progress bar", ovvero le classiche barre di avanzamento presenti in molti siti. Potrete inserirne quante vorrete, in base al tipo di uso che intendete farne. Solitamente vengono utilizzate per mostrare ai visitatori lo stato di avanzamento di un'operazione, oppure il risultato di un sondaggio a cui hanno preso parte. Per inserire la barra è necessario applicare, mediante linguaggio HTML, una determinata componente, detta "classe" (class). In questo caso utilizzerete la class .progress, al cui interno aggiungerete un'altra class, ovvero. Progress-bar.

Continua la lettura
56

Adesso non vi resta che scegliere il colore della vostra barra. Questa scelta, tuttavia, non può essere lasciata al caso o al vostro gusto estetico: ogni barra ha una funzione diversa, determinabile dal suo stesso colore. Si utilizza il verde per indicare il successo di un'operazione (. Success); il blu indica un'informazione (. Info); infine, si utilizzano l'arancione per un avvertimento (. Warning) e il rosso per un pericolo (. Danger). Sulla barra si possono inoltre applicare delle strisce mediante l'aggiunta della class. Progress-striped. Aggiungendo a quest'ultima un'altra class,. Active, le barre diventeranno animate. Tuttavia, applicare la modifica a strisce è leggermente più complesso e richiede la presenza dei gradienti CSS3.

66

Consigli

Alcuni link che potrebbero esserti utili:

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

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