Вспомогательные классы
Большая часть W3.CSS строится вокруг полезных классов обеспечивая заполнитель, поля, размеры и позиционирования.
Заполнения Классы
Классыразмера W3-padding- добавляет отступы к любому элементу HTML:
W3-обивка-джамбо класс добавляет 32px сверху и снизу, 64px влево и вправо.
Класс W3-обивка-XXLarge добавляет 24px сверху и снизу, 48px влево и вправо.
Класс W3-обивка-XLarge добавляет 16px сверху и снизу, 32px влево и вправо.
W3-обивка-большой класс добавляет 12px сверху и снизу, 24px влево и вправо.
W3-обивка-среднего класса добавляет 8px верх и низ и 16px влево и вправо.
W3-обивка-малого класса добавляет 4px верх и низ и 8px влево и вправо.
W3-обивка-крошечный класс добавляет 2рх верх и низ и 4px влево и вправо.
пример
<div class="w3-container w3-padding-xlarge">
<p>I have 16px top and bottom padding and 32px left and right padding.</p>
</div>
Попробуй сам " W3-обивка-Горизонс классы чиселдобавляет горизонтальные (сверху и снизу) отступы к любому элементу HTML:
Класс W3-обивка-Hor-4 добавляет 4px верхний и нижний отступы.
Класс W3-обивка-Hor-8 добавляет 8px верхний и нижний отступы.
W3-обивка-Hor-16 класс добавляет 16px верхний и нижний отступы.
W3-обивка-Hor-32 класс добавляет 32px верхний и нижний отступы.
Класс W3-обивка-Hor-64 добавляет 64px верхний и нижний отступы.
пример
<div class="w3-container w3-padding-hor-16">
I have 16px top and bottom padding
</div>
Попробуй сам " КлассыW3-обивка-вер- номер добавляет вертикальный (левая и правая) отступы к любому элементу HTML:
W3-обивка-вер-4 класс добавляет 4px левый и правый отступы.
W3-обивка-вер-8 класс добавляет 8px левый и правый отступы.
W3-обивка-вер-16 класс добавляет 16x левый и правый отступы.
W3-обивка-вер-32 класс добавляет 32px левый и правый отступы.
W3-обивка-Hor-48 класс добавляет 64px левый и правый отступы.
пример
<div class="w3-container w3-padding-ver-16">
<p>I have 16px left and right padding</p>
</div>
Попробуй сам " Классы маржинального
Классыw3 рентабельностью добавить поля к элементу:
Класс w3-маржа добавляет 16px край ко всем сторонам элемента.
W3-краю дна класс добавляет 16px нижний край к элементу.
W3 рентабельностью левый класс добавляет 16px левый край к элементу.
W3 рентабельностью правый класс добавляет 16px правый край к элементу.
W3 рентабельностью-высший класс добавляет 16px верхний край к элементу.
Определение размеров Классы
Класс w3- размера изменяет размер шрифта элемента:
Я крошечный (используя w3-крошечные)
Я маленький (с использованием W3-малых)
Я средний. По умолчанию.
Я большой (используя w3-большой)
Я XLarge (с использованием W3-XLarge)
пример
<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> Попробуй сам " Вы можете прочитать больше о загрунтовке классов в главе W3.CSS книгопечатания .
Завершают Классы
W3-округло размер класса прибавляет закругленные границы к элементу:
пример
<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>
Попробуй сам " Круг Класс
Центр класса
W3-центр класса центры элемент:
пример
<div class="w3-container w3-center w3-green">
<img
class="w3-circle"
src="img_car.jpg" alt="Car">
</div> Попробуй сам " Плавающий Классы
W3 левый класс плавает элемент слева, w3 правый класс плавает элемент справа:
пример
<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> Попробуй сам " Показать / скрыть Классы
W3-прятки маленький | средний | большой класс скрывает элемент на экране определенного размера.
Примечание: Изменение размеров окна браузера , чтобы понять , как это работает:
пример
<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> Попробуй сам "