web design

Il primo template Bootstrap – Mobile Responsive

HTML e CSS sono le basi dello sviluppo web. Con Bootstrap però, lo stile del nostro sito migliora e ci permette di creare delle vere e proprie pagine web ottimizzate e funzionali grazie ai template già predefiniti.

Utilizzato ormai nella maggior parte dei progetti web è diventato un vero e proprio framework di successo. Non mi piace dilungarmi in discorsi tanto ampi, preferisco infatti andare subito al sodo realizzando dei progetti concreti che ci permettano di capire come funziona il tutto.

La prima pagina in Bootstrap

<!doctype html>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

 
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Come possiamo notare delle righe di codice qui sopra, Bootstrap permette di realizzare ” senza far fatica “ delle pagine web vere e proprie come abbiamo fatto per il primo articolo. In questo caso però, abbiamo solamente fatto un copia e incolla del codice direttamente dalla documentazione e abbiamo, in due singoli passaggi, una pagina web completa di tutti i tag fondamentali.

Responsive meta tag

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Con Bootstrap sviluppiamo siti web mobile first , una strategia in cui ottimizziamo prima il codice per i dispositivi mobili e poi scaliamo i componenti secondo necessità utilizzando le query multimediali CSS. 

La riga di codice sopraindicata è utile, quindi, per garantire un rendering corretto e lo zoom al tocco per tutti i dispositivi mobile.

Leggi articolo   La prima pagina web in HTML

CDN

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

Grazie all’utilizzo della CDN, i contenuti messi a disposizione del framework non hanno bisogno di essere installati sul nostro pc, appesantendo la memoria, ma i sistemi che mettono a disposizione il tutto collaborano vicendevolmente per soddisfare le richieste di contenuti, trasferendoli in maniera trasparente al fine di ottimizzarne il processo di consegna.

Questo non vuole però contrastare il download dei contenuti direttamente sul nostro pc anzi, se utilizzassimo il pacchetto di file sorgente velocizzeremo il processo di visualizzazione della pagina web perché installati localmente.

I download dei file lo trovate al seguente link – DOWNLOAD QUI!

JavaScript

<!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Sempre attraverso l’utilizzo della CDN andiamo a importare i file JS necessari a far funzionare i seguenti componenti:

  • Alert per determinati eventi
  • Pulsanti per la commutazione degli stati e la funzionalità caselle di controllo
  • Carosello
  • Menu a discesa per la visualizzazione e il posizionamento (richiede anche Popper.js )
  • Modal per la visualizzazione, il posizionamento e il comportamento di scorrimento
  • Navbar per estendere il nostro plug-in Collapse
  • Popover per la visualizzazione (richiede anche Popper.js )
  • Scrollspy per lo scorrimento e gli aggiornamenti di navigazione

I componenti per realizzare una pagina web minimal

Abbiamo visto come sia semplice realizzare una struttura web in Bootstrap. All’interno della sezione Componenti possiamo scegliere diverse strutture che andranno a comporre il nostro sito web.

L’utilizzo della navbar per impostare il menù, un carosello per la visualizzazione dei contenuti principali e molto altro. Lo stile del sito web spetta a te e alla tue preferenze. Utilizzare questo tipo di approccio, quindi di realizzazione mobile first, adatta in maniera automatica la visualizzazione responsive al sito. Esso quindi ci aiuta ad essere più performanti per quanto riguarda i canoni principali di velocità del sito e soprattutto in ambito SEO, che ci permette di posizionarci nella parte più alta delle ricerche.

Bootstrap
Bootstrap

Sezione esempi

Una sezione di esempi messi a disposizione all’interno del sito ufficiale ci permettono di farci un’idea sull’utilizzo dei componenti. Creare dei siti one-page o dei veri propri blog è possibile e semplice con il framework. Ovviamente, per rendere il tutto dinamico e quindi gestire il login, le sezioni del blog private e la sicurezza del nostro sito dovremmo utilizzare PHP.

Leggi articolo   La prima pagina web in HTML

Condividi il post

Condividi su facebook
Condividi su google
Condividi su twitter
Condividi su email
Condividi su whatsapp