Corso Bootstrap – Terza Lezione

 

 

 

 

 

 

 

 

 

 

 

 

 

Eccoci qua con la terza lezione del corso Bootstrap, realizzato in collaborazione tra falco96  e worldtecno, due blogger e appassionati di informatica e di programmazione.

In questa nuova lezione del corso Bootstrap, andremo ad approfondire parte dei concetti visti nella lezione precedente! In particolare il tanto “acclamato” grid layout e il sistema fluid, introdotto in modo diverso nella quarta versione del framework in questione. Inoltre in questa lezione andremo a vedere altri due elementi principali, che si usano maggiormente, durante lo sviluppo di una qualsiasi interfaccia realizzata mediante il framework Bootstrap. Detto ciò iniziamo!

Approfondimenti della lezione precedente.

Nella scorsa lezione avevamo detto che nella versione 4.0.0 di Bootstrap, è stata rimossa la classe fluid per la gestione dei layout. La classe fluid, come dicevamo, serve per gestire in modo automatico ogni elemento della pagina che si sta andando a realizzare in modo tale che si adatti nel modo più intelligente rispetto allo schermo che l’utente sta utilizzando. La classe fluid rimossa in verità è stata integrata in parte nella classe container. Sostanzialmente, con il semplice richiamo della classe container, necessaria per aprire un sistema di layout, si abilitano anche tutte le funzioni fluid. A differenza delle precedenti versioni del framework, in quest’ultima è necessario effettuare qualche piccola personalizzazione tramite un css personalizzato dallo sviluppatore, per adattare il layout ad hoc per il proprio progetto! Vediamo un piccolo esempio di ciò che abbiamo appena detto:

Questo è un esempio di implementazione della classe container!

Andiamo invece ora a vedere un esempio di personalizzazione manuale di una o più classi del framework bootstrap, tramite un css personalizzato:

Questo tipo di personalizzazione è resa possibile grazie al fatto che Bootstrap è un framework totalmente open source, e quindi adattabile e personalizzabile in ogni modo possibile!

“Come si devono effettuare le personalizzazioni manuali, all’interno del proprio file css?”

Per fare questo è molto semplice, infatti basta richiamare all’interno del foglio di stile, il nome della classe che si vuole modificare e all’interno della classe, riscrivere e quindi impostare un valore alternativo, ad ogni valore standard preimpostato nella classe default di bootstrap a cui si desidera apportare la modifica. In questo modo si può modificare, in modo mirato, ogni singolo aspetto del framework!

Due nuovi componenti fondamentali e popolari di Bootstrap.

Ora andremo a vedere due, tra i più importanti, elementi che si possono realizzare tramite bootstrap. Il primo elemento è l’alert, il quale fornisce un modo per segnalare all’utente che utilizza il sito o l’applicazione da noi realizzata, con diversi colori e diversi tipi di messaggi, alcuni avvisi di notifica del sistema, che vanno dal classico messaggio informativo, a quello di conferma, fino ad arrivare al messaggio di errore tecnico. Infatti ci sono ben 4 classi default di bootstrap per poter gestire al meglio il componente alert. Ogni classe presenta una caratteristica differente per l’alert che si vuole implementare:

• Alert info: gestisce i messaggi classici informativi. Questi messaggi sono di colore azzurro. Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert alert-info;
• Alert success: gestisce i messaggi classici di conferma. Questi messaggi sono di colore verde.Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-success;
• Alert warning: gestisce i messaggi classici di errore generale causato dall’utente “sbadato”. Questi messaggi sono di colore arancione. Permettono di avvisare l’utente di un’eventuale errore. Per esempio si può usare questo tipo di avviso per segnalare un dato inserito male da parte dell’utente in un form di registrazione o login. Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-warning;
• Alert danger: gestisce i messaggi classici per errori tecnici o errori del sistema. Questi messaggi sono di colore rosso.Il codice da implementare per richiamare la classe che realizza questo specifico componente è: alert-danger.

Vediamo ora un esempio grafico di questi componenti presentati:

Vediamone anche la loro possibile implementazione:

Nota bene: Per implementare correttamente questi componenti, essi necessitano di essere inseriti nel tag <div>!

Passiamo a vedere ora un altro utile e utilizzatissimo componente di Bootstrap, ovvero il button. Esistono 5 tipi di pulsanti in bootstrap. Vediamo come è possibile implementarli e come essi si presentano all’interno di una pagina web o di un’applicazione. Iniziamo col dire che i pulsanti in bootstrap non vengono usati solo tramite il tag <button>, come si potrebbe pensare, ma si possono invece implementare anche inserendoli nei tag <a href=”…”>, richiamando la corrispondente classe btn di bootstrap, la quale serve proprio per permettere l’implementazione di tale componente, oppure “dulcis in fundo” attraverso il tag input con all’interno sempre il richiamo della classe btn. In ogni il caso, il risultato grafico ottenuto risulterà praticamente invariato.

