clasele Responsive
W3.CSS include un sistem receptiv, mobil prima grilă să se ocupe de aspectul:
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
3/4
1/4
1/4
1/4
1/2
1/4
1/2
1/4
50px
odihnă
1/4
odihnă
100px
45px
odihnă
Sistemul grila W3.CSS este receptiv, iar coloanele vor re-aranja în mod automat, în funcție de dimensiunea ecranului:
| Clasă | Descriere |
|---|---|
| w3-half | Ocupă 1/2 a ferestrei (on medium and large screens) |
| w3-third | Ocupă 1/3 a ferestrei (on medium and large screens) |
| w3-twothird | Ocupă 2/3 a ferestrei (on medium and large screens) |
| w3-quarter | Ocupă 1/4 a ferestrei (on medium and large screens) |
| w3-threequarter | Ocupă 3/4 a ferestrei (on medium and large screens) |
| w3-rest | Definește restul de un rând |
| w3-col | Definește o coloană într - o coloană de 12 fluid receptiv grilă (more in a later chapter) - (more in a later chapter) |
Rânduri Responsive
clasele responsive trebuie plasate în interiorul unui w3 rând pentru a fi pe deplin receptiv.
| Clasă | Descriere |
|---|---|
| w3-row | Definește un container-padding mai puțin pentru clasele receptiv. |
| w3-row-padding | Definește un recipient căptușit pentru clasele receptiv. |
W3-o jumătate de clasă
Lățimea w3 jumătate clasa este de 1/2 din elementul părinte (style="width:50%") .
Pe ecrane mici * l redimensionează la 100%.
w3 jumătate
w3 jumătate
Exemplu
<div class="w3-row">
<div class="w3-green w3-container w3-half">
<h2>w3-half</h2>
</div>
<div class="w3-container w3-half">
<h2>w3-half</h2>
</div>
</div> Încearcă - l singur » W3-clasa a III-
Lățimea w3-clasa a treia este de 1/3 din elementul părinte (style="width:33.33%") .
Pe ecrane mici * l redimensionează la 100%.
W3-a treia
W3-a treia
W3-a treia
Exemplu folosind w3-a treia
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Încearcă - l singur » Class-W3 twothird
Lățimea clasei w3-twothird este 2/3 din elementul părinte (style="width:66.66%") .
Pe ecrane mici * l redimensionează la 100%.
W3-twothird
W3-a treia
Exemplu folosind w3-a treia
<div class="w3-row">
<div class="w3-green w3-container
w3-third">
<h2>w3-twothird</h2>
</div>
<div class="w3-container w3-third">
<h2>w3-third</h2>
</div>
</div> Încearcă - l singur » W3 trimestru Clasa
Lățimea clasei w3 sfert este 1/4 din elementul părinte (style="width:25%") .
Pe ecrane mici * l redimensionează la 100%.
W3 trimestru
W3 trimestru
W3 trimestru
W3 trimestru
Exemplu folosind w3 sfert
<div class="w3-row">
<div class="w3-green w3-container
w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Încearcă - l singur » W3-threequarter Clasa
Lățimea clasei w3-threequarter 3/4 din elementul părinte (style="width:75%") .
Pe ecrane mici * l redimensionează la 100%.
W3 trimestru
W3 trimestru
Exemplu folosind w3-threequarter
<div class="w3-row">
<div class="w3-green w3-container
w3-threequarter">
<h2>w3-threequarter</h2>
</div>
<div class="w3-container w3-quarter">
<h2>w3-quarter</h2>
</div>
</div> Încearcă - l singur » Combinații
W3 trimestru
w3 jumătate
W3 trimestru
W3 trimestru
W3 trimestru
w3 jumătate
w3 jumătate
W3 trimestru
W3 trimestru
Rânduri imbricate
Exemplu: w3 jumătate Inside w3 jumătate
<div class="w3-row">
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<div class="w3-row">
<div class="w3-half w3-container w3-red">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
<div class="w3-half w3-container">
<h2>w3-half</h2>
<p>This is a
paragraph.</p>
</div>
</div>
</div>
</div> Încearcă - l singur » Coloane Utilizarea Rest
Sunt 150px
Sunt restul
Exemplu folosind w3-repaus
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest
w3-green"><p>rest</p></div>
</div> Încearcă - l singur » Coloanele Utilizarea procentuală
20%
60%
20%
Exemplu folosind procente
<div class="w3-row">
<div class="w3-col"
style="width:20%"><p>20%</p></div>
<div class="w3-col" style="width:60%"><p>60%</p></div>
<div
class="w3-col" style="width:20%"><p>20%</p></div>
</div> Încearcă - l singur » Class-W3 conținut
Clasa w3 conținut definește un recipient pentru conținut dimensiune centrat fix:
Exemplu
<body class="w3-content" style="max-width:500px">
page content...
</body> Încearcă - l singur » Diferența dintre w3-rând și W3-rând-padding
Clasa w3-rând definește un recipient căptușit mai puțin, în timp ce clasa W3-rând-padding adaugă o umplutură stânga și la dreapta 8px la fiecare coloană:
w3-rând:
w3-rând-padding:
Exemplu
<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_fjords.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_fjords.jpg"></div>
</div> Încearcă - l singur » 12 Coloana grila de fluid receptiv
W3.CSS sprijină, de asemenea, un sistem avansat de 12 coloană grilă fluid receptiv.
Redimensionarea pagina pentru a vedea efectul!
Această parte se va ocupa 12 coloane pe un ecran mic, 4 pe un ecran de mediu, și 3 pe un ecran mare.
Această parte se va ocupa 12 coloane pe un ecran mic, 8 pe un ecran de mediu, și 9 pe un ecran mare.
Vei afla mai multe despre grila de fluid într-un capitol ulterior.
* Rezoluții de ecran
Încorporat în capacitatea de reacție a W3.CSS utilizează dimensiunea DP a unui ecran.
W3.CSS va trata un iPhone 6 cu o rezoluție de 750 x 1334 pixeli ca un ecran mic de 375 x 667 pixeli.
Ecranele mici sunt mai mici de 601 pixeli DP, ecrane medii sunt mai mici de 993 de pixeli DP.
Mai jos este o listă de rezoluții tipice ale dispozitivului și raportate dimensiuni DP:
iPhone 4
Rezoluţie
640 x 960
DP
320 x 480
iPhone 5
Rezoluţie
640 x 1136
DP
320 x 528
iphone 6
Rezoluţie
750 x 1334
DP
375 x 667
iphone 6S
Rezoluţie
1080 x 1920
DP
414 x 736
Galaxy S6
Rezoluţie
1440 x 2560
DP
360 x 640
Nota 4
Rezoluţie
1440 x 2560
DP
400 x 853
Nexus 6
Rezoluţie
1440 x 2560
DP
411 x 731
iPad mini
Rezoluţie
768 x 1024
DP
768 x 1024
iPad
Rezoluţie
1536 x 2048
DP
728 x 1024
tipic pentru laptop
Rezoluţie
1366 x 768
DP
1366 x 768
Spațiul de lucru tipic
Rezoluţie
1920 x 1080
DP
1920 x 1080