Che cosa è una griglia-View?
Molte pagine web sono basati su una griglia-view, il che significa che la pagina è divisa in colonne:
Utilizzando una griglia-vista è molto utile quando si progetta pagine web. Rende più facile per posizionare gli elementi sulla pagina.
Un reattivo grid-view spesso ha 12 colonne, e ha una larghezza totale di 100%, e si ridurrà ed espandere come si ridimensiona la finestra del browser.
Costruire un Responsive Grid-View
Consente di iniziare la costruzione di un reattivo grid-view.
In primo luogo garantire che tutti gli elementi HTML hanno il box-sizing insieme di proprietà di border-box . Questo assicura che l'imbottitura e confine sono inclusi nella larghezza totale e l'altezza degli elementi.
Aggiungere il seguente codice nel tuo CSS:
* {
box-sizing: border-box;
}
Per saperne di più sul box-sizing immobile nella nostra CSS3 Box Dimensionamento capitolo.
L'esempio seguente mostra una semplice pagina web reattivo, con due colonne:
L'esempio di cui sopra è bene se la pagina web contiene solo due colonne.
Tuttavia, vogliamo usare un reattivo griglia di vista con 12 colonne, per avere un maggiore controllo sulla pagina web.
Prima di tutto dobbiamo calcolare la percentuale per una colonna: 100% / 12 colonne = 8,33%.
Poi facciamo una classe per ognuno dei 12 colonne, class="col-" ed un numero che definisce il numero di colonne della sezione dovrebbe estendersi:
CSS:
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;} Prova tu stesso " Tutte queste colonne devono essere variabile a sinistra, e avere una spaziatura di 15 pixel:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Ogni riga deve essere avvolto in un <div> . Il numero di colonne all'interno di una riga deve sempre aggiungere fino a 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Le colonne all'interno di una fila sono tutti flottanti a sinistra, e sono quindi estratti dal flusso della pagina, e altri elementi saranno posizionati come se non esiste colonne. Per evitare questo, aggiungeremo uno stile che cancella il flusso:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Vogliamo anche aggiungere alcuni stili e colori per renderla migliore:
Esempio
html {
font-family: "Lucida Sans", sans-serif;
}
.header {
background-color: #9933cc;
color: #ffffff;
padding: 15px;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 7px;
background-color :#33b5e5;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
background-color: #0099cc;
} Prova tu stesso " Si noti che la pagina web nell'esempio non guardare bene quando si ridimensiona la finestra del browser per una larghezza molto ridotta. Nel prossimo capitolo imparerete come risolvere questo.