Michele PinassiDa quanto un collega mi ha fatto scoprire Bootstrap (http://getbootstrap.com) ammetto che mi si è aperto un nuovo mondo per sviluppare siti web.
Bootstrap non è altro che un framework CSS (e Javascript), nato e sviluppato dentro Twitter (da @mdo e @fat), per semplificare al massimo lo sviluppo di siti web, senza però essere troppo invasivo nelle abitudini di chi è abituato a scrivere il codice HTML a mano e, soprattutto, permette una migrazione abbastanza “dolce” dall’eventuale codice pre-esistente.
Sviluppare un nuovo sito web con Bootstrap è molto semplice: come prima cosa si può partire dagli esempi messi a disposizione sul sito web, alla pagina “Getting Started/Examples“, dove si trova una bella panoramica delle potenzialità di questo framework.
Personalmente l’ho utilizzato anche per lavoro nello sviluppo del nuovo portale dedicato alla Telefonia di Ateneo (voip.unisi.it), dove ho implementato Bootstrap insieme a jQuery, creando tutta una serie di servizi interattivi per l’utenza accademica. Ci tengo anche a sottolineare come il portale sia HTML5 compliant.
Oltre alla tradizione impostazione a griglia, che permette di implementare layout dinamici (responsive) che si adattano alle dimensioni dello schermo dell’utenza, uno degli aspetti che mi ha particolarmente fatto comodo è l’utilizzo semplice delle icone Glyphicons, semplicemente inserendo un tag <span>. Ad esempio, con la riga:
<span class="glyphicon glyphicon-phone-alt"></span>
si ottiene il simbolo del telefono adattato all’altezza dell’elemento contenitore, come ad esempio l’intestazione della pagina (H1).
Vediamo, ad esempio, come si possono combinare i vari elementi di Bootstrap per la creazione di un layout semplice, gradevole ma efficace:
La descrizione ed il codice degli elementi è sul sito web di Bootstrap (http://getbootstrap.com/components/)
Ovviamente questo è solamente un esempio di come si può impostare il layout ! Per un’altro tipo di progetto, ad esempio, ho deciso di utilizzare una impostazione a pannelli dinamici full-width che scorrono man mano che si scorre lungo la pagina (esempio da AllAroundSiena.com):
Progetto All Around Siena
In questo progetto ho utilizzato anche Font Awesome, Boostrap Social Icons e Stellar.js
Una volta deciso quale tipo di layout vogliamo dare al nostro sito web, possiamo partire con la costruzione dello stesso.
Personalmente separo la parte relativa all’header e quella relativa al footer in due file separati (chiamiamoli pure header.php e footer.php). Inoltre creo due cartelle ‘css’ e ‘js’ dove copio, rispettivamente, i fogli di stile ed il codice javascript.
Partiamo con l’header.php:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="My first Bootstrap website" /> <meta name="author" content="Michele Pinassi" /> <meta name="keywords" content="bootstrap, test, example" /> <link rel="shortcut icon" href="/favicon.ico" /> <title>My first Bootstrap website</title> <!-- Bootstrap core CSS --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- Google web Font --> <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,100' rel='stylesheet' type='text/css'> <!-- jQuery UI --> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" /> <!-- Custom styles for this template --> <link href="/css/custom.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="navbar-brand" href="/">Example</a> </div> <form class="navbar-form navbar-right" role="search" method="GET"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" name="q"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </nav> <div class="my-container"> <div class="row">
Come potete vedere, nella sezione <head> ci sono i richiami sia al framework Bootstrap che al Google Font “Lato” (che volendo potete anche togliere) , oltre a jQuery e jQuery-UI. Vi è anche una parte di codice condizionale se il browser è Internet Explorer versione < alla 9 (<!–[if lt IE 9]>…<! endif–>), per cercare di mantenere la compatibilità con i browser più vecchi.
Nel <body> si inserisce la parte relativa al menù superiore (navbar) e si predispone lo spazio per i contenuti (all’interno del <div> my-container ).
Il footer, ovviamente, come prima cosa chiuderà questi ultimi due tag aperti:
</div><!-- /.row --> </div><!-- /.container --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/common.js"></script> </body></html>
oltre a caricare qui il javascript relativo a jQuery (Eventuale javascript è meglio inserirlo alla fine per velocizzare il rendering della pagina).
Il richiamo a questi due “pezzi” di codice viene fatto all’interno di ogni pagina, come ad esempio l’immancabile “index.php”:
<?php include "header.php"; ?> <div class="page-header"> <h1>Hello world</h1> </div> <div class="col-md-6"> Just an example to start with </div> <?php include "footer.php"; ?>
dove si scrive semplicemente il codice relativo al contenuto che vogliamo mostrare.
Il risultato, molto semplice, è questo:
Esempio sito con Bootstrap
Potete scaricare tutti i file sorgente da questo link: esempio_bootstrap.tar.gz
Hai trovato utile questo articolo?
2 comments
Una domanda da neofita, ma con bootstrap è possibile creare un sito dinamico tipo wordpress? Oppure solamente statico in html? Tipo una volta creato una pagina per creare un articolo tipo wordpress devo scrivere nella pagina in html? In pratica non esiste un beckend? Grazie
Ciao Giovanni,
Bootstrap è un framework che ti permette di facilitare la creazione dell’aspetto grafico e dell’interfaccia che interagisce con l’utente. Tutto ciò che sta sotto, il backend, è a discrezione dello sviluppatore pertanto si, puoi tranquillamente usare Boostrap sia per creare un sito dinamico che statico, a seconda delle tue necessità.
Nello specifico, se non hai esperienza di programmazione in PHP e non ti interessa acquisirla, ti suggerisco di puntare su un CMS già pronto come WordPress, dove puoi usare anche temi sviluppati con Bootstrap: https://it.wordpress.org/themes/search/bootstrap/