W3.CSS Ingeboude responsiwiteit


W3.CSS sluit 'n responsiewe, mobiele eerste roosterstelsel in om uitleg te hanteer:

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

50 px

rus

1/4

rus

100 px

45 px

rus


W3.CSS Responsiewe Klasse

W3.CSS se roosterstelsel reageer, en die kolomme sal outomaties herrangskik na gelang van die skermgrootte:

Klas Beskrywing
w3-helfte Beslaan 1/2 van die venster (op medium en groot skerms)
w3-derde Beslaan 1/3 van die venster (op medium en groot skerms)
w3-tweederde Beslaan 2/3 van die venster (op medium en groot skerms)
w3-kwart Beslaan 1/4 van die venster (op medium en groot skerms)
w3-driekwart Beslaan 3/4 van die venster (op medium en groot skerms)
w3-rus Beslaan die res van die kolomwydte
w3-kol Definieer een kolom in 'n 12-kolom responsiewe rooster
w3-selfoon Voeg mobiele-eerste-reaksie by 'n sel (kolom).
Vertoon elemente as blokelemente op mobiele toestelle.

Die responsiewe klasse hierbo moet binne 'n w3-ry- klas (of w3-ry-opvulklas ) geplaas word om ten volle reageer te wees.

Klas Beskrywing
w3-ry Houer vir responsiewe klasse, sonder opvulling
w3-ry-opvulling Houer vir responsiewe klasse, met 8px linker- en regtervulling
w3-inhoud Houer vir vaste grootte gesentreerde inhoud
   
w3-versteek-klein Versteek inhoud op klein skerms (minder as 601px)
w3-versteek-medium Versteek inhoud op medium skerms
w3-versteek-groot Versteek inhoud op groot skerms (groter as 992px)
   
l1 - l12 Responsiewe groottes vir groot skerms
m1 - m12 Responsiewe groottes vir medium skerms
s1 - s12 Responsiewe groottes vir klein skerms


Die w3-halfklas

Die breedte van die w3-half klas is 1/2 van die ouer element (style="width:50%").

Op skerms kleiner as 601 pieksels verander dit na 100%.

w3-helfte

w3-helfte

Voorbeeld

<div class="w3-row">
  <div class="w3-half w3-container w3-green">
    <h2>w3-half</h2>
  </div>
  <div class="w3-half w3-container">
    <h2>w3-half</h2>
  </div>
</div>

Die w3-derde klas

Die breedte van die w3-derde klas is 1/3 van die ouerelement (style="width:33.33%").

Op skerms kleiner as 601 pieksels verander dit na 100%.

w3-derde

w3-derde

w3-derde

Voorbeeld

<div class="w3-row">
  <div class="w3-third w3-container w3-green">
    <h2>w3-third</h2>
  </div>
  <div class="w3-third w3-container">
    <h2>w3-third</h2>
  </div>
  <div class="w3-third w3-container">
    <h2>w3-third</h2>
  </div>
</div>

Die w3-tweederde klas

Die breedte van die w3-tweederde klas is 2/3 van die ouerelement (style="width:66.66%").

Op skerms kleiner as 601 pieksels verander dit na 100%. 

w3-tweederde

w3-derde

Voorbeeld

<div class="w3-row">
  <div class="w3-green w3-container w3-twothird">
    <h2>w3-twothird</h2>
  </div>
  <div class="w3-container w3-third">
    <h2>w3-third</h2>
  </div>
</div>

Die w3-kwartklas

Die breedte van die w3-kwartklas is 1/4 van die ouerelement (style="width:25%").

Op skerms kleiner as 601 pieksels verander dit na 100%.

w3-kwart

w3-kwart

w3-kwart

w3-kwart

Voorbeeld

<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>

Die w3-driekwart-klas

Die breedte van die w3-driekwartklas is 3/4 van die ouerelement (style="width:75%").

Op skerms kleiner as 601 pieksels verander dit na 100%.

w3-driekwart

w3-kwart

Voorbeeld

<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>

Kombinasies

w3-kwart

w3-helfte

w3-kwart


w3-kwart

w3-kwart

w3-helfte


w3-helfte

w3-kwart

w3-kwart


w3-derde

w3-tweederde


w3-kwart

w3-driekwart


Geneste rye

Voorbeeld: w3-half Binne w3-half

<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>

Kolomme wat Rest

Die w3-col klas definieer een kolom in 'n 12-kolom responsiewe rooster.

Die w3-rusklas sal die res van die breedte beslaan:

