Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Bootstrap: concetti fondamentali

Un esempio che mostra come utilizzare Bootstrap per creare layout responsivi, adatti all'interfaccia di un'app mobile HTML5 moderna.
Un esempio che mostra come utilizzare Bootstrap per creare layout responsivi, adatti all'interfaccia di un'app mobile HTML5 moderna.
Link copiato negli appunti

Bootstrap è uno strumento molto utile in ambito di sviluppo mobile, in quanto consente di realizzare componenti dell'interfaccia con caratteristiche tipicamente responsive. La Guida a Bootstrap di HTML.it ne affronta in modo approfondito gli aspetti più importanti, ed è aggiornata alla terza e più recente versione del framework. Bootstrap 3 nasce direttamente con un approccio mobile first in quanto,
di default, permette di realizzare layout fluidi che si adattano in maniera efficiente e robusta ad ogni tipo di dispositivo.

Per prima cosa è necessario avere a disposizione il framework. Lo si può scaricare in diverse modalità, ma il pacchetto che otterremo sarà comunque composto da tre cartelle di base: css, fonts e javascript. È possibile usare Bootstrap in maniera visuale mediante App Designer di Intel XDK.

Come template di base della pagina mireremo alla semplicità:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title>Iniziamo con Bootstrap</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link href="css/bootstrap.min.css" rel="stylesheet">
	</head>
<div class="container">
  <div class="text-center">
    <h1>Template di base</h1>
  </div>
</div><!-- div container -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
	</body>
</html>

La struttura presenta solo gli elementi di cui il framework necessita per funzionare:

  • nella sezione <head> viene collegato il foglio di stile bootstrap.min.css, mentre alla fine del <body> viene agganciato il file JavaScript bootstrap.min.js. In entrambi i casi, è necessario che il file HTML si trovi nella cartella in cui è stato decompresso Bootstrap;
  • al termine del blocco <body> includiamo un riferimento a jQuery tramite CDN. Si ricordi sempre che alcune funzionalità di Bootstrap richiedono l'integrazione di questa libreria;
  • il blocco <div> che dovrebbe contenere il layout dove Bootstrap agisce è quello contrassegnato dalla classe container.

Quanto detto nel terzo e ultimo punto del precedente elenco dimostra il modus operandi tipico di Bootstrap: si
applica una classe CSS ad un elemento, e questo si anima di proprietà responsive e grafiche. In questa lezione vedremo due elementi particolarmente comuni nelle app, e che dimostrano bene le capacità mobile-first di Bootstrap.

Barra di navigazione

Questo elemento riveste in tutte le tecnologie mobile un ruolo molto importante, svolgendo almeno due compiti: riporta il logo dell'app e contiene le voci di menu. In HTML5 si può realizzare semplicemente ed in maniera totalmente responsive utilizzando elementi <nav> e <ul>: saranno poi le classi di Bootstrap a trasformarli.

<nav class="navbar navbar-default">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">MioSito.it</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#contact">Chi siamo</a></li>
        <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Le nostre sedi <span class="caret"></span></a>
     <ul class="dropdown-menu">
      <li><a href="#">Roma</a></li>
      <li><a href="#">Torino</a></li>
      <li><a href="#">Firenze</a></li>
     </ul>
    </li>
      </ul>
    </div>
  </div>
</nav>

Affinchè il tag <nav> dia vita ad un'opportuna barra di navigazione, esso deve essere corredato dalle classi navbar e navbar-default. All'interno vengono inseriti due blocchi: il primo, di classe navbar-header, sarà il logo dell'applicazione, mentre il blocco contenuto in una lista non ordinata di HTML (tag <ul>) svogerà il ruolo di menu vero e proprio. Se si vuole creare un sottomenu come quello è sufficiente inserire un'ulteriore lista all'interno di una voce <li>.

Questi elementi possono essere sperimentati all'interno di Intel XDK. Nelle seguenti figure si può vedere la differenza
nella visualizzazione del medesimo menu visualizzato in un Nexus 4 ed in un iPad di Apple.

Figura 1. Menu come appare in un Nexus 4

Menu come appare in un Nexus 4
Figura 2. Apertura del menu in un Nexus 4

Apertura del menu in un Nexus 4
Figura 3. Menu in un Apple iPad

Menu in un Apple iPad

La griglia

L'elemento centrale dei layout in Bootstrap è sicuramente la griglia. Permette di realizzare dei layout responsive semplicemente
assegnando classi che specificano il modo in cui le dimensioni vengono distribuite a seconda degli spazi disponibili. Il concetto, in sintesi, è il seguente: la larghezza disponibile viene suddisa in 12 colonne immaginarie e dobbiamo semplicemente
dire quante di queste colonne ogni elemento occuperà.

La larghezza delle colonne varia a seconda della dimensione del display e del tipo di dispositivo, quindi a seconda dello
spazio a disposizione lo stesso numero di colonne occuperà più o meno pixel, adattandosi automaticamente. Le possibili dimensioni sono scandite da quattro breakpoint, ad ognuno dei quali corrisponde una classe:

  • extra-small: fino a 767 px di larghezza, classe col-xs;
  • small: da 768 px a 991 px, classe col-sm;
  • medium: da 992 fino a 1199 px, classe col-md;
  • large: da 1200 px in su, classe col-lg;

Se, ad esempio, vogliamo intendere che un elemento avrà larghezza 3 colonne su schermi small, la classe che indicheremo
sarà col-sm-3. Se la larghezza è 6 colonne su schermi extra-small, la classe sarà col-xs-6. Essendo in totale 12 le colonne disponibili se un elemento è largo 4 corrisponderà ad un terzo dello spazio, se è largo 6 corrisponderà al 50%. Consideriamo il seguente esempio:

<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6">
<p class="blocco">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>
</div>
<div class="col-md-4 col-sm-6">
<p class="blocco">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>
</div>
    <div class="col-md-4 col-sm-6">
<p class="blocco">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>
</div>
<div class="col-md-4 col-sm-6">
<p class="blocco">Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. </p>
</div>
</div>

Abbiamo definito blocchi che saranno larghi 4 colonne su schermi medium, e 6 su schermi small. Questo il risultato su un iPad in landscape ed in portrait:

Figura 4. Layout su un iPad in portrait

Layout su un iPad in portrait
Figura 5. Layout su un iPad in landscape

Layout su un iPad in landscape

Come si può vedere, a seconda dell'orientamento del tablet, le colonne su cui si dispongono gli elementi sono 2 oppure 3, realizzando un layout responsive.

Ti consigliamo anche