Sistema Rete Bootstrap

Cos'è la griglia (Grid)?

Tratto da Wikipedia:

Nel design grafico, la griglia è una struttura costituita da una serie di linee intersecanti (verticali e orizzontali) utilizzate per organizzare i contenuti (solitamente bidimensionale). È ampiamente utilizzata nei disegni di layout e struttura dei contenuti nel design di stampa. Nel design web, è un metodo per creare rapidamente layout coerenti e utilizzare efficacemente HTML e CSS.

In parole semplici, la griglia nella progettazione web viene utilizzata per organizzare i contenuti, rendendo il sito facile da navigare e riducendo il carico per l'utente finale.

Cos'è il sistema di griglia (Grid System) di Bootstrap?

Descrizione della griglia di sistema nel documento ufficiale di Bootstrap:

Bootstrap include un sistema di griglia responsive, progettato per dispositivi mobili e flessibile, che si espande appropriatamente fino a 12 colonne man mano che la dimensione del dispositivo o del viewport aumenta. Include classi predefinite per opzioni di layout semplici e classi di mistura potenti per generare layout semantici più complessi.

Facciamo un esempio per capire la seguente frase. Bootstrap 3 è progettato per dispositivi mobili, in questo senso, il codice di Bootstrap inizia dai dispositivi a schermo piccolo (ad esempio, dispositivi mobili, tablet) e si espande ai componenti e alla griglia sui dispositivi a schermo grande (ad esempio, laptop, computer).

Strategia di priorità per dispositivi mobili

• Contenuto

• Decide cosa è più importante.

• Layout

• Progettare inizialmente per larghezze più piccole.

• Il CSS di base è progettato per dispositivi mobili, mentre le query media sono rivolte a tablet e computer.

• Progressive Enhancement

• Aggiungi elementi man mano che aumenta la dimensione dello schermo.

Il sistema di griglia responsive si suddivide automaticamente in fino a 12 colonne man mano che la dimensione dello schermo o del viewport aumenta.

Il funzionamento del sistema di griglia (Grid System) di Bootstrap

Il sistema di griglia di Bootstrap crea la layout della pagina attraverso una serie di righe e colonne contenenti contenuti. Di seguito è riportato come funziona il sistema di griglia di Bootstrap:

• Le righe devono essere posizionate all'interno di .container all'interno della classe, per ottenere l'allineamento (alignment) e il padding appropriati.

• Utilizza le righe per creare gruppi orizzontali di colonne.

• Il contenuto dovrebbe essere posizionato all'interno delle colonne e solo le colonne possono essere elementi diretti di una riga.

• Classi di griglia predefinite, come .row e .col-xs-4e può essere utilizzato per creare rapidamente layout di griglia. Le classi di mistura LESS possono essere utilizzate per più layout semantici.

• Le colonne vengono create tramite padding per creare spazi tra i contenuti delle colonne. Il padding è definito da .rows con margini negativi, che rappresenta lo spostamento orizzontale della prima e dell'ultima colonna.

• Il sistema di griglia viene creato specificando i dodici colonne disponibili che si desidera coprire. Ad esempio, per creare tre colonne uguali, si utilizzano tre .col-xs-4.

Query media

Le query media sono un concetto molto elegante di "regole CSS condizionali". Si applicano solo a determinati CSS basati su alcune condizioni specifiche. Se queste condizioni sono soddisfatte, viene applicata la corrispondente stile.

Le query media di Bootstrap ti permettono di muovere, visualizzare e nascondere contenuti basati su dimensioni del viewport. Le seguenti query media sono utilizzate nei file LESS, per creare i punti di divisione critici del sistema di griglia di Bootstrap.

/*　超小设备（手机，小于　768px）　*/
/*　Bootstrap　中默认情况下没有媒体查询　*/
/*　小型设备（平板电脑，768px　起）　*/
@media　(min-width:　@screen-sm-min)　{　...　}
/*　Dispositivi di medie dimensioni（computer da tavolo，da 992px in su）　*/
@media　(min-width:　@screen-md-min)　{　...　}
/*　Dispositivi di grandi dimensioni（grande computer da tavolo，da 1200px in su）　*/
@media　(min-width:　@screen-lg-min)　{　...　}

A volte includiamo anche nel codice delle query media max-widthcosì da limitare l'influenza del CSS a dimensioni di schermo più piccole.

@media　(max-width:　@screen-xs-max)　{　...　}
@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}
@media　(min-width:　@screen-md-min)　and　(max-width:　@screen-md-max)　{　...　}
@media　(min-width:　@screen-lg-min)　{　...　}

Le query media hanno due parti, prima una specifica del dispositivo, poi una regola di dimensione. Nel caso precedente, sono state impostate le seguenti regole:

Ecco questa riga di codice:

@media　(min-width:　@screen-sm-min)　and　(max-width:　@screen-sm-max)　{　...　}

per tutti quelli con min-width: @screen-sm-min dei dispositivi, se la larghezza dello schermo è inferiore a @screen-sm-maxverrà eseguita alcune elaborazioni.

Opzioni di griglia

La tabella seguente riassume come il sistema di griglia di Bootstrap lavora su più dispositivi:

Struttura di base della griglia

Ecco la struttura di base della griglia di Bootstrap:

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>...</div>
</div>
<div>....

Vediamo alcuni semplici esempi di griglie:

• Esempio: orizzontale accoppiato

• Esempio: dispositivi di media e grandi dimensioni

• Esempio: telefono, tablet, computer da tavolo

Risposta alle colonne

