Bootstrap: il framework di Twitter

Bootstrap framework, realizzato dai creatori di Twitter, è un insieme di eccellenti convenzioni HTML, CSS, strumenti Javascript, forms, bottoni, tabelle, griglie, navigazione e molto altro,
utilizzabili liberamente per lo sviluppo di applicazioni e pagine web.

Si tratta in sintesi di un modo rapido e semplice per fornire una soluzione pulita ed uniforme nella realizzazione di interfacce user-friendly, vantando uno stile gradevole, ampiamente utilizzato del famoso social network Twitter.

Il framework cross-browser, grazie alle dimensioni ridotte, circa 6Kb compresso in gzip, è distribuito sotto licenza Apache 2.0 ed offre una certa libertà di modificare e personalizzare ogni componente a vostro piacimento.

Bootstrap fornisce di default un layout a griglia di 940px divisi in dodici colonne con la possibilità di creare elementi nidificati.

Iniziamo nell'avvolgere il nostro layout in un div contenitore identificato dalla proprietà container e sfruttando gli attributi .row e .span
strutturiamo righe e le colonne della griglia:

<div class="container">
 <div class="row">
  <div class="span12">
    Riga1 Colonna1
    <div class="row">
      <div class="span6">Riga2 Colonna1</div>
      <div class="span6">Riga2 Colonna2</div>
    </div>
  </div>
 </div>
</div>

Il framework offre allo sviluppatore anche la capacità di adattarsi a differenti risoluzioni e dispositivi creando una struttura flessibile che si adatta alla pagina, senza ricorrere ad estreme modifiche del sorgente:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span2">
      ............
    </div>
    <div class="span10">
      ...........
    </div>
  </div>
</div>

Bootstrap con LESS Framework CSS

Bootstra è stato sviluppato sulla base di Less framework, un pre-processore flessibile che offre molta più potenza e flessibilità di un CSS singolo, attraverso cui è possibile accedere a funzionalità quali dichiarazioni annidate, variabili, mixin, operazioni e funzioni.

Riutilizzando intere parti di CSS, siamo dunque in grado di realizzare il nostro bootstrap.less per migliorare l'efficienza dell'applicazione, il file è ovviamente da ricompilare per convertirlo in puro standard css interpretabile dal browser.

Less non è l'unica soluzione di questo tipo disponibile in rete ma è probabilmente la più semplice, una ragione in più per scegliere di lavorare con il core di Bootstrap Framework.

Lo sviluppo di applicazioni web, in particolare, permette di utilizzare tutti gli elementi che richiedono un'interazione da parte degli utenti, vediamo dunque come realizzare un form di registrazione utilizzando proprio gli elementi appena elencati:

<form class="form-horizontal">
 <label><strong>Account Registration</strong></label>
 <label class="control-label" for="txtUser">User Name:</label>
 <input type="text" id="txtUser" class="span3" placeholder="UserMatrix1972">
 <label class="control-label" for="txtEmail">Email:</label>
 <input type="text" id="txtEmail" class="span3" placeholder="mx1972@email.it">
 <label class="control-label" for="txtPwd">Password:</label>
 <input type="password" id="txtPwd" class="span3">
 <label class="control-label" for="txtRipPwd">Ripeti Password:</label>
 <input type="password" id="txtRipPwd" class="span3">
 <label class="checkbox"><input type="checkbox">
   Ho letto ed accetto i termini di uso
 </label>
 <div class="form-actions">
   <button type="submit" class="btn btn-primary">Registra</button>
   <button type="reset" class="btn">Cancel</button>
 </div>
</form>

I componenti del Core

Bootstrap di base offre un'ampia scelta di componenti in stile web 2.0, per sviluppare siti web paragonabili graficamente ai portali di maggior successo. Vediamo nello specifico come realizzare una Navigation-Bar:

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
      <li class="active"><a href="#">Home</a></li>
  	<li><a href="#">Siti</a></li>
      <li><a href="#">Servizi</a></li>
      <!-- ecc.. -->
    </div>
  </div>
</div>

abbiamo utilizzato alcuni div per realizzare questa struttura ma possiamo ulteriormente rafforzare con diversi elementi, come ad esempio un campo per la ricerca:

<form class="navbar-search pull-left">
  <input type="text" class="search-query" placeholder="Search">
</form>

aggiungiamo anche un menua tendina

<li class="dropdown" id="menu1">
  <a class="dropdown-toggle" data-toggle="dropdown" href="#menu1">
   Forum<b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
   <li><a href="#">Lato client</a></li>
   <li><a href="#">Lato server</a></li>
   <li><a href="#">Grafica e flash</a></li>
   <li class="divider"></li>
   <li><a href="#">Sistemi operativi e software </a></li>
  </ul>
</li>

Nella parte centrale del documento, con poche righe di codice siamo in grado di creare un Tabs-Form in cui posizionare il testo:

<ul class="nav nav-tabs">
  <li class="active">
    <a href="#">Home</a>
  </li>
  <li><a href="#">Info</a></li>
  <li><a href="#">Forum</a></li>
</ul>

Nell'esempio allegato troviamo tutti i componenti che il framework mette a disposizione.

Bootstrap e jQuery

jQuery UI Bootstrap offre un'implementazione del progetto Bootstrap come tema per jQueryUI e può essere applicato ai widget del sito, utilizzato insieme senza doversi preoccupare degli stili in collisione. Il vantaggio nell'utilizzare questo approccio è che siete liberi di usare tutte le librerie di Bootstrap per il layout della pagina e jQueryUI per i widget interattivi. Il progetto è ancora giovane, ma possiamo già utilizzare un numero di componenti con una certa sicurezza.

Qualche esempio di utilizzo di questo tema:

// Per sviluppare un Accordion
    $("#accordion").accordion({
        header: "h3"
    });

<-- Questa la parte HTML dell'Accordion -->
<h2 class="demoHeaders">Accordion</h2>
<div id="accordion">
	<div>
		<h3><a href="#">First</a></h3>
		<div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
	</div>
	<div>
		<h3><a href="#">Second</a></h3>
		<div>Phasellus mattis tincidunt nibh.</div>
	</div>
	<div>
		<h3><a href="#">Third</a></h3>
		<div>Nam dui erat, auctor a, dignissim quis.</div>
	</div>
</div>

Vediamo come aggiungere un input per determinare un range tra due date:

<!-- Questa la parte HTML del Date Range -->
<h3>Date Rangepicker</h3>
<div>
	<input type="text" value="4/23/99" id="rangeBa" />
	<input type="text" value="4/23/99" id="rangeBb" />
</div>

//Questa la sua parte JS
$('#rangeBa, #rangeBb').daterangepicker();

Ecco il risultato una volta eseguito:

Bootstrap Framework permette di realizzare applicazioni e pagine web complesse avvalendosi di una libreria leggera e cross-browser. La grafica degli oggetti e dello stile di base è gradevole, la documentazione buona e soprattutto è possibile realizzare progetti in breve tempo, grazie alla semplicità del codice.

Link Utili

• Sito del progetto Bootstrap Framework
• Progetti realizzati con Bootstrap
• Sito del progetto jQueryUI Bootstrap