Bootstrap

Page last edited 901 giorni 4 ore fa
Da wiki.betaingegneria.it.

Installazione[modifica]

Attenzione! non è semplice, prima di arrivare a installare Bootstrap c'è da aprire una serie di scatole cinesi.

-3) Installare node.js

  curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash -
  sudo apt-get install -y nodejs

-2) Installare npm Da questo sito si ha questo suggerimento:

  The best way to install npm is to install node using the node.js installer. npm is installed as part of node.

Quindi, avendo ottemperato il punto -3), siamo già a posto

-1) Installare bower

  $ sudo npm install -g bower
    /usr/bin/bower -> /usr/lib/node_modules/bower/bin/bower
    /usr/lib
    └── bower@1.7.9 

0) Installare jQuery. La versione corretta per la versione di Bootstrap che si vuole installare (attualmente la 3.3.6) si trova in questa risorsa [1] (cercare "jQuery required" e cliccare su bower.json). Si troverà il frammento di dato JSON in cui c'è la versione richiesta di jQuery:

 "dependencies": {
   "jquery": "1.9.1 - 2"
 }

Quindi una versione vecchiotta (prima della 2)

  $ bower install jquery
  bower jquery#*              not-cached https://github.com/jquery/jquery-dist.git#*
  bower jquery#*                 resolve https://github.com/jquery/jquery-dist.git#*
  bower jquery#*                checkout 2.2.3
  bower jquery#*                resolved https://github.com/jquery/jquery-dist.git#2.2.3
  bower jquery#^2.2.3            install jquery#2.2.3
  
  jquery#2.2.3 bower_components/jquery

Qui però non ho installato la 1.9.1. Come si fa?

  $ bower install https://code.jquery.com/jquery-1.9.1.js
  bower jquery-1.9.1#*        not-cached https://code.jquery.com/jquery-1.9.1.js#*
  bower jquery-1.9.1#*           resolve https://code.jquery.com/jquery-1.9.1.js#*
  bower jquery-1.9.1#*          download https://code.jquery.com/jquery-1.9.1.js
  bower jquery-1.9.1#*          resolved https://code.jquery.com/jquery-1.9.1.js#e-tag:W/"54499a4
  bower jquery-1.9.1#*           install jquery-1.9.1#e-tag:W/"54499a4
  
  jquery-1.9.1#e-tag:W/"54499a4 bower_components/jquery-1.9.1

