Consigli utili sul responsive di Bootstrap

Con la release 3, Bootstrap è andato verso il Mobile first, potenziando la già presente struttura responsive. Che soluzioni Bootstrap include nel suo CSS per aiutarci in questo? Esaminiamo un paio di cose per ottenere qualche informazione in più che potrebbe aiutarci nei nostri progetti.
Consigli utili sul responsive di Bootstrap

Specifiche sulla traduzione

Di seguito la traduzione dell’articolo “Responsive Web Design Tips from Bootstrap’s CSS” di Syed Fazle Rahman. Con la release 3, Bootstrap è andato verso il Mobile first, potenziando la già presente struttura responsive. Che soluzioni Bootstrap include nel suo CSS per aiutarci in questo? Esaminiamo un paio di cose per ottenere qualche informazione in più che potrebbe aiutarci nei nostri progetti.

Defining Proper Media Queries

Bootstrap ha dei breakpoint ben definiti per differenti tipi di device tramite media queries in css. Di seguito sono elencate le categorie di breakpoint usati in base al tipo di device:

  • Gli “Extra Small Device” (cellulari) sono quelli che corrispondono al concetto di “mobile first” in Bootstrap. Sono tutti i device con risoluzione minore di 768px.
  • Gli “Small Device” (tablet) hanno come media di riferimento
    @media(min-width: 768px) and (max-width:991px){ … }.
  • I “Medium Sized Devices” (Desktop) hanno uno screen size inferiore a 1200px e maggiore di 991px, il loro media di riferimento sarà
    @media (min-width: 992px) and (max-width: 1199px) { … }.
  • I “Larger Devices” (monitor wide-screen) hanno una risoluzione maggiore di 1200px e hanno come media di riferimento
    @media (min-width: 1200px) { … }.

Nota: I dispositivi mobile che usiamo oggi sono dotati di 2 diversi orientamenti dello schermo: Portrait e Landscape. Quanto detto sopra è vero solo per la modalità landscape. Per esempio, se tu stai usando un Samsung Galaxy Note III, la view landscape non è verificata nella categoria “Small Devices” così come la view portrait fallirebbe come “Extra Small Devices”.

Extra small devices
Phones (<768px)
Small devices
Tablets (≥768px)
Medium devices
Desktops (≥992px)
Large devices
Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Facciamo chiarezza sul sistema a griglia

Se si ha familiarità con il sistema a griglia di Bootstrap, riconoscerai che questa è la struttura HTML necessaria per impostarla correttamente. Analizziamo il codice necessario per creare un layout a 2 colonne:

<div class="container">
  <div class="row">
 
    <div class="col-xs-6">
      <p>Column 1</p>
    </div>
 
    <div class="col-xs-6">
      <p>Column 2</p>
    </div>
 
  </div>
</div>

Come mostrato sopra, Il sistema a griglia necessita di un elemento contenitore. I container impostano la larghezza massima che di volta in volta il layout assumerà. Possono essere di 2 tipologie:

  • .container ha differenti larghezze per differenti tipi di device.
  • .container-fluid si espande per adattarsi alla width del device.

Con l’aiuto delle media queries, bootstrap fornirà differenti valori di width al container in relazione alla dimensione del dispositivo.

  • Extra small device (<768px): width: auto (o no width)
  • Small Device (≥768px): width: 750px
  • Medium Device (≥992px): width: 970px
  • Larger Device (≥1200px): width: 1170px

Queste che seguono invece sono altre dichiarazioni che vengono applicate alla classe .container

