W3.CSS Responsive Fluid Grid
Responsiewe rooster
W3.CSS ondersteun 'n 12 kolom-responsiewe vloeistofrooster.
Verander die grootte van die bladsy om die effek te sien!
Hierdie deel sal 12 kolomme op 'n klein skerm beslaan, 4 op 'n medium skerm en 3 op 'n groot skerm.
Hierdie deel sal 12 kolomme op 'n klein skerm beslaan, 8 op 'n medium skerm en 9 op 'n groot skerm.
Voorbeeld
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Responsiewe rye
W3.CSS se roosterstelsel reageer. Die kolomme sal outomaties herrangskik na gelang van die skermgrootte: Op 'n groot skerm lyk dit dalk beter met die inhoud wat in drie kolomme georganiseer is, maar op 'n klein skerm kan dit beter wees as die inhoud bo-op mekaar gestapel is.
| Klas | Beskrywing |
|---|---|
| w3-ry | Houer vir responsiewe klasse, sonder opvulling |
| w3-ry-opvulling | Houer vir responsiewe klasse, met 8px linker- en regtervulling |
| w3-kol | Definieer een kolom in 'n 12-kolom responsiewe rooster |
w3-col het die volgende subklasse:
Kolomme vir klein skerms (tipiese slimfone):
| Klas | Beskrywing |
|---|---|
| s1 | Definieer 1 van 12 kolomme (breedte: 08,33%) vir klein skerms |
| s2 | Definieer 2 van 12 kolomme (breedte: 16,66%) vir klein skerms |
| s3 | Definieer 3 van 12 kolomme (breedte: 25.00%) vir klein skerms |
| s4 | Definieer 4 van 12 kolomme (breedte: 33,33%) vir klein skerms |
| s5-s11 | |
| s12 | Definieer 12 van 12 kolomme (breedte: 100%). Verstek vir klein skerms |
Kolomme vir medium skerms (tipiese tablette):
| Klas | Beskrywing |
|---|---|
| m1 | Definieer 1 van 12 kolomme (breedte: 08,33%) vir medium skerms |
| m2 | Definieer 2 van 12 kolomme (breedte: 16,66%) vir medium skerms |
| m3 | Definieer 3 van 12 kolomme (breedte: 25.00%) vir medium skerms |
| m4 | Definieer 4 van 12 kolomme (breedte: 33,33%) vir medium skerms |
| m5-m11 | |
| m12 | Definieer 12 van 12 kolomme (breedte: 100%). Verstek vir medium skerms |
Kolomme vir groot skerms (tipiese skootrekenaars en tafelrekenaars):
| Klas | Beskrywing |
|---|---|
| l1 | Definieer 1 van 12 kolomme (breedte: 08,33%) vir groot skerms |
| l2 | Definieer 2 van 12 kolomme (breedte: 16,66%) vir groot skerms |
| l3 | Definieer 3 van 12 kolomme (breedte: 25.00%) vir groot skerms |
| l4 | Definieer 4 van 12 kolomme (breedte: 33,33%) vir groot skerms |
| l5-l11 | |
| l12 | Definieer 12 van 12 kolomme (breedte: 100%). Verstek vir groot skerms) |
Die klasse hierbo kan gekombineer word om meer dinamiese en buigsame uitlegte te skep.
Elke klas skaal op, so as jy dieselfde breedte vir klein, medium en groot skerms wil stel, hoef jy net die klein klas te spesifiseer. En as jy dieselfde breedte op medium en groot skerms wil hê, hoef jy net die medium klas te spesifiseer.
As jy egter net medium en/of groot klasse gebruik, sal die breedte altyd na 100% verander op klein skerms.
Let wel: Die aantal kolomme moet altyd optel tot 12 vir elke ry (6+6, 3+3+6, 9+3, ens.)!
Twee gelyke kolomme
Twee kolomme met gelyke breedte (50%/50%) op alle skermgroottes:
s6
s6
Voorbeeld
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Twee ongelyke kolomme
Twee kolomme met ongelyke breedte (25%/75%) op alle skermgroottes:
s3
s9
Voorbeeld
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Drie gelyke kolomme
Drie kolomme met gelyke breedte (33.3%/33.3%/33.3%) op alle skermgroottes:
s4
s4
s4
Voorbeeld
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Drie ongelyke kolomme
Drie kolomme met verskillende breedtes (25%/50%/25%) op tablette, skootrekenaars en rekenaars. Op selfone sal die kolomme outomaties gestapel word (100% breedte):
m3
m6
m3
Voorbeeld
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Let wel: Hierdie voorbeeld is dieselfde as die gebruik van w3-kwart (m3), w3-half (m6), w3-kwart (m3), wat jy in die W3.CSS Responsive- hoofstuk geleer het.
Ses kolomme
Ses kolomme met gelyke breedte (16% elk) op tablette, skootrekenaars en rekenaars. Op selfone sal die kolomme outomaties stapel (100% breedte):
m2
m2
m2
m2
m2
m2
Voorbeeld
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Gemengde: Selfoon en skootrekenaars
Jy kan klasse kombineer om 'n dinamiese en buigsame uitleg te skep. Hierdie voorbeeld sal 'n tweekolom-uitleg produseer met 'n 83.34%/16.66% (l10, l2) verdeling op groot skerms en 'n 50%/50% (s6, s6) verdeling op klein skerms:
l10 s6
l2 s6
Voorbeeld
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Gemengde: Selfoon, tablette en skootrekenaars
Hierdie voorbeeld sal 'n driekolom-uitleg lewer met 'n 25%/58.34%/16.66% (l3, l7, l2) verdeling op groot skerms, 50%/25%/25% (m6, m3, m3) verdeling op medium skerms en 'n verdeling van 33,3%/33,3%/33,3% (s4, s4, s4) op klein skerms:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Voorbeeld
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Verskil tussen w3-ry en w3-ry-opvulling
Die w3-ry-klas definieer 'n opgestopte houer, terwyl die w3-ry-opvulklas 'n 8px linker- en regtervulling by elke kolom voeg:
w3-ry:
w3-ry-opvulling:
Voorbeeld
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Gebruik w3-res
Die w3-rus- klas is 'n kragtige en buigsame klas wat sal gebruik wat oor is van die roosterkolom.
150 px
rus
75 px
rus
100 px
100 px
rus
kwartaal
80 px
rus
kwartaal
kwartaal
kwartaal
35%
rus
Voorbeeld met behulp van rus
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Die element wat class="w3-rest" gebruik, moet altyd die laaste element in die bronkode wees.
Gebruik persentasie
Gebruik die CSS width-eienskap om 'n spesifieke breedte van die kolomme te bepaal.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Voorbeeld
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>