Klasy użytkowe
Większość W3.CSS zbudowana jest wokół klasach użytkowych zapewnienie dopełnienia, marginesy, rozmiarów i położenia.
Klasy dopełnienia
Klasywielkości W3-padding- dodaje dopełnienie do dowolnego elementu HTML:
Klasa w3-padding-jumbo dodaje 32px górny i dolny i 64px lewo i prawo.
Klasa w3-padding-XXLarge dodaje 24px górny i dolny i 48px lewo i prawo.
Klasa w3-padding-XLarge dodaje 16px górny i dolny i 32px lewo i prawo.
Klasa w3-padding-duże dodaje 12px górny i dolny i 24px lewo i prawo.
Klasa w3-padding-Medium dodaje 8 pikseli górny i dolny i 16px lewo i prawo.
Klasa w3-padding-małe dodaje 4px górny i dolny i 8 pikseli w lewo i prawo.
Klasa w3-padding-tiny dodaje 2px górny i dolny i 4px lewo i prawo.
Przykład
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Spróbuj sam " W3-padding-hormo- Klasy Numerdodaje poziome (góra i dół) dopełnienie do dowolnego elementu HTML:
Klasa w3-padding-Hor-4 dodaje 4PX górnej i dolnej wyściółkę.
Klasa w3-padding-Hor-8 dodaje 8PX górnej i dolnej wyściółkę.
Klasa w3-padding-HOR-16 dodaje 16px górny i dolny wyściółkę.
Klasa w3-padding-HOR-32 dodaje 32px górny i dolny wyściółkę.
Klasa w3-padding-HOR-64 dodaje 64px górny i dolny wyściółkę.
Przykład
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Spróbuj sam " KlasyNumer w3-padding-ver- dodaje pionowej (lewy i prawy) dopełnienie do dowolnego elementu HTML:
W3-padding-ver-4 klasy dodaje 4PX lewą i prawą dopełnienia.
W3-padding-ver-8 Klasa dodaje 8PX lewą i prawą dopełnienia.
W3-padding-ver-16 Klasa dodaje 16x lewą i prawą dopełnienia.
W3-padding-ver-32 Klasa dodaje 32PX lewą i prawą dopełnienia.
Klasa w3-padding-HOR-48 dodaje 64px lewą i prawą dopełnienia.
Przykład
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Spróbuj sam " Klasy Margin
KlasyW3-margin dodać marginesy do elementu:
Klasa w3-marża dodaje 16px margines wszystkich stron elementu.
Klasa w3-margin-bottom dodaje 16px dolnego marginesu do elementu.
W3-margin-left klasy dodaje 16px lewy margines elementu.
Klasa w3-margin-right dodaje margines 16px prawo do elementu.
Klasa w3-margin-top dodaje 16px górny margines do elementu.
Dobór Klasy
W3- klasa wielkości zmienia rozmiar czcionki elementu:
Mam małe (przy użyciu w3-tiny)
Mam małe (przy użyciu w3-small)
Jestem średniego. Domyślny.
Mam duże (przy użyciu w3-large)
Jestem Xlarge (przy użyciu w3-Xlarge)
Przykład
<p class="w3-small">I'm small (using w3-small)</p>
<p>I'm medium. The default.</p>
<p class="w3-large">I'm
large (using w3-large)</p>
<p class="w3-xlarge">I'm xlarge (using
w3-xlarge)</p> Spróbuj sam " Możesz przeczytać więcej o doborze zajęć w rozdziale Typografia W3.CSS .
zaokrąglanie Klasy
Klasa wielkości w3-okrągłodennej dodaje zaokrąglone obramowanie do elementu:
Przykład
<div class="w3-round w3-teal w3-padding">Round</div>
<div class="w3-round-large w3-teal w3-padding">Rounder</div>
<div class="w3-round-xlarge w3-teal w3-padding">Rounder</div>
<div class="w3-round-jumbo w3-teal w3-padding">Roundest</div>
Spróbuj sam " Koło Klasa
Centrum Class
Centra Klasa w3 centralnie element:
Przykład
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Spróbuj sam " Klasy pływające
Klasa w3 lewej unosi element w lewo, klasa w3 prawym unosi element do prawej:
Przykład
<div class="w3-container w3-light-grey">
<div class="w3-left
w3-red">Float left</div>
<div class="w3-right w3-blue">Float
right</div>
</div> Spróbuj sam " Pokaż / Schowaj Klasy
W3-hide-małe | średnie | duża klasa ukrywa element o określonym rozmiarze.
Uwaga: Zmiana rozmiaru okna przeglądarki, aby zrozumieć, jak to działa:
Przykład
<p class="w3-hide-small">I will be hidden on small screens (phone)</p>
<p class="w3-hide-medium">I will be hidden on medium screens (tablet)</p>
<p class="w3-hide-large">I will be hidden
on large screens (laptop/desktop)</p> Spróbuj sam "