Ce este o grilă-View?
Multe pagini web sunt bazate pe o grilă de vedere, ceea ce înseamnă că pagina este împărțită în coloane:
Folosind o vedere grilă este foarte util atunci când proiectarea de pagini web. Se face mai ușor pentru a plasa elemente pe pagină.
O grilă receptiv-view, are de multe ori 12 coloane, și are o lățime totală de 100%, și va micșora și să se extindă pe măsură ce redimensiona fereastra browser-ului.
Construirea unei Responsive Grid-View
Să înceapă construirea unui receptiv grilă vedere.
Mai întâi se asigura că toate elementele HTML au box-sizing de proprietate setată la border-box . Acest lucru asigură că padding și granița sunt incluse în lățimea și înălțimea totală a elementelor.
Adăugați următorul cod în CSS:
* {
box-sizing: border-box;
}
Cititi mai multe despre box-sizing de proprietate în nostru CSS3 Caseta Dimensionarea capitol.
Următorul exemplu arată o simplă pagină web receptiv, cu două coloane:
Exemplul de mai sus este bine dacă pagina web conține doar două coloane.
Cu toate acestea, dorim să folosim o grilă receptiv vedere cu 12 coloane, pentru a avea mai mult control asupra paginii web.
În primul rând, trebuie să se calculeze procentul pentru o singură coloană: 100% / 12 coloane = 8.33%.
Apoi , vom face o clasă pentru fiecare dintre cele 12 coloane, class="col-" și un număr care definește cât de multe coloane ar trebui sa acopere secțiunea:
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%;} Încearcă - l singur » Toate aceste coloane trebuie să fie plutitoare la stânga, și au o căptușeală de 15px:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
} Fiecare rând trebuie să fie înfășurat într - un <div> . Numărul de coloane în interiorul unui rând ar trebui să adăugați întotdeauna până la 12:
HTML:
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>Coloanele din interiorul unui rând sunt toate plutesc la stânga, și, prin urmare, sunt scoase din fluxul paginii și alte elemente vor fi amplasate ca și în cazul în care coloanele nu există. Pentru a preveni acest lucru, vom adăuga un stil care șterge fluxul:
CSS:
.row::after {
content: "";
clear: both;
display: block;
}Dorim, de asemenea, să adăugați câteva stiluri si culori pentru a face sa arate mai bine:
Exemplu
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;
} Încearcă - l singur » Observați că pagina web în exemplul nu arata bine atunci când redimensionați fereastra de browser pentru o lățime foarte mică. În capitolul următor veți învăța cum să se stabilească acest lucru.