1) A questo punto possiamo installare Bootstrap (non usare sudo, il programma di installazione vuole l'utente corrente):

  $ bower install bootstrap
  /usr/lib/node_modules/bower/lib/node_modules/configstore/index.js:54
  				throw err;
  				^
  
  Error: EACCES: permission denied, open '/home/marcob/.config/configstore/bower-github.json'
  You don't have access to this file.
  
      at Error (native)
      at Object.fs.openSync (fs.js:584:18)
      at Object.fs.readFileSync (fs.js:431:33)
      at Object.create.all.get (/usr/lib/node_modules/bower/lib/node_modules/configstore/index.js:35:26)
      at Object.Configstore (/usr/lib/node_modules/bower/lib/node_modules/configstore/index.js:28:44)
      at readCachedConfig (/usr/lib/node_modules/bower/lib/config.js:19:23)
      at defaultConfig (/usr/lib/node_modules/bower/lib/config.js:11:12)
      at Object.<anonymous> (/usr/lib/node_modules/bower/lib/index.js:16:32)
      at Module._compile (module.js:413:34)
      at Object.Module._extensions..js (module.js:422:10)

vado a mano a cambiare i peressi al file incriminato

  $ ll /home/marcob/.config/configstore/bower-github.json
  -rw------- 1 root root 2 apr 15 10:52 /home/marcob/.config/configstore/bower-github.json

è di root

  $ sudo chown marcob /home/marcob/.config/configstore/bower-github.json

Provo a fare rigirare bower:

  $ bower install bootstrap
  bower bootstrap#*           not-cached https://github.com/twbs/bootstrap.git#*
  bower bootstrap#*              resolve https://github.com/twbs/bootstrap.git#*
  bower bootstrap#*             checkout v3.3.6
  bower bootstrap#*             progress Ricezione degli oggetti:  62% (255/411), 2.81 MiB | 572.00 KiB/s
  bower bootstrap#*             resolved https://github.com/twbs/bootstrap.git#3.3.6
  bower bootstrap#^3.3.6         install bootstrap#3.3.6
  
  bootstrap#3.3.6 bower_components/bootstrap
  └── jquery#2.2.3

Installazione completata! Qui però mi inquieta il fatto che l'output di bower cita jquery#2.2.3 che era quella che mi era venuta gratis quando avevo installato jquery al punto 0)

E adesso cosa ci faccio a bootstrap?[modifica]

Ancora un secondo, occorre installare un altro componente software per compilare CSS e Javascript, e Bootstrap usa Grunt

Fatte tutte le operazioni preeliminari del capoverso precedente, va tutto a buon fine (qui invece usare sudo):

  $ sudo npm install -g grunt-cli
  /usr/bin/grunt -> /usr/lib/node_modules/grunt-cli/bin/grunt
  /usr/lib
  └─┬ grunt-cli@1.2.0 
    ├─┬ findup-sync@0.3.0 
    │ └─┬ glob@5.0.15 
    │   ├─┬ inflight@1.0.4 
    │   │ └── wrappy@1.0.1 
    │   ├── inherits@2.0.1 
    │   ├─┬ minimatch@3.0.0 
    │   │ └─┬ brace-expansion@1.1.3 
    │   │   ├── balanced-match@0.3.0 
    │   │   └── concat-map@0.0.1 
    │   ├── once@1.3.3 
    │   └── path-is-absolute@1.0.0 
    ├── grunt-known-options@1.1.0 
    ├─┬ nopt@3.0.6 
    │ └── abbrev@1.0.7 
    └── resolve@1.1.7

Arrivati a questo punto si può passare in rassegna la galleria di esempi che si trova nel bundle bootstrap-v3.3.6.zip

Ad esempio a me interessa questo template che scrolla mantenendo un header fisso:

navbar-fixed-top

Le risorse per inizare a sviuppare i propri template sono 1ui:

  • [2]
  • [3]
  • [4] (Glyphs, menu a discesa, pulsantiere, datepicker, etc)

Personalizzazione[modifica]

Bootstrap "appena tolto dalla confezione" (out-of-the-box) ha la possibilità di gestire grid-systems per un massimo di 12 colonne.

Io ho bisogno di realizzare una tabella con 13 colonne. Dopo il solito giro di forum mi imatto nel sito di Bootstrap (quele sito migliore?) che mi mostra questo favoloso servizio di personalizzazione in cui possiamo cambiare praticamente tutto nel comportamento e nell'asspetto di Bootstrap, il servizio di [personalizzazione (customize) http://getbootstrap.com/customize].

In sostanza c'è la possibilità di rigenerare tutto lo stack javascript/css andando a modificare una messe di variabili di configurazione.

Ma concentriamoci sul problema della griglia a 12 colonne. Quello che mi interessa modificare è il numero massimo di colonne: trovo questo parametro nella sezione

  Common CSS > grid 

la voce da modificare è @grid-columns e la porto da 12 a 13:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Si possono selezionare anche strettamente i componenti che servono:

Errore nella creazione della miniatura: Impossibile salvare la miniatura nella destinazione

Io seleziono tutto e vado in basso al pulsante Compile and Download. Cliccando vengono rigenerati i file CSS, Javascript, i font e viene scritto un file di configurazione in formato JSON:

  $ ll
  totale 40
  drwxrwxr-x 5 marcob marcob  4096 apr 29 10:19 ./
  drwxrwxr-x 5 marcob marcob  4096 apr 29 10:19 ../
  -rw-rw-r-- 1 marcob marcob 18298 apr 29 10:19 config.json
  drwxrwxr-x 2 marcob marcob  4096 apr 29 10:19 css/
  drwxrwxr-x 2 marcob marcob  4096 apr 29 10:19 fonts/
  drwxrwxr-x 2 marcob marcob  4096 apr 29 10:19 js/

A questo punti modifico anche l'intestazione HTML perché punti alla mia versione personalizzata di Bootstrap piuttosto che alla versione online

Modificare la localizzazione del calendario[modifica]

Il plugin per i calendari a discesa è portentoso. Per personalizzarlo aggiungere la localizzazione nel codice che lo definisce:

     <script type="text/javascript">
       // When the document is ready
       $(document).ready(function () {
         
         $('#from').datepicker({
           format: "dd/mm/yyyy",
           language: 'it'
         });  
       
       });
     </script>