Ek is 150px

Ek is die res

Voorbeeld

<div class="w3-row">
  <div class="w3-col" style="width:150px"><p>I am 150px</p></div>
  <div class="w3-rest w3-green"><p>I am the rest</p></div>
</div>

Kolomme gebruik persentasie

Jy kan ook die CSS width-eienskap gebruik om die breedte in persentasie te stel:

20%

60%

20%

Voorbeeld

<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>

Die w3-inhoud klas

Die w3-inhoud klas definieer 'n houer vir vaste grootte gesentreerde inhoud. Gebruik die CSS max-width eiendom om die verstek breedte (980px) te ignoreer.

Voorbeeld

<body class="w3-content" style="max-width:500px">

  page content...

</body>

w3-ry vs. w3-ry-opvulling

Die w3-ry- klas definieer 'n houer sonder opvulling, terwyl die w3-ry-opvulling klas 'n 8px linker- en regtervulling by elke kolom voeg:

w3-ry:

w3-derde

w3-derde

w3-derde

w3-ry-opvulling:

w3-derde

w3-derde

w3-derde

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>

Strek gevulde rye

Die w3-rek- klas verwyder die regter- en linkerkantlyne van 'n element. Hierdie klas word dikwels gebruik om 'n opgestopte ry te strek:

'n Voorbeeld met w3-stretch:

'n Voorbeeld sonder w3-rek:

Voorbeeld

<div class="w3-row-padding w3-section w3-stretch">
  <div class="w3-col s4">
    <img src="img_nature_wide.jpg">
  </div>
  <div class="w3-col s4">
    <img src="img_snow_wide.jpg">
  </div>
  <div class="w3-col s4">
    <img src="img_mountains_wide.jpg">
  </div>
</div>

Responsiewe wys / versteek

The w3-hide-small, w3-hide-medium, and w3-hide-large classes hide elements on specific screen sizes.

Note: Resize the browser window to understand how it works:

w3-hide-small will be hidden on small screens (phones)

w3-hide-medium will be hidden on medium screens (tablets)

w3-hide-large will be hidden on large screens (laptops/desktop)

Example

<div class="w3-container w3-hide-small w3-red">
  <p>w3-hide-small will be hidden on small screens (phones)</p>
</div>

<div class="w3-container w3-hide-medium w3-green">
  <p>w3-hide-medium will be hidden on medium screens (tablets)</p>
</div>

<div class="w3-container w3-hide-large w3-blue">
  <p>w3-hide-large will be hidden on large screens (laptops/desktop)</p>
</div>

The w3-mobile Class

The w3-mobile class adds mobile-first responsiveness to any element.

It adds display:block and width:100% to an element on screens that are less than 600px wide.

Example

<a class="w3-button w3-mobile" href="#">Link</a>

Screen Resolutions

The built-in responsiveness of W3.CSS uses the DP size of a screen.

W3.CSS will treat an iPhone 6 with a resolution of 750 x 1334 pixels as a small screen of 375 x 667 pixels DP.

Small screens are less than 601 pixels DP, medium screens are less than 993 pixels DP.

Below is a list of typical device resolutions and reported DP sizes:

Iphone 4

Resolution
640 x 960

DP
320 x 480

Iphone 5

Resolution
640 x 1136

DP
320 x 528

Iphone 6

Resolution
750 x 1334

DP
375 x 667

Iphone 6s

Resolution
1080 x 1920

DP
414 x 736

Galaxy S6

Resolution
1440 x 2560

DP
360 x 640

Note 4

Resolution
1440 x 2560

DP
400 x 853

Nexus 6

Resolution
1440 x 2560

DP
411 x 731

iPad Mini

Resolution
768 x 1024

DP
768 x 1024

iPad

Resolution
1536 x 2048

DP
768 x 1024

Typical Laptop

Resolution
1366 x 768

DP
1366 x 768

Typical Desktop

Resolution
1920 x 1080

DP
1920 x 1080


12 Column Responsive Fluid Grid

W3.CSS also supports an advanced 12 column responsive fluid grid.

Resize the page to see the effect!

1
2
3
4
5
6
7
8
9
10
11
12

This part will occupy 12 columns on a small screen, 4 on a medium screen, and 3 on a large screen.

This part will occupy 12 columns on a small screen, 8 on a medium screen, and 9 on a large screen.

1
2
3
4
5
6
7
8
9
10
11
12

You will learn a lot more about the fluid grid in a later chapter.