Chi di voi non ha sentito ancora parlare del famosissimo Bootstrap? ūüôā

Negli ultimi anni si sono diffusi sempre pi√Ļ i framework css. Un framework consiste in un pacchetto contenente una serie di file¬†(html, css e javascript) il quale consente allo sviluppatore web frontend¬†di realizzare il proprio sito partendo da una struttura solida e ben collaudata.

In passato, prima dell’arrivo dei framework, i nostri colleghi sviluppatori si armavano di santa pazienza e realizzavano ex novo i vari stili css, per poi poterli archiviare ed utilizzare nei lavori successivi. Ora con Bootstrap (e con altri framework come ad esempio “Pure css“, “UI kit“, “Foundation“, ecc.) possiamo velocizzare il lavoro! ūüėČ

Bootstrap √® per l’appunto un framework in grado di aiutarci a strutturare¬†le nostre pagine web. E’ stato ideato dagli sviluppatori di Twitter (da cui il nome Twitter Bootstrap); nell’anno 2011 hanno deciso di condividerlo e di rilasciarlo Open Source con il resto del mondo.

La versione corrente √® la 3, ma tra poco potremo assaporare l’attesissima versione 4.

bootstrap4iscoming

LA GRIGLIA

Dovete sapere che Bootstrap, per poter aiutare lo sviluppatore nella realizzazione di pagine responsive e ben proporzionate, utilizza una Grid System (ovvero, una griglia) e una serie di classi già preimpostate; la pagina può essere suddivisa fino a 12 colonne e, in base alla struttura del sito e al tipo di dispositivo (smartphone, tablet e pc), possiamo avere 4 diverse opzioni:

  1. Un’opzione con la classe col-xs-n. colonne: la si utilizzer√† quando vorremo sviluppare un sito che si veda bene su smartphone (xs sta per extra small);
  2. Un’opzione¬†che utilizzer√†¬†la classe col-sm-n. colonne: in questo caso facciamo riferimento ai tablet con una larghezza minima di¬†750px¬†(sm sta per small);
  3. Un’opzione col-mdn. colonne: qui invece passiamo ai computer aventi un monitor di larghezza minima pari a 970 px (md sta per medium);
  4. Infine, col-lg-n. colonne: passiamo ai computer con un monitor large e con una larghezza che parte dai 1170 px (lg sta per large).

DOVE SCARICARE BOOTSTRAP

  1. Andate sul sito http://getbootstrap.com
  2. Cliccate sul pulsante del menu “Getting started
  3. Infine, cliccate su “Download Bootstrap“.

download-bootstrap

Una volta scaricato il pacchetto di bootstrap copiatelo ed incollatelo nella cartella del sito¬†per il quale state lavorando. L’interno del pacchetto contiene in tre cartelle img, js e css tutto quello che vi serve per poter iniziare. Quello che a noi interessa √® il css di bootstrap in modo tale da dover scrivere solamente le classi nel codice html.

Ora si tratta solamente di inserirlo nell’editor con il tag <link> scrivendo il seguente codice nella sezione <head>:

<!DOCTYPE html>
<html lang="it">

<head>
  <meta charset="UTF-8">
  <title>Bootstrap</title>

  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Semplice vero? ūüôā

Ora il prossimo step sarà quello di leggervi bene la guida di bootstrap (che diventerà presto la vostra Bibbia) in modo da scoprire tutte le sue classi.

Buono studio con Bootstrap e al prossimo articolo! ūüėČ

 




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.