Grazie all’articolo HTML5 e CSS3: la guida completa per lo sviluppatore WEB hai creato la base di una semplicissima applicazione web. Questa volta, la modificherai utilizzando il popolare framework CSS reattivo Bootstrap. Bootstrap capirà quanto è ampio lo schermo e risponderà ridimensionando i tuoi elementi HTML – da qui il nome Responsive Design.
Con un design reattivo, non è necessario progettare una versione mobile del tuo sito web.
Avrà un bell’aspetto su dispositivi con schermi di qualsiasi larghezza.
Puoi aggiungere Bootstrap a qualsiasi app aggiungendo il seguente codice all’inizio dell’HTML:
<link rel =”stylesheet”
href = “//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css”
/>
Riprendi quindi la tua prima applicazione web ed inserisci il codice sopra, in alto alla pagina. Per iniziare, annida tutto il codice HTML in un elemento div con la classe Bootstrap container-fluid.
Rendi le immagini mobile–reactive
Innanzitutto, riprendendo l’esempio precedente, aggiungi una nuova immagine sotto quella esistente.
Imposta l’attributo src su https://goo.gl/EBJQ6F.
Sarebbe bello se questa immagine potesse essere esattamente la larghezza dello schermo del tuo telefono.
Fortunatamente, con Bootstrap, tutto ciò che devi fare è aggiungere la classe img-responsive alla tua immagine. Fallo e l’immagine dovrebbe adattarsi perfettamente alla larghezza della pagina.
Centra il testo con Bootstrap
Ora che utilizzi Bootstrap, puoi centrare il tuo elemento di intestazione per renderlo migliore.
Tutto ciò che devi fare è aggiungere la classe text-center al tuo elemento h2.
Ricorda che puoi aggiungere diverse classi allo stesso elemento separandole con uno spazio, come ad esempio:
<h2 class= “imparareaprogrammare”> imparare a programmare </ h2>
Crea un pulsante Bootstrap
Bootstrap ha i propri stili per gli elementi pulsante, che sembrano molto meglio di quelli in HTML.
Riprendi il tuo documento e crea un nuovo elemento pulsante sotto l’ultima immagine.
Dagli la classe btn e il testo di “Imparare a programmare”.
Crea un pulsante Bootstrap in un elemento Blocco
Normalmente, gli elementi del tuo pulsante con una classe di btn sono ampi quanto il testo che contengono.
Per esempio:
<button class = “btn”> Imparare a programmare </ button>
Questo pulsante sarebbe solo largo quanto le parole “Imparare a programmare”.
Utilizzando un elemento blocco con la classe aggiuntiva di btn-block, potrai far estendere il tuo pulsante fino a riempire l’intero spazio orizzontale della tua pagina e qualsiasi elemento che seguirà scorrerà su una “nuova linea” sotto il blocco.
Prova ad inserire il seguente pulsante nel tuo sito web:
<button class = “btn btn-block”> Imparare a programmare </ button>
Questo pulsante richiede il 100% della larghezza disponibile.
Nota che questi pulsanti hanno sempre bisogno della classe btn.
Crea un pulsante colorato con Bootstrap
La classe btn-primary è il colore principale che utilizzerai nella tua app.
È utile per evidenziare le azioni che vuoi che il tuo utente prenda.
Aggiungi la classe btn-primary di Bootstrap al tuo pulsante.
Nota che questo pulsante avrà ancora bisogno delle classi btn e btn-block.
Crea un pulsante info con Bootstrap
Bootstrap ha diversi colori predefiniti per i pulsanti. La classe btn-info viene utilizzata per richiamare l’attenzione sulle azioni facoltative che l’utente può eseguire.
Riprendi l’esempio precedente e crea un nuovo pulsante Bootstrap a livello di blocco sotto il pulsante “imparare a programmare” con il testo “Informazioni” e aggiungi le classi btn-info e btn-block di Bootstrap.
Nota che questi pulsanti hanno ancora bisogno delle classi btn e btn-block.
Avvisa i tuoi utenti di un’azione pericolosa
Bootstrap ha diversi colori predefiniti per i pulsanti.
La classe btn-danger è il colore del pulsante che utilizzerai per notificare agli utenti che il pulsante esegue un’azione distruttiva, come l’eliminazione di una foto.
Crea un pulsante con il testo “Elimina” e assegnagli la classe btn-danger.
Nota che questi pulsanti hanno ancora bisogno delle classi btn e btn-block.
Usa la griglia Bootstrap per mettere gli elementi fianco a fianco
Bootstrap utilizza un sistema di griglia reattivo, che rende facile inserire elementi in righe e specificare la larghezza relativa di ciascun elemento. La maggior parte delle classi di Bootstrap può essere applicata a un elemento div.
Ecco un diagramma di come funziona il layout della griglia di 12 colonne di Bootstrap:
un’immagine che illustra il sistema di griglia di Bootstrap
Nota che in questa illustrazione viene utilizzata la classe col-md-*.
Qui, md significa medium e * è un numero che specifica quante colonne devono essere larghe.
In questo caso, viene specificata la larghezza della colonna di un elemento su uno schermo di medie dimensioni, ad esempio un laptop.
Nell’app imparare a programmare che stai costruendo, utilizzerai col-xs-*, dove xs significa extra piccolo (come uno schermo di un cellulare extra-piccolo), e * è il numero di colonne che specifica quante colonne sono larghe l’elemento dovrebbe essere
Inserisci i pulsanti Mi piace, Info ed Elimina affiancandoli tutti e tre all’interno di un elemento <div class = “row”>, quindi ognuno di essi all’interno di un elemento <div class = “col-xs-4”> .
La classe riga viene applicata a un div e i pulsanti stessi possono essere nidificati al suo interno.
Utilizza gli stili di Bootstrap
Puoi pulire il tuo codice e rendere la tua app imparare a programmare più convenzionale utilizzando gli stili incorporati di Bootstrap invece degli stili personalizzati creati in precedenza.
Non preoccuparti: in seguito ti concentrerai molto a personalizzare il tuo CSS.
Riprendi l’esempio precedente ed elimina le dichiarazioni CSS .red-text, p, e .smaller-image dal tuo elemento style in modo che le uniche dichiarazioni rimaste nel tuo elemento style siano h2 e thick-green-border.
Quindi elimina l’elemento p che contiene un collegamento morto. Quindi rimuovi la classe red-text dall’elemento h2 e sostituiscila con la classe Bootstrap text-primary.
Infine, rimuovi la classe “small-image” dal tuo primo elemento img e sostituiscila con la classe img-responsive.
Applica uno stile bootstrap grazie al tag span
Usando il tag span, potrai mettere insieme diversi elementi e persino creare stili diversi per parti dello stesso elemento.
Inserisci la parola “Bootstrap” nel tuo elemento “imparareaprogrammare” sotto un elemento span. Quindi dai a questo testo la classe text-danger per rendere il testo rosso.
Ecco come lo faresti con l’elemento “Imparare a programmare”:
<p> Imparare a <span class = “text-danger”> programmare </ span> </ p>
Crea un heading personalizzato
Farai una semplice intestazione per la tua Web App mettendo il titolo e l’immagine rilassante del codice nella stessa riga.
Ricorda, Bootstrap utilizza un sistema di griglia reattivo, che rende facile inserire elementi in righe e specificare la larghezza relativa di ciascun elemento. La maggior parte delle classi di Bootstrap può essere applicata a un elemento div.
Ecco un diagramma di come funziona il layout della griglia di 12 colonne di Bootstrap:
In questa illustrazione viene utilizzata la classe col-md- *. Qui, md significa medium e * è un numero che specifica quante colonne devono essere larghe. In questo caso, viene specificata la larghezza della colonna di un elemento su uno schermo di medie dimensioni, ad esempio un laptop.
Nell’app che stai costruendo, utilizzerai col-xs- *, dove xs significa extra piccolo (come uno schermo di un cellulare extra-piccolo), e * è il numero di colonne che specifica quante colonne sono larghe l’elemento dovrebbe essere
Annida la tua prima immagine e il tuo elemento h2 all’interno di un singolo elemento <div class = “row”>. Nidifica il tuo elemento h2 all’interno di <div class = “col-xs-8”> e la tua immagine in un <div class = “col-xs-4”> in modo che si trovino sulla stessa riga.
Nota come l’immagine ora ha le giuste dimensioni per adattarsi al testo?
Se questo articolo ti è piaciuto e credi possa essere utili anche ai tuoi amici, condividilo!