Bootstrap 3: il sistema di griglia e le query multimediali

Conosciamo tutti Bootstrap, perchè è il framework web open source più popolare. Mark Otto e Jacob Thorton hanno creato uno dei più potenti framework CSS mai progettati.

Quando è stato publicato Bootstrap 3, il cambiamento più interessante è stata la differenza nei sistemi di griglia. Bootstrap 2 si adattava a due diverse dimensioni del browser (desktop e dispositivo mobile). Con Bootstrap 3, è possibile creare prima i dispositivi mobili e il sistema di griglie consente di creare le griglie diverse in base alle dimensioni del browser. Una tendenza simile si osserva nella versione più recente del framework: Alpha Release di Bootstrap 4.

Esempio di colonne Bootstrap 3

Questo è un pò difficile da comprendere all'inizio, quindi ecco un esempio. Supponiamo che tu voglia un sito che abbia:

• 1 colonna su dispositivi extra-piccoli
• 2 colonne su dispositivi piccoli e medi
• 4 colonne su dispositivi di grandi dimensioni

Dal momento che il sistema a griglia è ora in cascata dai dispositivi mobili, questo è il modo in cui questo codice apparirà.

Non è necessario definire nulla per i dispositivi di piccole dimensioni, perchè l’impostazione predefinita è una colonna. Dobbiamo impostare una dimensione della griglia per i dispositivi di piccole dimensioni, ma non per i dispositivi di medie dimensioni. Questo perché la griglia si innalza. Quindi, se si imposta una dimensione della griglia per sm, md e lg. Noi spiegheremo le diverse dimensioni della griglia e come crearle e mostrarai degli esempi.

 Le dimensioni della griglia

Questa è la parte migliore del nuovo sistema di griglia. Puoi effettivamente visualizzare la tua griglia su 4 diverse dimensioni del browser. Ecco la ripartizione delle diverse dimensioni.

.col-xs-$   Extra small     Telefoni inferiori a 768 px          
.col-sm-$  Small Devices   Tablet di 768 px e più grande
.col-md-$  Medium Devices  Desktop  di 992 px e più grande
.col-lg-$  Large Devices   Grande Schermo di 1200 px e più grande

I documenti Bootstrap ufficiali danno una comprensione molto più completa di come funziona la griglia. Dai un'occhiata a questa pagina per avere una panoramica migliore delle dimensioni delle colonne, delle dimensioni dei ganci, delle dimensioni massime delle colonne e della larghezza massima del sito globale in base alle dimensioni del browser.

Dimensioni predefinite per la griglia Bootstrap

A volte dovrai utilizzare le query multimediali per far sì che il tuo sito funzioni nel modo desiderato. Conoscere le dimensioni della griglia di default è essenziale per estendere la griglia Bootstrap. Abbiamo scritto un piccolo suggerimento per mostrarti le dimensioni predefinite, quindi dai un'occhiata se hai bisogno delle query multimediali e dei punti di interruzione Bootstrap.

Bootstrap 3 Media Query Breakpoints

Bootstrap 3 è un framework front-end e mobile-first. Ho incluso l'ordine corretto per le Media Queries qui sotto, ma ho anche incluso sotto i primi punti di interruzione non mobili nel caso in cui alcune persone non siano abituate alla metodologia mobile-first dal momento che tecnicamente entrambi funzioneranno. Min-Width: si riferisce a qualsiasi valore superiore o uguale alla quantità indicata. Max-Width: si riferisce a tutto ciò che è inferiore o uguale alla quantità indicata.

/*==================================================
=            Bootstrap 3  Media Queries             =
==================================================*/
 
 
 
 
	/*==========  Primo metodo mobile ==========*/
 
	/*Custom,  iPhone Retina */
	@media only screen and (min-width : 320px){
 
	}
 
	/* Extra Small Devices, Telefoni */
	@media only screen and (min-width : 480px){
 
	}
 
	/* Small Devices, Tablet */
	@media only screen and (min-width : 768px){
 
	}
 
	/* Medium  Devices, Desktop */
	@media only screen and (min-width : 992px){
 
	}
 
	/* Large Devices, Grande Schermo */
	@media only screen and (min-width : 1200px){
 
	}
 
 
 
	/*==========  Metodo non mobile  ==========*/
 
	/* Large Devices, Grande Schermo */
	@media only screen and (max-width : 1200px){
 
	}
 
	/* Medium Devices, Desktop*/
	@media only screen and (max-width : 992px){
 
	}
 
	/* Small Devices, Tablet */
	@media only screen and (max-width : 768px){
 
	}
 
	/* Extra Small, Telefoni */
	@media only screen and (max-width : 480px){
 
	}
 
	/* Custom, iPhone Retina */
	@media only screen and (max-width : 320px){
 
	}

Bootstrap 2.3.2 Punti interrogativi medi

/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (max-width : 1200px){
 
}
 
