BOOTSTRAP

COSA È BOOTSTRAP

  • Bootstrap è un framework front-end gratuito per lo sviluppo web più semplice e veloce
  • Bootstrap è composto da una serie di modelli HTML e CSS che definiscono: tipografia, forms, pulsanti, tabelle, barra di navigazione, finestra pop-up, caroselli di immagini e molte altre componenti e plugin JavaScript.
  • L'obbiettivo principale di Bootstrap è dare la possibilità di creare facilmente progetti responsive
  • Facile da usare: Chiunque con una conoscenza solo di base di HTML e CSS può iniziare a utilizzare Bootstrap
  • Caratteristiche Responsive: Il CSS responsive di Bootstrap si adatta ai telefoni, tablet e desktop
  • Mobile-first: In Bootstrap 3, gli stili per i dispositivi mobili sono il punto di partenza di ogni progettazione
  • Compatibilità del browser: Bootstrap è compatibile con tutti i browser moderni (Chrome, Firefox, Internet Explorer, Safari e Opera)

COME INSERIRE BOOTSTRAP

Per utilizzare Bootstrap devo inserire tre componenti:

  • Il foglio di stile di Bootstrap
  • Libreria jQuery
  • Plugin Javascript di Bootstrap

Ho due modi per importare Bootstrap nella mia pagina web:

SCARICARE BOOTSTRAP

  1. Mi collego a http://getbootstrap.com
  2. In home page clicco download
  3. Arrivo alla pagina Getting started e qui scelgo "Download Bootstrap"
  4. Sceglierò di scaricare il file (un archivio formato zip) in una cartella di lavoro e lo decomprimerò
  5. La cartella estratta dall'archivio zip si chiama bootstrap-3.3.7-dist. In questa cartella troverò 3 cartelle:
    • La cartella css che contiene i fogli di stile
    • La cartella fonts che contiene le iocne di bootstrap
    • La cartella js che contiene i plugin javascript
  6. Copio le tre cartelle nella directory principale del mio sito

AGGIUNGERE JQUERY

  1. Mi collego a http://jquery.com
  2. In home page clicco download
  3. Arrivo alla pagina Downloading jQuery  e qui scelgo: 
    Download the compressed, production jQuery 3.2.0
  4. E salvo il file (jquery-3.2.0.min.js) nella cartella js del mio sito dove si trova già bootstrap.js.
<!doctype html> 
<html> 
	<head> 
		..... 
		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
		<link href="/css/bootstrap.min.css" rel="stylesheet" /> 
		..... 
	</head> 
	<body> 
		..... 
		<script src="/js/jquery-3.2.0.min.js"></script>
		<script src="/js/bootstrap.min.js"></script> 
	</body> 
</html>

BOOTSTRAP GRID SYSTEM

I contenuti possono essere organizzati in colonne. Le colonne sono elementi flotanti (float:left o float:right) e sono contenuti in elementi riga. Il grid system di Bootstrap è basato su 12 colonne.

Le classi definite da bootstrap determinano il comportamento di questi elementi.

  • Gli elementi riga sono configurati dalla classe row che fa in modo che gli elementi colonna siano correttamente affiancati e impaginati
  • Gli elementi colonna sono configurati dalle classi col-*-* dove il primo asterisco è xs, sm, md o lg e determina il tipo di schermo, il secondo è un numero e determina (in colonne) la larghezza dell'elemento per quel tipo di schermo. La somma delle larghezze per lo stesso tipo di schermo all'interno di una riga deve essere 12.
  • Gli infissi xs, sm, md e lg (corrispondenti a smatphone, tablet verticale, tablet orizzontale, desk-top) determina il livello minimo per cui l'elemento ha la larghezza dichiarata dalla classe. Per dimensioni inferiori, se non specificato, l'elemento occupa l'intero schermo.

HTML CORRISPONDENTE

<div class="container"> 
<div class="row"> 
	<div class="col-sm-12"></div> 
</div> 
<div class="row"> 
	<div class="col-sm-3"></div> 
	<div class="col-sm-5"></div> 
	<div class="col-sm-4"></div> 
</div> 
<div class="row"> 
	<div class="col-sm-12">
</div> 
</div>

Logo Accademia