.container {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

1410249551article_img1

Come si può evincere dall’immagine poco più sopra, l’elemento container , con i suoi 15px di padding laterale, evita che i contenuti al suo interno tocchino gli estremi del browser. La stessa classe inoltre garantisce che l’elemento contenitore sia centrato nella pagina.

Le row sono un altro elemento fondamentale nel sistema a griglia di Bootstrap. Prima di inserire le colonne bisogna definire una row applicando la classe .row. Ecco un estratto di codice inerente alla classe:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

Ogni elemento row possiede dei margini laterali negativi pari a 15px per consentire ad ognuno di questi elementi di allinearsi perfettamente con l’elemento container. La row funge da wrapper per le colonne. Ogni riga può contenere fino a un massimo di 12 colonne.

1410249548article_img2

Avrete notato che i margini della row sembrano contrastare i 15px di padding applicati al contenitore. Se analizzi le colonne, possiamo capire il perché questo sia necessario.

Ecco un altro estratto di codice stavolta inerente ad una .col-xs-6

.col-xs-6 {
  padding-right: 15px;
  padding-left: 15px;
}

Come potrai notare sono stati applicati 15px di padding left e right ed ecco graficamente cosa accade.

1410249549article_img3

A causa dei margini negativi sulla row, le colonne toccano i bordi della row ed i bordi del container. Ma il padding porta i contenuti a rimanere a 15px lontani dai bordi del contenitore.

Se state pensando di progettare un framework, considerate l’utilizzo di questa tecnica.

Definire correttamente la larghezza delle colonne

Bootstrap utilizza le percentuali come unità di misura per definire la larghezza delle colonne e per agevolare il responsive. Come detto sopra, esistono 4 diverse categorie di brackpoint basati sul dispositivo. Ogni categoria ha le proprie classi impostate per le column in base alle diverse dimensioni.

  1. Gli Extra small device utilizzano .col-xs-*
  2. Piccoli dispositivi utilizzano .col-sm-*
  3. Dispositivi di media utilizzano .col-md-*
  4. Dispositivi di grandi dimensioni utilizzano .col-lg-*

Gli asterischi vanno sostituiti con un numero. Per esempio .col-xs-6 crea una colonna che occuperà lo spazio di 6 colonne definite con .col-xs-1. Allo stesso modo .col-sm-4 sarà pari a 4 colonne definite con la classe .col-sm-1

Per impostazione predefinita, tutte le colonne non hanno alcuna larghezza settata. Di default hanno width: auto. Tuttavia, nell’ambito delle media queries, Bootstrap fornisce valori di width per ogni classe poc’anzi definita.

Ecco un frammento di CSS di bootstrap relativo alle classi delle column. Gli asterischi sono stati inseriti per brevità ma possono essere sostituiti con i seguenti prefissi (xs, sm, md, etc).

.col-*-12 {
  width: 100%;
}
 
.col-*-11 {
  width: 91.66666667%;
}
 
.col-*-10 {
  width: 83.33333333%;
}
 
.col-*-9 {
  width: 75%;
}
 
.col-*-8 {
  width: 66.66666667%;
}
 
.col-*-7 {
  width: 58.33333333%;
}
 
.col-*-6 {
  width: 50%;
}
 
.col-*-5 {
  width: 41.66666667%;
}
 
.col-*-4 {
  width: 33.33333333%;
}
 
.col-*-3 {
  width: 25%;
}
 
.col-*-2 {
  width: 16.66666667%;
}
 
.col-*-1 {
  width: 8.33333333%;
}

La classe .col-lg-6 avrà una width pari al 50% per i large device, ma quando verrà visualizzata nei medium device, small, and extra-small device, la width usata sarà pari al valore auto. Questo meccanismo assicura che per piccole dimensioni non si abbiano colonne affiancate.

Tabelle responsive

Le tabelle, utilizzate per la visualizzazione di dati tabellari, sono anche responsive in Bootstrap. Per utilizzare le tabelle responvice di Bootstrap, usiamo la classe .table, che si compone del seguente CSS:

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
}

Le tabelle vengono forzate da Bootstrap per adattarsi alla larghezza dell’elemento genitore applicando una larghezza di 100%. Ma questo ha un problema. Una tabella a più colonne risulterà “squeezed” su dispositivi più piccoli e non risulterà leggibile.

Bootstrap ha un’altra classe per porre rimedio a questo comportamento: .table-responsive. Ecco il CSS:

.table-responsive {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid #ddd;
}

Questo consentirà alle tabelle di essere scrollabili in orizzontale per i dispositivi piu piccoli.

Immagini responsive

lavorare con immagini molto grandi può causare problemi per i dispositivi piu piccoli. Bootstrap usa questa classe .img-responsive per rendere responsive qualsiasi immagine:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

La cominazione di max-width: 100% e height: auto consentirà alle immagini di scalare correttamente e proporzionalmente, pur rimanendo entro i vincoli dell’elemento genitore sui dispositivi più grandi.

Conclusioni

Questi suggerimenti sono solo alcune delle cose che ho trovato in Bootstrap 3. Se hai notato altro di interessante nel codice sorgente, sentiti libero di condividerlo nei commenti.

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github