@media only screen and (max-width : 979px){
 
}
 
@media only screen and (max-width : 767px){
 
}
 
@media only screen and (max-width : 480px){
 
}
 
@media only screen and (max-width : 320px){
 
}

Utilità Responsive

Proprio come Bootstrap 2, Bootstrap 3 fornisce utilità responsive per nascondere e visualizzare gli elementi in base alle dimensioni del browser. Questo ci aiuterà anche a definire il nostro sistema di rete.

.visible-xs
.visible-sm
.visible-md
.visible-lg
.hidden-xs
.hidden-sm
.hidden-md
.hidden-lg

Questo aiuta perché siamo in grado di mostrare alcuni  elementi in base alle dimensioni. Nei nostri esempi di oggi, mostreremo una barra laterale aggiuntiva su desktop sui grandi dimensioni.

Esempi

Ecco alcuni esempi delle griglie che puoi creare. Analizzeremo alcuni siti di base che alcune persone potrebbero desiderare e dimostreremo quanto sia facile costruire quel sito con la griglia di Bootstrap 3.

Semplice: grande desktop vs schermo mobile

Supponiamo che tu desideri che un sito abbia una colonna su dispositivi extra-piccoli (telefono) e piccoli (tablet), 2 colonne su dispositivi medi (desktop medio) e 4 colonne su dispositivi di grandi dimensioni (desktop).

Ecco il codice per quell'esempio:

            <div class="row">
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices!</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                    <div class="visible-sm text-primary">Small Devices</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
                <div class="col-md-6 col-lg-3">
                    <div class="visible-lg text-success">Large Devices!</div>
                    <div class="visible-md text-warning">Medium Devices!</div>
                     <div class="visible-sm text-primary">Small Devices</div>
                    <div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
                </div>
            </div>

Intermedio: mostra colonna aggiuntiva su desktop di grandi dimensioni

Questo è un esempio interessante e eccelente che la nuova griglia eccelle. Supponiamo che tu abbia un sito con una barra laterale e una sezione di contenuto principale. Per dispositivi di piccole dimensioni, si desidera una colonna, il contenuto principale con la barra laterale impilata sotto di essa. Per dispositivi di piccole e medie dimensioni, vogliamo che la barra laterale e il contenuto principale siano affiancati. Ora per dispositivi di grandi dimensioni, vogliamo utilizzare lo spazio su dispositivi più grandi. Vogliamo aggiungere una barra laterale aggiuntiva per visualizzare più contenuti. Modifichiamo le dimensioni del contenuto principale per coprire 6 colonne su dispositivi di grandi dimensioni per fare  lo spazio alla nostra seconda barra laterale. Questo è un ottimo modo per utilizzare lo spazio su desktop più grandi.

Ed ecco il codice per questo esempio.

 <div class="row">
  <div class="col-sm-9 col-lg-6 text-danger">
   Główna treść.
     </div>
      <div class="col-sm-3 text-warning">
        Główny pasek boczny.
          </div>
           <div class="col-lg-3 visible-lg text-success">
     Una barra laterale aggiuntiva che appare solo su dispositivi Large.
            </div>
            </div>

Avanzato: griglia diversa per ogni dimensione

Questo sarà un esempio più complesso. Diciamo che in nessun punto del nostro sistema di rete vogliamo impilare tutte le nostre colonne. Per dispositivi molto piccoli, vogliamo 2 colonne. Per dispositivi di piccole dimensioni, vogliamo 3 colonne. Per dispositivi di medie dimensioni, vogliamo 4 colonne. Per dispositivi di grandi dimensioni, vogliamo 6 colonne (una che viene visualizzata solo su dispositivi di grandi dimensioni).

Il codice sarà simile a questo:

            <div class="row">
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    Treść!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    Treść!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    Treść!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    Treść!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
                    Treść!
                </div>
                <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
               Contenuto, visibile solo su dispositivi di grandi dimensioni!
                </div>
            </div>

Puoi vedere che quando le dimensioni del browser si riducono, le colonne iniziano a formarsi. Inoltre, il contenuto all'interno di ciascuna inizierà a impilare.

È Gridtactic!

Puoi vedere quanto è facile  creare siti complessi e dinamici con la griglia Bootstrap 3. Dai siti mobili a 2 colonne a complessi nascondigli e visualizzando gli elementi su desktop di grandi dimensioni, è possibile creare qualsiasi tipo di sito. Speriamo che questi esempi ti diano un'idea della flessibilità del nuovo sistema di griglia e di tutte le grandi cose che puoi creare.

Happy Coding J.

Se  disponi già di un sito web basato su HTML con un pannello di amministrazione esistente, è possibile rivedere i nostri temi di amministrazione Bootstrap creati con la funzionalità Bootstrap. Questi temi di bootstrap ti mostreranno tutta la potenza di Bootstrap 3!