Come creare gli spazi vuoti tra le colonne Bootstrap 3

Oggi vediamo come impostare gli spazi vuoti  tra le colonne in Bootstrap utilizzando classe offset  per distanziare le nostre collone e rendere il nostro testo in esso contenuto  piu leggibile e libero.

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

 

 Realizzare gli spazi vuoti fra le colonne in BOOTSTRAP 3

Nel  ultimo esempio, nel articolo precedente,  ho fatto vedere  un vero lavoro con una pagina html  tipica, e mi sono fermato sul distanziare  il nostro testo dal bordo della pagina /browser  mediante la classe class = "container" e avevo promesso di mostrare come rendere le immagini utilizzate sulla pagina responsive.

Se non avete letto l'articolo precedente, vi consiglio di farlo, perché allora non potrete capire che cosa sto facendo. Ci si può scaricare la pagina con la quale stiamo lavorando  (archivio img.zip e fail sito.html), dove stiamo utilizzando vari classi  dal arsenale del bootstrap. Al momento, il layout della nostra pagina  somiglia a questo:
dis2 11

Come inserire gli spazi fra le colonne di Bootstrap tramite  Offset.

Dopo aver creato gli spazi voti per la confortevole lettura  intorno alle nostre colonne rispetto il bordo del browser creando un altra scatola con la class= "container"  e inserendo questa scatola subito dopo l'apertura del tag body e la sua rispettiva chiusura in fondo è arrivata l'ora di  realizzare gli spazzi vuoti anche fra le nostre colonne.

 Tuttavia, nel nostro esempio attuale, non sono necessari perché la nostra paggina con le nostre 4 colonne e bella da vedere e facile da leggere. Ma se avremmo solo una coppia di colonne allargati su tutta la larghezza della pagina, allora si che per  una migliore percezione di essi sarebbe utile di creare qualche spazio vuoto tra di loro.

 Vediamo di simulare  questa situazione, semplicemente rimuovendo una coppia di nostre colonne di mezzo (nel terzo blocco indicato su disegno nella lezione precedente ), e utilizzeremo per le due colonne restanti la griglia grande e piccola, così che al momento di riduzione della grandezza dello schermo la larghezza delle nostre colonne si diminuisce mantenendo il bel aspetto  fino al riposizionamento in verticale se la larghezza dello schermo sara inferiore a 768 pixel.

<!-- 3 riga -->
<div class="row">
    <div class="col-lg-3 col-sm-4">
        <p><img src="/img/css_practice.png" width="70" height="90" alt=""></p>
        <h4>Css pratica</h4>
        <p>Durante i 35 lezioni noi insieme creeremo un templates di un sito da una immagine in formato PSD, pronto per essere visualizzato in qualsiasi bser moderno.
</p>
        <p><a  target="_blank" href="http://www.ioeweb.it/corso12/">Leggi tutto...</a></p>
    </div>    
    
    <div class="col-lg-9 col-sm-8">
        <p><img src="/img/PhpDesigener.png" width="70" height="90" alt=""></p>
        <h4>PhpDesigner</h4>
        <p>Durante questo piccolo corso impari ad usare il programma "PhpDesigner", che ti permette di velocizzare il processo della scrittura del codice per qualsiasi sito web, perche ha una interfaccia molto comoda, strumenti utilissimi, sono presenti autocorrezione e suggerimento per tutti i tag di linguaggio HTML o proprietà CSS. Proprio questo programma sto utilizzando nei miei corsi "Css pratica" e "Sito web da 0"</p>
         <p><a  target="_blank" href="http://www.ioeweb.it/PhpDesigner/">Leggi tutto...</a></p>
    </div>
</div>

dis5 1

