clasele utilitare
Cele mai multe dintre W3.CSS este construit în jurul claselor de utilitate oferind umplutură, margini, dimensiuni și poziționare.
clasele padding
De w3-padding- size clase adaugă padding la orice element HTML:
Clasa W3-padding-jumbo adaugă 32px de sus și de jos și 64px la stânga și la dreapta.
Clasa W3-padding-xxlarge adaugă 24px de sus și de jos și 48px la stânga și la dreapta.
Clasa W3-padding-XLARGE adaugă 16px de sus și de jos și 32px la stânga și la dreapta.
Clasa W3-padding-mare adaugă 12px partea de sus și de jos și 24px la stânga și la dreapta.
Clasa W3-padding-mediu adaugă 8px de sus și de jos și 16px la stânga și la dreapta.
Clasa W3-padding-mici adaugă sus și de jos 4px și 8px stânga și la dreapta.
Clasa W3-padding-tiny adaugă sus și de jos și 2px 4px stânga și la dreapta.
Exemplu
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Încearcă - l singur » w3-padding-hor- number clase adaugă orizontale (top and bottom) de (top and bottom) de (top and bottom) padding la orice element HTML:
Clasa W3-padding-Hor-4 adaugă padding de sus și de jos 4px.
Clasa W3-padding-Hor-8 adaugă padding de sus și de jos 8px.
Clasa W3-padding-Hor-16 adaugă 16px de sus și de jos umplutură.
Clasa W3-padding-Hor-32 adaugă 32px de sus și de jos umplutură.
Clasa W3-padding-Hor-64 adaugă 64px de sus și de jos umplutură.
Exemplu
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Încearcă - l singur » Cele w3-padding-ver- number claselor adaugă verticală padding (stânga și dreapta) la orice element HTML:
W3-padding-ver-4 clasa adaugă padding stânga și la dreapta 4px.
W3-padding-ver-8 clasa adaugă padding stânga și la dreapta 8px.
W3-padding-ver-16 clasa adaugă 16x padding stânga și la dreapta.
W3-padding-ver-32 clasa adaugă 32px padding stânga și la dreapta.
Clasa W3-padding-Hor-48 adaugă 64px padding stânga și la dreapta.
Exemplu
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Încearcă - l singur » clasele Margin
Cele w3-margin claselor adăuga margini la un element:
Clasa W3-marja adaugă 16px marja pentru toate laturile unui element.
Clasa W3-margin-bottom adaugă o margine inferioară 16px la un element.
W3-margin-left clasa adaugă o marjă de 16px la stânga la un element.
Clasa W3-margin-dreapta adaugă o marjă de drept 16px la un element.
Clasa W3-margin-top adaugă o marjă de top 16px la un element.
Exemplu
<div class="w3-container w3-margin">
I have 16px margin on all sides
</div>
Încearcă - l singur » dimensionarea Clase
Clasa de mărime w3- schimbă font-dimensiunea unui element:
Sunt mic (using w3-tiny)
Sunt mici (using w3-small)
Sunt mediu. Valoarea implicită.
Sunt mare (using w3-large)
Sunt XLARGE (using w3-xlarge)
Exemplu
<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> Încearcă - l singur » Puteți citi mai multe despre dimensionarea claselor în capitolul Tipografia W3.CSS .
rotunjirea Clase
Clasa de mărime-W3 Roundstyle adaugă frontiere rotunjite la un element:
Exemplu
<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>
Încearcă - l singur » Cercul Clasa
Class Center
Clasa W3-centru de centre de un element:
Exemplu
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Încearcă - l singur » Clase plutitoare
Clasa din stânga-W3 plutește un element la stânga, clasa-W3 dreapta plutește un element la dreapta:
Exemplu
<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> Încearcă - l singur » Arată / Ascunde clasele
W3-hide-mici | mediu | clasă mare ascunde un element de pe o anumită dimensiune a ecranului.
Notă: Redimensionarea fereastra browser - ului pentru a înțelege cum funcționează:
Exemplu
<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> Încearcă - l singur »