Grila receptivă
W3.CSS susține o coloană de 12 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.
Exemplu
<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> Încearcă - l singur » Rânduri Responsive
Sistemul grila W3.CSS este receptiv, iar coloanele vor re-aranja în mod automat, în funcție de dimensiunea ecranului: Pe un ecran mare s-ar putea arata mai bine cu conținutul organizat în trei coloane, dar pe un ecran mic ar fi mai bine în cazul în care conținutul elemente au fost așezate unul peste altul.
Coloanele trebuie să aibă reședința în interiorul unui rând pentru a fi pe deplin receptiv.
| Clasă | Descriere |
|---|---|
| w3-row | Definește un container-padding mai puțin pentru coloanele sensibile. |
| w3-row-padding | Definește un recipient căptușit pentru coloanele sensibile. |
| w3-col | Definește o coloană cu clase sub |
W3-col are următoarele clase sub:
Coloane pentru ecrane mici (typical smart phones) :
| Clasă | Descriere |
|---|---|
| s1 | Definește 1 din cele 12 coloane (width:08.33%) pentru ecrane mici |
| s2 | Definește 2 din 12 coloane (width:16.66%) pentru ecrane mici |
| s3 | Definește 3 din 12 coloane (width:25.00%) pentru ecrane mici |
| s4 | Definește 4 din 12 coloane (width:33.33%) pentru ecrane mici |
| s5-s11 | |
| s12 | Definește 12 din 12 coloane (width:100%) . Implicit pentru ecrane mici |
Coloane pentru ecrane medii (typical tablets) :
| Clasă | Descriere |
|---|---|
| m1 | Definește 1 din cele 12 coloane (width:08.33%) pentru ecrane medii |
| m2 | Definește 2 din 12 coloane (width:16.66%) pentru ecrane medii |
| m3 | Definește 3 din 12 coloane (width:25.00%) pentru ecrane medii |
| m4 | Definește 4 din 12 coloane (width:33.33%) pentru ecrane medii |
| m5-m11 | |
| m12 | Definește 12 din 12 coloane (width:100%) . Implicit pentru ecrane medii |
Coloane pentru ecrane mari (typical laptops) :
| Clasă | Descriere |
|---|---|
| l1 | Definește 1 din cele 12 coloane (width:08.33%) pentru ecrane de mari dimensiuni |
| l2 | Definește 2 din 12 coloane (width:16.66%) pentru ecrane de mari dimensiuni |
| l3 | Definește 3 din 12 coloane (width:25.00%) pentru ecrane de mari dimensiuni |
| l4 | Definește 4 din 12 coloane (width:33.33%) pentru ecrane de mari dimensiuni |
| l5-l11 | |
| l12 | Definește 12 din 12 coloane (width:100%) . Implicit pentru ecrane mari) |
Clasele de mai sus pot fi combinate pentru a crea aspecte mai dinamice și flexibile.
Fiecare clasă de cântare în sus, așa că , dacă doriți să setați aceeași lățime pentru ecrane mici, mijlocii și mari, trebuie doar să specificați clasa mică. Și dacă doriți aceeași lățime pe ecrane medii și mari, trebuie doar să specificați clasa medie.
Cu toate acestea, dacă utilizați doar clasele medii și mari / sau, lățimea va transforma întotdeauna la 100% pe ecrane mici.
Notă: Numărul de coloane trebuie să se însumeze întotdeauna la 12 pentru fiecare rând (6+6, 3+3+6, 9+3, etc) !
Două coloane, aproximativ egale
Două coloane egale cu lățime (50%/50%) pe toate dimensiunile de ecran:
s6
s6
Exemplu
<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> Încearcă - l singur » Două coloane inegale
Două coloane lățime inegale (25%/75%) , pe toate dimensiunile de ecran:
s3
S9
Exemplu
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Încearcă - l singur » Trei coloane, aproximativ egale
Trei coloane egal cu lățime (33.3%/33.3%/33.3%) pe toate dimensiunile de ecran:
s4
s4
s4
Exemplu
<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> Încearcă - l singur » Trei coloane inegale
Trei coloane diverse lățimi (25%/50%/25%) de pe tablete, laptop - uri si desktop - uri. Pe telefoanele mobile, coloanele vor stivui automat (100% width) :
m3
m6
m3
Exemplu
<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> Încearcă - l singur » Notă: Acest exemplu este la fel ca folosind W3-sfert (m3) , W3-jumătate (m6) , W3-sfert (m3) , pe care ați învățat în Sensibilă W3.CSS capitol.
şase coloane
Șase coloane egal cu lățime (16% each) pe tablete, laptop - uri si desktop - uri. Pe telefoanele mobile, coloanele vor stivui automat (100% width) :
m2
m2
m2
m2
m2
m2
Exemplu
<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> Încearcă - l singur » Mixt: Laptop-uri mobile și
Puteți combina clase pentru a crea un aspect dinamic și flexibil. Acest exemplu va produce un aspect cu două coloane cu 83,34% / 16,66% (l8, l4) divizat pe ecrane mari și 50% / 50% (s6, s6) divizat pe ecrane mici:
L8 s6
l4 s6
Exemplu
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Încearcă - l singur » Mixte: mobile, tablete și laptop-uri
Acest exemplu va produce un aspect trei coloană cu / 58,34% / 16,66% 25% (l3, l7, l2) , divizat pe ecrane mari, de 50% / 25% / 25% (m6, m3, m3) divizat pe ecrane medii și o 33,3% / 33,3% / 33,3% (s4, s4, s4) divizat pe ecrane mici:
l3 m6 s4
L7 m3 s4
l2 m3 s4
Exemplu
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Î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 » Utilizarea procentuală
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Exemplu
<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> Încearcă - l singur » Utilizarea W3-repaus
150px
odihnă
75px
odihnă
100px
100px
odihnă
sfert
80px
odihnă
sfert
sfert
sfert
35%
odihnă
Exemplu folosind repaus
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Încearcă - l singur »