Vediamo quindi tutti i pulsanti disponibili:

• btn-default -> Pulsante di colore bianco, utile per indicare all’utente un’azione secondaria. Per esempio si può utilizzare come pulsante per tornare alla pagina precedente. In bootstrap 4.0.0 questo elemento è stato ridefinito come btn-secondary, appunto per far comprendere meglio che è un pulsante per azioni secondarie. Il codice per implementarlo è: btn btn-default, o btn btn-secondary (con bootstrap 4 in poi).
• btn-primary -> Pulsante di colore blu, utile per indicare all’utente un’azione principale, come per esempio il pulsante submit di un form. Il codice per implementarlo è: btn btn-primary.
• btn-success -> Pulsante di colore verde, utile per indicare all’utente un’operazione andata a buon fine. Questo tipo di pulsante può essere implementato subito dopo, ad esempio, di un avviso di tipo alert-success, per rendere ancora più chiaro il processo completato con successo. Il codice per implementarlo è: btn btn-success.
• btn-warning -> Pulsante di colore arancione, utile per indicare all’utente un errore, per esempio, di inserimento dati da parte dell’utente. Questo pulsante per esempio può essere implementato subito dopo un avviso di tipo alert-warning, per rendere ancora più chiara la presenza di un errore. Il codice per implementarlo è: btn btn-warning.
• btn-danger -> Pulsante di colore rosso, utile per indicare all’utente la presenza di un errore tecnico o comunque di un errore grave. Questo pulsante, per esempio, può essere implementato subito dopo un avviso di tipo alert-danger, per rendere ancora più chiaro la presenza di un errore di natura tecnica. Il codice per implementarlo è: btn btn-danger.

Vediamo, nello screen di seguito riportato, un esempio di implementazione:

Ecco quindi come vengono visualizzati questi pulsanti, una volta implementati:

Nota bene: Molti di voi forse hanno notato che, sia per gli avvisi, gestiti dalla classe alert, sia per i pulsanti, gestiti dalla classe btn, è necessario richiamare per l’appunto, prima queste due classi principali, quindi per esempio nel caso dei pulsanti, va richiamata prima la classe btn e poi successivamente si va a richiamare la classe specifica al pulsante che si desidera implementare. E’ importante non omettere nessuna delle due classi, per implementare gli avvisi o i pulsanti, altrimenti, come vedrete anche dal video, si presentano dei gravi problemi di visualizzazione, dovuti ad una scorretta implementazione.

In conclusione

In questa terza lezione abbiamo dato un’occhiata a tutta una serie di differenti implementazioni di due fra gli elementi principali, che si utilizzano con Bootstrap, gli Alert e i Button. Quindi da questa lezione in poi avete già la piena conoscenza di ben 4 componenti(Navbar, Footer, Form, Alert e Button) che potete usare a vostro piacimento, per implementare delle pagine già piuttosto complete, con questo framework. Ma prima di lasciarvi, vi lasciamo qualche piccolo esercizio, che potrete svolgere, se volete, per potervi esercitare con questi nuovi concetti visti in questo corso sul framework bootstrap:

1. Implementare un form (introdotti nella prima lezione di php) che permetta di inserire all’utente dei dati (a vostra scelta). Come pulsante di submit, usate il pulsante primary di bootstrap. Infine, controllate che l’utente abbia inserito i dati, e nel caso non l’abbia fatto, avvisarlo con un avviso informativo (quindi con la classe alert-info);
2. Implementare un form (introdotti nella prima lezione di php) che permetta di inserire un numero all’utente. Come pulsante di submit, usate il pulsante primary, Successivamente fate un controllo (dalla seconda lezione del corso php è stata introdotta la forma condizionale). Se il numero è maggiore di 10, mostrate un messaggio di conferma, con la classe alert-success, altrimenti, se il numero è minore di 10, mostrate un avviso di errore, con classe warning. In entrambi gli avvisi, usate rispettivamente il pulsante btn-success, vicino all’avviso di conferma e btn-warning, vicino all’avviso di un errore.
3. Implementare una navbar e un footer in una pagina, elementi visti nella seconda lezione.

Infine vi rimandiamo come sempre alla prossima lezione di questo corso bootstrap, e vi ringraziamo come sempre infinitamente per le vostre visualizzazioni, condivisioni e mi piace che rilasciate ai nostri articoli sui nostri blog e ai video dei canali YouTube, per qualsiasi approfondimento, informazione o chiarimento non esitate a mettervi in contatto con noi! Detto ciò vi salutiamo augurandovi un buon proseguimento ed una buona programmazione con bootstrap, ciao!