Bootstrap 3 una sistema, o framework, per crerare velocemente un sito web responsivo.

Che cosa è Bootstrap? E un popolare framework che ci permette di creare rapidamente e facilmente siti web responsive con varie elementi comuni come un menu, carosello o tab e tanto altro . In realtà, si tratta di un insieme di strumenti gratuiti che consentono di sfutarre un codice gia precompilato con diversi elementi pronti al uso. E quindi non dovrai piu pensare come creare un menu e farlo responsivo, che si nasconda sui dispositivi piccoli, basterebbe solo di copiare un framente del codice o snippet come viene chiamato e inserirlo sulla tua pagina html.  Inoltre potrai sempre cambiare aspetto della tua pagina atraverso varii stili css.

Viene inserito da deffault in CMS come Joomla e WP. Quindi imparando come funziona potrai sempre modificare un sito gia esistente o creare uno nuovo come per esempio una landing page

 

1 La cosa bella è che non dobbiamo conoscere alla perfezione ne HTML ne CSS per poter utilizzare questa sistema ci  basterebbe di conoscere almeno le basi di HTMLe CSS

 BOOTSTRAP 3 o che cosa è un sito web responsivo?

Questo sistema è stata creata dal ingegnere e progettista di Twitter, è per questo che è spesso usato il nome «Twitter Bootstrap». Ora è molto popolare nel mondo, esempi di siti costruiti su di esso si possono trovare ovunque. Ebbene, anche sul sito ufficiale possiamo vedere esempi di siti web creati su Bootstrap.

 Bootstrap 3, differenze rispetto alla precedente versione:

   1. È stato originariamente progettato per i dispositivi mobili, che sono diventati molto difusi e avendoli sempre sotto la mano spesso visitiamo varii siti proprio da esso. La nova griglia di bootstrap è stata progetata in modo che prima si adatta a dispositivi grandi e puoi si cambia e si addatta per quelli piccoli.

    La griglia di bootstrap 3 è stata presentata in un solo formato  - reattivo (prima c'erano due: adattivo e reattivo Ma la sua funzionalità è stata notevolmente estesa tramite maggior numero di griglie di diverse dimensioni..
    2. Ora nel sistema sono inclusi varie tipi di font che possono essere utilizzati come icone. In precedenza nel kit erano incluse gli sprite di Bootstrap (centinaia di icone in un unico file ) nel formato PNG. Per mezzo di CSS (proprietà “Posizion” e altri) era possibile visualizzare da questo disegno che poteva contenere anche centinaia di icone una icona precisa. Il problema che nel formato  PNG è impossibile al volo cambiare le dimensioni o colore. Beh, in Bootstrap 3, abbiamo a che fare con le immagini vettoriali (come font), che possono essere responsive, e quindi posiamo cambiare colore e dimensioni di queste icone.

Ma che cosa è un sito responsivo ? Il fatto che i tempi in cui l'utente visitava un sito web solo dal computer fisso e portatile, sono lontani. Adesso il traffico da dispositivi mobili posiamo dire che ha ragiunto volumi molto importanti per lascarlo da parte e non prendere in considerazione. Quindi per non perdere quei utenti che visitano il vostro sito da celulari il vostro sito web dovrebbe addatarsi ai piccoli schermi.

Adesso non è sufficiente avere un  sito web che funziona solo su schermi di grandi dimensioni. È anche necessario che non perde le sue proprietà e il suo fascino anche sugli schermi piccoli e medie. Creare a questo scopo un sito separato per dispositivi mobili non è  la idea migliore (la complessità delle informazioni di sincronizzazione, la complessità del riconoscimento, ecc).

Un passo nella direzione giusta è ststo  il concetto di responsive design, quando il sito stesso può regolarsi adeguatamente (rispondere) alle dimensioni di schermo dell'utente. Questo viene realizzato tramite caricamento di diversi stili CSS durante la visualizzazione del sito su schermi di diversi dispositivi. Ad esempio, se il sito si sta guardando da un monitor grande vengono caricati stili a 12 colonne, nel caso della tablet a due colonne, e quando  l'utente utilizza smartfone lo stesso sito verrà visualizzato a forma di un layout a colonna singola.

Il contenuto e il colore del sito non cambia, e l'unico cambiamento è un modo diverso di raggruppare blocchi di informazioni da dispositivo a dispositivo. Responsive design richiede uno sforzo maggiore da parte degli sviluppatori, ma grazie al Bootstrap questo problema potrà superare anche una persona con pocca esperienza.

Ma vale la pena di lavorare con un responsive design (utilizzando Bootstrap o suoi concorrenti)?

Dipende. Tutto dipende dal  tipo di problema che stai provando di risolvere. Per modifficare per esempio design di un sito posimo procedere in modi diversi :

    1.Comprare template o tema già pronti per il vostro CMS, qualche piccolo cambiamento in esso (hider, logo, colore) e  ottenere subito il risultato desiderato
        2. È possibile rivolgersi ad  un designer che ti creerà un design unico per il  tuo sito. Tuttavia, questa azione costa  e non poco. Per esempio, ho parlato con uno studio di medio livello, dove per l'aggiornamento del disegno di un sito chiedono quasi 2000 euro. Sarai unico proprietario di tale template, pero il costo e decisamente alto. La stessa cosa potete vedere su i siti che vendono i template, dove una licenza unica di diritto al templat scelto può costare anche oltre i 3000 euro. Capisco che possiamo trovere un libero professionista ad un prezzo più basso, ma tutto questo dipende dal rapporto qualità / prezzo.
      3. Ebbene, e la terza opzione è un compromesso tra quelle sopra descritte,  l'utilizzo di framework  (ad esempio Bootstrap). Il fatto è che una parte del lavoro è gia  stata fatta a posto tuo. Non dovremo piu pensare di certi aspetti specifici della progettazione. Avremo gia una strutura della pagina molto flessibile.

    Posiamo sempre modificare qualsiasi elelmento di Bootstrap a proprio gusto

Non è vero quando dicono che i siti  realizzati con Bootstrap sono tutti uguali. Tutto dipende da voi - le possibilità di personalizzare molti, ma molti semplicemente non vogliono perdere ulteriore tempo per personalizzare il loro sito.

    Devo ammettere che nella realizzazione di un sito responsivo il codice sara molto piu lungo e complesso perché dovremo prevedere varie situazioni che potranno succedere con i nostri elementi della pagina su varie dispositivi. Inoltre, si dovrà imparare le basi di  lavoro con i framework, ma poi si può fare rapidamente quello che vi serve. E come detto nel famoso cartone animato è meglio perdere un ora per le preparazioni e poi cinque minuti per raggiungere la vetta che fermarsi ogni 5 minuti. Da questo vincerà anche il vostro progetto, avrà più qualità.

Framework  Bootstrap permette con la  semplice aggiunta di classi (Corso Css e corso CSS pratica) al tag  html realizzare effetti molto speciali, come per esempio cambiamento del colore con passagio del mouse. Ad esempio, vediamo come cambiera il suo aspetto una tabella sul vostro sito dopo aver aplicato ad essa  la classe di bootstrap  “table table-hover”

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Posiamo subito notare la sua formatazione  e cambiamento del colore della riga allo stato hover, quando pasiamo sopra con il mouse

E vediamo il nostro codice

<table class="table table-hover"> 
  <thead> 
    <tr> 
      <th>#</th> <th>First Name</th> <th>Last Name</th> <th>Username</th> 
     </tr> 
  </thead> 
  <tbody> 
     <tr> 
        <td>1</td> <td>Mark</td> <td>Otto</td> <td>@mdo</td> 
     </tr> 
     <tr> 
        <td>2</td> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> 
      </tr> 
      <tr> 
         <td>3</td> <td colspan="">Larry the Bird</td> <td>@twitter</td> 
      </tr> 
    </tbody> 
</table>

Vediamo che la struttura è tipica di una tabella comune ma con agiunta della classe <table class="table table-hover"> di bootsrap l'abbiamo formatata in pochi secondi.

No dovete inventare  stili CSS per questa classe sono gia prescritti nel fai css di Bootstrap. È molto comodo e veloce.

Con la setessa semplice tecnica posiamo creare anche bottoni di vari colori e grandezza, basterebbe ad ellemento che volete transformare in un bottone agiungere classe .btn e puoi un altra classe che definira il suo colore o grandezza per esempio .btn-info e otteremo un bottone come quello che vedimo sotto con la scritta INFO.

Vediamo il codice di bottoni sopra

<!-- Standard button -->
<button type="button" class="btn btn-default"Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary"Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success"Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info"Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning"Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger"Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link"Link</button>

È  molto facile creare anche altri elementi  utilizando varie stili pronti di bootstrap, per esempio creare un Menu a discesa (Dropdowns) da una lista, impaginazione (numerazione pagina),  finestre pop-up, nonché suggerimenti e molto altro ancora, una lista completta si possa vedere sul sito uficiale di Bootstrap.

Ma non dimentichiamo elemento principale di bootstrap condivisione della paggina web a colonne, cosi detta sistema a griglia, E proprio questo concetto permette di rendere la vostra pagina o sito responsivo 

Dove scaricare  Bootstrap .

Posimo scaricare Bootstrap 3 dal sito ufficiale  GetBootstrap.com.2

Vorrei subito specificare che la scheda «Personalizza » ultima voce in alto a destra da la possibilità di selezionare i componenti e plugin jQuery necessarie, nonché cambiare da li varie elementi del pachetto come  colore, font, forme, e altre le cose. Posiamo gia prima di scaricare addatare per esemio colori allo stile del nostro sito . Dopo aver fatto cambiamenti e selezionando quello che vogliamo scaricare posiamo procedere con salvataggio e scaricare il pachetto personalizzato di Bootstrap utilizzando  pulsante in basso.

Tuttavia, l'opzione migliore, a mio parere, capire come funziona questo framework  e modificare le sue  impostazioni gia in seguito. In particolare, quando si comincia a studiare da zero, quindi abbiamo bisogno di tutto ciò che Bootstrap ci offre. Quindi, basta andare alla pagina di download e scaricare  il pacchetto standard (scheda «Per iniziare») e fare clic sul pulsante «Scaricare Bootstrap»:
3

Dopo aver aperto l'archivio vedremo  tre cartelle: css, font e js. Questo è tutto ciò che è necessario per poter  lavorare con questo framework. Pero direi no,  avrete bisogno di un  editore di HTML e CSS (potete usare  Notepad ++ di qui nel corso HTML e CSS o per essere piu atrezzati opterei per Phpdesigener che ci da la possibilità non solo di creare un progetto ma anche un sacco di altre cose utili durante il nostro lavoro ).

Vediamo cosa c'è nella cartella CSS di Bootstrap. Qui ora ci sono sei file, ma fino a poco tempo fa c'erano soltanto quattro. Infatti, i due gruppi di tre fail per ciascun nome o tipo. Ad esempio, il file  bootstrap.css bootstrap.min.css contengono lo stesso codice CSS, ma sono diversi per il nome  in quanto il codice nel file bootstrap.css è facile da leggere perché è formattata in modo piu abituale.

4

Codice nel file bootstrap.min.css compresso per ridurre le dimensioni del file (infatti sono state  rimosse tutti gli spazi e le interruzioni di riga ), e rappresenta una grande unica riga, che è molto difficile da leggere.

5

Pertanto, il file  bootstrap.min.css pesa un quarto in meno rispetto il file bootstrap.css  senza perdere alcuna funzionalità. Beh, il file bootstrap.css.map apparso nella distribuzione di Bootstrap 3 di recente. Per quanto mi risulta  permette con varie plugin del browser come per esempio Fierbug (nel browser Firefox o Chrome)  lavorare con il codice compreso di  CSS, come se non fosse stato compresso.

Lo stesso si può dire per i file e bootstrap-theme.css bootstrap-theme.min.css. Nella seconda versione Bootstrap non c'erano. Il fatto che il Bootstrap 3 è un cosiddetto "design piatto" (senza sfumature, ombre, ecc). Quindi hanno aggiungere il proprio semplice  template come uno strumento in piu che è possibile collegare alla vostra pagina e aggiungere ancora piu velocemente varie elementi alla vostra pagina  o al  sito.

Nella cartella di font  di  Bootstrap 3 abbiamo quattro file con font. Si tratta dello  stesso font,  presentato in quattro diversi formati. Questi font contengono fra altro   icone glifi (icone, in forma dei disegni vettorali  che possono essere utilizzati sul vostro sito ). Come ho già detto in precedenza, è possibile modificare le dimensioni (o colori), perché rappresentano una grafica vettoriale. Ne parleremo piu avanti di queste icone.

Nella cartella JS ci sono due fail  bootstrap.js e bootstrap.min.js sono i fail di  java script, che si differenziano tra di loro solo che in  questo ultimo vengono rimossi  tutti gli spazi e le interruzioni di linea, è il motivo per cui il codice è diventato praticamente illeggibile dal punto di vista di un uomo, ma non ha perso niente per essere  interpretato dal nostro browser (dal nostro computer). E naturalmente e diventato piu leggero. Oltre a questo fail avremmo bisogno per lavorare con bootstrap, anche di altri fail nel formato js. Ma di questo ne parleremo dopo. Clica qui per proseguire

 

Letto 2281 volte