Personalizzare Bootstrap

Spread the love

Boostrap_logo.smallBootstrap “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 imbatto nel sito di Bootstrap (quale sito migliore?) che mi mostra questo favoloso servizio di personalizzazione col quale possiamo cambiare praticamente tutto nel comportamento e nell’aspetto di Bootstrap.

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:

Customize.png

Si possono selezionare anche strettamente i componenti che servono:

Customize select.png

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.

 

Dettagli disponibili nel Wiki, assieme alle istruzioni per localizzare correttamente i calendari.

Lascia un commento

Your email address will not be published.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.