Nell'esempio seguente ci sono 4 griglie, ma non possiamo determinare la posizione della visualizzazione della griglia sui dispositivi di piccolo formato.

Per risolvere questo problema, è possibile utilizzare .clearfix class e Utilità responsiveper risolvere, come mostrato nell'esempio seguente:

Esempio online

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Esempio Bootstrap - Risposta alle colonne</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<div class="row">
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;"}
　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Prendiamo un momento per augurare i nostri amanti.</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Pregherò per te, che tu sia sempre felice. Il mio lavoro è casuale. Ho solo un piccolo coraggio, devo andare a fare l'internship in laboratorio è una conseguenza.
　　　　　　　　　</p>
　　　　　　　　　<p>Prendiamo un momento per augurare i nostri amici, augurargli.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="clearfix visible-xs"></div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;"}
　　　　　　　　　box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Con un po' di tempo, si può completare l'internship.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div class="col-xs-6 col-sm-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Con fatica e sofferenza, vivace, quindi, con alcuni modelli di lunga vita straordinaria. Quest'anno.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

modificare la dimensione della finestra del browser per vedere le variazioni, o vedere l'effetto sul tuo telefono.

colonne spostate

Lo spostamento è una funzione utile per una disposizione più professionale. Può essere utilizzato per dare più spazio alle colonne. Ad esempio,.col-xs-* class non supportano lo spostamento, ma possono essere realizzate semplicemente utilizzando una cella vuota.

Per utilizzare lo spostamento su schermi grandi, utilizzare .col-md-offset-* class. Queste classi aumentano il margine esterno sinistro di una colonna * colonne, dove * L'intervallo è da 1 a 11.

Nell'esempio seguente, abbiamo <div>..</div>, useremo .col-md-offset-3 class per centrare questo div.

Esempio online

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Esempio Bootstrap - Colonne spostate</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-6 col-md-offset-3"　
　　　　　　　　　style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

I risultati sono come segue:

colonna annidata

Per incorporare una griglia predefinita nel contenuto, aggiungere una nuova .rowe in un esistente .col-md-* aggiungi un gruppo .col-md-* Le colonne. Le righe annidate devono contenere un gruppo di colonne, il numero di colonne non deve superare 12 (in realtà, non c'è l'obbligo di riempire 12 colonne).

Nell'esempio seguente, la布局 ha due colonne, la seconda colonna è divisa in due righe e quattro scatole.

Esempio online

<!DOCTYPE html>
<html>
<head>
　　　<meta charset="utf-8">　
　　　<title>Bootstrap esempio - colonne annidate</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<div class="col-md-3" style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<h4>Prima colonna</h4>
　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
　　　　　　</div>
　　　　　　<div class="col-md-9" style="background-color: #dedef8;box-shadow:　
　　　　　　　　　inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　<h4>Seconda colonna - divisa in quattro scatole</h4>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;">
　　　　　　　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　　　　　　　<p>Consectetur art party Tonx culpa semiotics. Pinterest　
　　　　　　　　　　　　　　　　　　assumenda minim organic quis
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;">
　　　　　　　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　　　　　　　<p>sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim veniam, quis nostrud exercitation　
　　　　　　　　　　　　　　　　　　ullamco laboris nisi ut aliquip ex ea commodo consequat
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;">
　　　　　　　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　　　　　　　<p>quis nostrud exercitation ullamco laboris nisi ut　
　　　　　　　　　　　　　　　　　　aliquip ex ea commodo consequat
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>　　　
　　　　　　　　　　　　<div class="col-md-6" style="background-color: #B18904;">
　　　　　　　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　　　　　　　Lorem ipsum dolor sit amet, consectetur adipisicing elit　
　　　　　　　　　　　　　　　　　　sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim.</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

I risultati sono come segue:

Ordinamento colonne

Un'altra perfetta caratteristica del sistema di griglia di Bootstrap è che puoi facilmente scrivere le colonne in un ordine e mostrarle in un altro ordine.

Puoi facilmente cambiare le colonne con .col-md-push-* e .col-md-pull-* L'ordine predefinito delle colonne della griglia integrata della classe, dove * L'intervallo è da 1 a 11.

Nell'esempio seguente, abbiamo due layout di colonne, la colonna sinistra è molto stretta e serve come sidebar. Useremo .col-md-push-* e .col-md-pull-* Un'istanza di classe può scambiare l'ordine di queste due colonne.

Esempio online

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Esempio Bootstrap - Ordinamento colonne</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Hello, world!</h1>
　　　<div class="row">
　　　　　　<p>Prima dell'ordinamento</p>
　　　　　　<div class="col-md-4" style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　Sono a sinistra
　　　　　　</div>
　　　　　　<div class="col-md-8" style="background-color: #dedef8;
　　　　　　　　　box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
　　　　　　　　　Sulla destra
　　　　　　</div>
　　　</div><br>
　　　<div class="row">
　　　　　　<p>Ordinato</p>
　　　　　　<div class="col-md-4 col-md-push-8">　
　　　　　　　　　style="background-color: #dedef8;"}
　　　　　　　　　box-shadow: inset 1px -1px 1px #444,　
　　　　　　　　　inset -1px 1px 1px #444;">
　　　　　　　　　Sono a sinistra
　　　　　　</div>
　　　　　　<div class="col-md-8 col-md-pull-4">　
　　　　　　　　　style="background-color: #dedef8;"}
　　　　　　　　　box-shadow: inset 1px -1px 1px #444,　
　　　　　　　　　inset -1px 1px 1px #444;">
　　　　　　　　　Sulla destra
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

I risultati sono come segue: