Mr. Webmaster Menu
  • Home
  • Cerca
  • Didattica
    • A
    • Android
    • Apache
    • Apple
    • ASP
    • ASP.Net
    • C
    • Cloud
    • CMS
    • CSS
    • D
    • Database
    • E
    • Editor
    • G
    • Grafica
    • H
    • Hosting
    • HTML
    • J
    • Java
    • Javascript
    • jQuery
    • L
    • Leggi e Fisco
    • Linux
    • M
    • Mobile
    • MySQL
    • N
    • NET Framework
    • P
    • Photoshop
    • PHP
    • Primi Passi
    • Programmazione
    • R
    • Reti
    • Ruby
    • S
    • Sicurezza
    • Social Media
    • SQL
    • W
    • Web Design
    • Web Marketing
    • Web Server
    • Windows
    • WordPress
    • X
    • XML
    • Di tendenza
    • Android Studio
    • Bootstrap
    • GDPR
    • Hosting Wordpress
    • Node.js
    • Registrazione Domini
  • Download
    • Software
    • Script
    • Plugin CMS
    • Flash Movies
    • Sound Loops
    • Templates
    • Web Grafica
    • Font Gratis
  • Risorse
    • SEO Tools
    • WebApps
  • News
  • Blog
  • Forum
  • Network
    • Toolset.it
    • SiteMarket.it
    • Codalo.it
  • Corsi on-line
Mr. Webmaster → Web Design → Guida Bootstrap → La griglia: gestire l'offset

La griglia di Bootstrap: gestire l'offset

  • CommentaScrivi un commento
  • ForumDiscuti sul forum
  • PrecedenteImmagini responsive con Bootstrap
  • SuccessivoLa griglia: annidiare e riordinare le colonne
  • Pubblicato il
  • 12/11/2013
  • Autore
  • Alessandra Salvaggio

Dopo la digressione della scorsa lezione sulle immagini responsive, torniamo a parlare della griglia di Bootstrap per la creazione dei layout, parlando di offset, ovvero la possibilità di spostare le colonne verso destra.

Nella lezione 4 abbiamo detto che non è obbligatorio usare tutte le colonne della griglia per il layout e che se la somma delle colonne utilizzate è inferiore a 12, le colonne rimanenti restano vuote. Naturalmente, per impostazione predefinita rimangono “vuote” le colonne a destra.

Continua dopo la pubblicità...

Bootstrap, ovviamente, permette di “spostare” le colonne occupate del layout verso destra in modo che siano lasciate vuote le colonne della griglia a sinistra. Per far questo bisogna appunto “spostare verso destra” le colonne che utilizziamo.

Tutto questo può essere fatto grazie alla classe .col-md-offset-N dove N è un numero fra 1 e 11 che indica il numero di colonne di cui ci si vuole spostare verso destra. La somma delle colonne, compreso l'offset, non deve essere mai superiore a 12.

Ad esempio, se vogliamo centrare un layout composto da un unico elemento che sei estende su 6 colonne strutturali, dovremo impostare 3 di offset (avremo così 3 colonne di offset a destra e 3 inutilizzate che controbilanciano a sinistra). Vediamo il codice:

<div class="container">
  <div class="row">
    <div class="col-md-6 col-md-offset-3"
      ><h1>Colonna 1</h1>
      "Lorem ipsum dolor sit amet, ..."
    </div>
  </div>
</div>
contenuto centrato con offset

Uno degli utilizzi tipici di offest è, appunto, quello di effettuare il centramento di elementi che non si espendono sulle 12 colonne previste dalla griglia.

Offset diversi su righe diverse possono produrre risultati interessanti

<div class="container">
  <div class="row">
    <div class="col-md-2">colonna da 2</div>
    <div class="col-md-3 col-md-offset-4">colonna da 3 offset 4</div>
  </div>
  <div class="row">
    <div class="col-md-5 col-md-offset-2">colonna da 5 offset 2</div>
    <div class="col-md-2 col-md-offset-1">colonna da 1 offset 1</div>
  </div>
  <div class="row">
    <div class="col-md-2 col-md-offset-1">colonna da 2 offset 2</div>
    <div class="col-md-7 col-md-offset-2">colonna da 1 offset 1</div>
  </div>
</div>

Per evidenziare meglio le aree occupate, abbiamo creato una regola di stile locale per le classi che definiscono le colonne in modo da assegnare loro un bordo e uno sfondo.

<style>
[class^="col-"] {
  background-color: rgba(86, 61, 124, 0.15);
  border: 1px solid rgba(86, 61, 124, 0.2);
  padding-bottom: 20px;
  padding-top: 120px;
}
</style>

Questo il risultato visivo ottenuto mediante il nostro codice:

contenuto disposto con offset

Come avrete capito, giocando con l'offset è possibile creare effetti diversi ed ottenere layout asimmetrici ed "originali" spezzando la monotonia visiva della griglia. Sta all'abilità ed alla fantasia dello sviluppatore trovare la soluzione migliore e gli ambiti di utilizzo più disparati di questa interessante caratteristica del framework.

Sfoglia le lezioni

← Immagini responsive con Bootstrap
→ La griglia: annidiare e riordinare le colonne

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Frequenta i nostri corsi
  • Corso CSSCorso CSS
    Stilizzare siti Web coi CSS e CSS3. A partire da 39 €
  • Corso Web DesignCorso Web Design
    Webdesign e Responsive Design dei siti Web. A partire da 49 €
  • Corso Webmaster AvanzatoCorso Webmaster Avanzato
    Diventa un Webmaster professionista. A partire da 49 €
Vedi anche...
  • Accordion e Collapsible con Bootstrap
  • Definire dei List Group con Bootstrap
  • Tabs e Pills con Bootstrap
  • Creare un Carousel con Bootstrap
  • Il plugin ScrollSpy di Bootstrap
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie
Altro: sondaggi / feed