Ovviamente, sarebbe bello aumentare un può lo spazio fra queste  queste due colonne. Questo problema può essere risolto apportando modifiche al sistema stessa di rete, ma in questo caso questi cambiamenti portano influenzare altre pagine  il che  non é desiderabile.

 Per cio  l'opzione migliore sarebbe quella di creare una colonna aggiuntiva tra le colonne, senza contento con la classe Offset, l'offset indica creazione dello spazio vuoto sulla sinistra del oggetto. In realtà, non dovremo creare una colonna vuota,  basterebbe  di aggiungere questa classe Offset alla colonna che si trova sulla destra dello spazio/ colonna vuota che vogliamo creare . Sara cosi  un col-lg-offset-1 per una  griglia grande o col-sm-offset-1 per la piccola, se volete creare  l'offset  piu grande di  2 o 3 colonne di larghezza  ( vorrei ricordare che la sistema bootstrap prevede divisone in 12 colonne ), basterebbe  scrivere - col-sm-offset 2 .

Ebbene, non dimentichiamo di diminuire la larghezza della colonna alla quale abbiamo attribuito questa nuova classe  per quantità del numeri atribuiti alla classe offset  in modo che la somma di esso farà  12 . Nel nostro esempio, ci sarà infatti riduzione della larghezza della seconda colonna a una cella della griglia, donandola alla creazione dello spazio fra le nostre colonne, così invece di col-lg-9 avremo un col-lg-8. E come risultato avremo 8 colonne per il secondo blocco piu 3 per il primo e 1 colonna(col-lg-offset-1) come lo spazio fra di loro che sommando fanno 12.

Se si utilizzano più reti contemporaneamente (nel nostro esempio sopra due lg e sm), è necessario aggiungere un offset a ciascuno di essi, oppure è possibile utilizzarlo solo con alcune misure della griglia, dipende dal risultato che si vuole ottenere. Noi aggiungeremo ad entrambi i tipi di rete classe  Offset-1, che creerà lo spazio in forma della colonna vuota, sia nella griglia grande sia in quella piccola. Di conseguenza, il codice sara cosi :

<!-- 3 riga -->
<div class="row">
    <div class="col-lg-3 col-sm-4">
        <p><img src="/img/css_practice.png" width="70" height="90" alt=""></p>
        <h4>Css pratica</h4>
        <p>Durante i 35 lezioni noi insieme creeremo un templates di un sito da una immagine in formato PSD, pronto per essere visualizzato in qualsiasi bser moderno.
</p>
        <p><a  target="_blank" href="http://www.ioeweb.it/corso12/">Leggi tutto...</a></p>
    </div>    
    
    <div class="col-lg-8 col-lg-offset-1 col-sm-7 col-sm-offset-1">
        <p><img src="/img/PhpDesigener.png" width="70" height="90" alt=""></p>
        <h4>PhpDesigner</h4>
        <p>Durante questo piccolo corso impari ad usare il programma "PhpDesigner", che ti permette di velocizzare il processo della scrittura del codice per qualsiasi sito web, perche ha una interfaccia molto comoda, strumenti utilissimi, sono presenti autocorrezione e suggerimento per tutti i tag di linguaggio HTML o proprietà CSS. Proprio questo programma sto utilizzando nei miei corsi "Css pratica" e "Sito web da 0"</p>
         <p><a  target="_blank" href="http://www.ioeweb.it/PhpDesigner/">Leggi tutto...</a></p>
    </div>
</div>

E l'aspetto finale del layout della pagina sarà piu libero e come conseguenza meglio leggibile  (anche quando si diminuisce la largezza della finestra dello schermo o del browser, che è lo stesso ).
dis5 2

In principio, nella grande rete posiamo realizzare lo spazio fra le due colonne uguale  allo spostamento di due celle, e per quella piccola uguale a una cella col-sm-offset-1 (utilizzando  classe  class="col-lg-7 col-lg-offset-2 col-sm-7 col-sm-offset-1" ) in modo che cambiamento della grandezza sia di colonne sia di spazi avviene in un modo piu fluido con la  diminuzione  della largezza dello schermo. Ma potete fare delle prove  e tutto dipende dalla vostra preferenza. Tuttavia, ancora una volta vi ricordo che  lo spazio vuoto creato con la classe offset verrà visualizzato sulla sinistra della colonna per la quale l'avete prescritto.

Ciao e alla prossima!

Letto 3147 volte