Responsiewe webontwerp - roosteraansig
Wat is 'n roosteraansig?
Baie webblaaie is gebaseer op 'n roosteraansig, wat beteken dat die bladsy in kolomme verdeel is:
Die gebruik van 'n roosteraansig is baie nuttig wanneer u webblaaie ontwerp. Dit maak dit makliker om elemente op die bladsy te plaas.
'n Responsiewe roosteraansig het dikwels 12 kolomme, en het 'n totale breedte van 100%, en sal krimp en uitbrei soos jy die grootte van die blaaiervenster verander.
Voorbeeld: Responsiewe roosteraansig
Bou 'n responsiewe roosteraansig
Kom ons begin 'n responsiewe roosteraansig bou.
Maak eers seker dat alle HTML-elemente die box-sizing
eienskap op gestel het
border-box
. Dit maak seker dat die vulling en rand by die totale breedte en hoogte van die elemente ingesluit is.
Voeg die volgende kode by jou CSS:
* {
box-sizing: border-box;
}
Lees meer oor die box-sizing
eiendom in ons CSS Box Sizing- hoofstuk.
Die volgende voorbeeld toon 'n eenvoudige responsiewe webblad, met twee kolomme:
Voorbeeld
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Die voorbeeld hierbo is goed as die webblad slegs twee kolomme bevat.
Ons wil egter 'n responsiewe roosteraansig met 12 kolomme gebruik om meer beheer oor die webblad te hê.
Eerstens moet ons die persentasie vir een kolom bereken: 100% / 12 kolomme = 8,33%.
Dan maak ons een klas vir elk van die 12 kolomme, class="col-"
en 'n getal wat definieer hoeveel kolomme die afdeling moet strek:
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%;}
Al hierdie kolomme moet na links sweef en 'n opvulling van 15px hê:
CSS:
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Elke ry moet toegedraai word in 'n <div>
. Die aantal kolomme binne 'n ry moet altyd 12 optel:
HTML:
<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>
Die kolomme binne 'n ry sweef almal na links, en word dus uit die vloei van die bladsy geneem, en ander elemente sal geplaas word asof die kolomme nie bestaan nie. Om dit te voorkom, sal ons 'n styl byvoeg wat die vloei skoonmaak:
CSS:
.row::after {
content: "";
clear: both;
display: table;
}
Ons wil ook 'n paar style en kleure byvoeg om dit beter te laat lyk:
Voorbeeld
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;
}
Let daarop dat die webblad in die voorbeeld nie goed lyk as jy die grootte van die blaaiervenster na 'n baie klein breedte verander nie. In die volgende hoofstuk sal jy leer hoe om dit reg te stel.