| Класс | Определяет | |
|---|
| W3-контейнер | Контейнер для содержимого HTML (добавляет 16px обивка левый и правый) | Попробуй |
| Используется с цветными классами | Попробуй |
| Используется в качестве заголовка | Попробуй |
| Используется в качестве нижнего колонтитула | Попробуй |
| Используется с W3-leftbar | Попробуй |
| Используется с W3-bottombar | Попробуй |
| w3 сечение | Контейнер для содержимого HTML (добавляет 16px маржу сверху и снизу) | Попробуй |
| W3-значок | Круговой значок 8 | Попробуй |
| W3-тег | Прямоугольная бирка Подробнее в последнюю минуту! | Попробуй |
| W3-уль | Неупорядоченный список | Попробуй |
| W3-дисплей-контейнер | Контейнер для W3-дисплей- классов (позиционировать элемент в верхнем левом углу , вверху справа, внизу слева или в нижнем правом углу, или в середине контейнера) | Попробуй |
| W3-изображения | Устаревшее. Вместо этого используйте W3-дисплей-контейнер. | Попробуй |
| W3-BLOCKQUOTE | Удалены в 2.0 (использование W3-leftbar вместо этого) | Попробуй |
| W3-код | Код контейнера | Попробуй |
| W3-Прогресс-контейнер | бар контейнер Прогресс | Попробуй |
| Класс | Определяет | |
|---|
| W3-рядный | Контейнер для одного ряда жидкости отзывчивым содержания | Попробуй |
| W3-рядного обивка | Row, где все столбцы имеют отступ по умолчанию | Попробуй |
| W3-контент | Контейнер для фиксированного размера в центре содержания | Попробуй |
| | |
|
| w3 половина | Половина (1/2) экран колонки контейнера | Попробуй |
| W3-третьих | В-третьих (1/3) экран колонки контейнера | Попробуй |
| W3-twothird | Две трети (2/3) экран колонки контейнера | Попробуй |
| и3-й квартал | Четверть (1/4) экран колонки контейнера | Попробуй |
| W3-threequarter | Три четверти (3/4) экран колонки контейнера | Попробуй |
| W3-Col | Контейнер колонки для любого содержимого HTML | Попробуй |
| | |
| l1 - L12 | Адаптивные размеры для больших экранов | Попробуй |
| m1 - m12 | Адаптивные размеры экранов для средних | Попробуй |
| s1 - s12 | Адаптивные размеры для маленьких экранов | Попробуй |
| | |
|
| W3-прятки маленький | Скрыть содержание на маленьких экранах (менее 601px) | Попробуй |
| W3-прятки среда | Скрыть содержание на средних экранах | Попробуй |
| W3-прятки большой | Скрыть содержание на больших экранах (больше, чем 992px) | Попробуй |
| Класс | Определяет | |
|---|
| W3-Navbar | Панель навигации | Попробуй |
| Складная панель навигации | Попробуй |
| W3-topnav | Верхней панели навигации | Попробуй |
| W3-sidenav | Боковая панель навигации | Попробуй |
| Боковая панель навигации накладывания основное содержание | Попробуй |
| Боковая панель навигации накладывая все основное содержание | Попробуй |
| Боковая панель навигации сдвигая основное содержание вправо | Попробуй |
| Боковая панель навигации с наложением фона | Попробуй |
| W3-коллапс | Полностью автоматическая отзывчивым сторона навигации | Попробуй |
| W3-dropnav | Выпадающий навигации | Попробуй |
| W3-выпадающий щелчок | Clickable выпадающий элемент | Попробуй |
| W3-выпадающий-Hover | Hoverable выпадающий элемент | Попробуй |
| Hoverable выпадающий элемент (используемый в W3-навигационной панели) | Попробуй |
| Hoverable выпадающий элемент (используемый в W3-sidenav) | Попробуй |
| Hoverable выпадающий элемент (используемый в W3-topnav) | Попробуй |
| W3-гармошка | Скрыть и показать разборную содержание | Попробуй |
| Clickable аккордеона и выпадающий используется в W3-sidenav | Попробуй |
| W3-пагинация | Pagination ссылки | Попробуй |
| Класс | Определяет | |
|---|
| W3-одушевленные-топ | Анимирует элемент из верхнего -300px до 0px | Попробуй |
| W3-одушевленные налево | Одушевляет элемент слева -300px на 0px | Попробуй |
| W3-одушевленные дном | Анимирует элемент из нижней -300px до 0px | Попробуй |
| W3-одушевленные правый | Одушевляет элемент из правого -300px на 0px | Попробуй |
| W3-одушевленные-непрозрачности | Анимирует непрозрачность такой элемент от 0 до 1 | Попробуй |
| W3-одушевленные-зум | Анимирует элемент от 0 до 100% в размере | Попробуй |
| W3-одушевленные-выцветанию | Анимирует непрозрачность такой элемент в диапазоне от 0 до 1 и от 1 до 0 (выцветает и снаружи) | Попробуй |
| W3-спин | Спин иконку, на 360 градусов | Попробуй |
| Спин любой элемент на 360 градусов | Попробуй |
| W3-одушевленные-вход | Анимирует ширину поля ввода до 100% | Попробуй |
| Класс | Определяет | |
|---|
| W3-крошечное | Определяет размер шрифта 10 пикселей | Попробуй |
| W3-маленький | Определяет размер шрифта 12 пикселей | Попробуй |
| W3-большой | Определяет размер шрифта 20 пикселей | Попробуй |
| W3-XLarge | Определяет размер шрифта 24 пикселей | Попробуй |
| W3-XXLarge | Определяет размер шрифта 32 пикселей | Попробуй |
| W3-XXXLarge | Определяет размер шрифта 48 пикселей | Попробуй |
| W3-джамбо | Определяет размер шрифта 64 пикселей | Попробуй |
| W3-тонкий | Определяет стройнее текст | Попробуй |
| W3 в масштабах всей | Определяет более широкий текст | Попробуй |
| W3-вертикальный | Определяет вертикальный текст | Попробуй |
| W3-топ | Фиксированное содержимое на верхней части страницы | Попробуй |
| W3-центр | Сосредоточенный содержание | Попробуй |
| W3-круг | Объезжанная содержание | Попробуй |
| w3 скрыть | Скрытое содержание (дисплей: нет) | Попробуй |
| W3-шоу | Показать содержимое (дисплей: блок) | Попробуй |
| W3-шоу-блок | Псевдоним W3-шоу (дисплей: блок) | Попробуй |
| W3-шоу-рядный блок | Показать содержание, как встроенный блок (дисплей: встроенный блок) | Попробуй |
| W3-прятки маленький | Скрыть содержание на маленьких экранах (менее 601px) | Попробуй |
| W3-прятки среда | Скрыть содержание на средних экранах | Попробуй |
| W3-прятки большой | Скрыть содержание на больших экранах (больше, чем 992px) | Попробуй |
| w3 налево | Оставшись скорректированный содержание | Попробуй |
| W3-право | Правый скорректированный содержание | Попробуй |
| W3-лево-Align | Выравнивание по левому краю текст | Попробуй |
| W3-право-Align | Выравнивание по правому краю текста | Попробуй |
| W3-оправдает | Справа и выравнивание по левому краю текст | Попробуй |
| W3-дисплей-контейнер | Контейнер для W3-дисплей- классов (позиция: относительная) | Попробуй |
| W3-дисплей-верхнее-левое | Содержание Позиция в верхнем левом углу | Попробуй |
| W3-дисплей-topright | Содержание Позиция в правом верхнем углу | Попробуй |
| W3-дисплей-bottomleft | Содержание Позиция в нижнем левом углу | Попробуй |
| W3-дисплей-bottomright | Содержание Позиция в правом нижнем углу | Попробуй |
| W3-дисплей среднего | Содержание Положение в середине (по горизонтали и по вертикали) | Попробуй |
| W3-дисплей-topmiddle | Содержание Положение в середине в верхней части элемента | Попробуй |
| W3-дисплей-bottommiddle | Содержание Положение в середине в нижней части элемента | Попробуй |
| W3-засечек | Изменяет шрифт засечек | Попробуй |
| W3-непрозрачности | Добавляет непрозрачность текста | Попробуй |
| Добавляет непрозрачность к любому элементу | Попробуй |
| W3-накладка | Создает эффект наложения | Попробуй |
| W3-текст-тень | Добавляет тени к тексту | Попробуй |
Все вышеуказанные цвета также могут быть использованы в качестве классов при наведении:
| Класс | Определяет | |
|---|
| W3-парят-белый | Hover цвет белый | Попробуй |
| W3-парят-черный | Hover цвет черный | Попробуй |
| W3-парят-красный | Hover красный цвет | Попробуй |
| W3-парят-синий | Hover синий цвет | Попробуй |
| W3-парят-зеленый | Hover зеленый цвет | Попробуй |
| W3-парят-аква | Hover цвет морской волны | Попробуй |
| W3-парят-оранжевый | Hover оранжевый цвет | Попробуй |
| W3-парят-серый | Hover цвет серый | Попробуй |
| W3-парят-бледно-зеленый | Hover цвет бледно-зеленый | Попробуй |
| | |
| W3-парят-текст-красный | Наведите указатель мыши текст красный цвет | Попробуй |
| W3-парят-текст-красный | Наведите указатель мыши текст синий цвет | Попробуй |
| W3-парят-текст-зеленый | Наведите указатель мыши текст зеленый цвет | Попробуй |
| W3-парят-текст-фиолетовый | цвет Hover текста фиолетовый | Попробуй |
| | |
| W3-парят-цвет внешних пунктов пропуска | Hover цвет границы | Попробуй |
| | |
| W3-парят-непрозрачности | Добавляет прозрачность к элементу на парении (60% непрозрачности) | Попробуй |
| W3-парят-тень | Добавляет тень к элементу на парении | Попробуй |
| не w3-парят-ни | Удаляет эффекты при наведении курсора мыши от элемента | Попробуй |
| Класс | Определяет | |
|---|
| W3-обивка-0 | Удаляет все отступы из элемента | Попробуй |
| W3-обивка | Перетяжка 8px сверху и снизу, и 16px влево и вправо. | Попробуй |
| W3-обивка-крошечные | Перетяжка 2рх сверху и снизу, и 4px влево и вправо. | Попробуй |
| W3-обивка-маленький | Перетяжка 4px сверху и снизу, и 8px влево и вправо. | Попробуй |
| W3-обивка-среда | Перетяжка 8px сверху и снизу, и 16px влево и вправо. | Попробуй |
| W3-обивка-большой | Перетяжка 12px сверху и снизу, и 24px влево и вправо. | Попробуй |
| W3-обивка-XLarge | Перетяжка 16px сверху и снизу, и 32px влево и вправо. | Попробуй |
| W3-обивка-XXLarge | Перетяжка 24px сверху и снизу, и 48px влево и вправо. | Попробуй |
| W3-обивка-джамбо | Перетяжка 32px сверху и снизу, и 64px влево и вправо. | Попробуй |
| W3-обивка-топ | Перетяжка сверху 8px | Попробуй |
| W3-обивка-направо | Padding правый 16px | Попробуй |
| W3-обивка-дно | Перетяжка дно 8px | Попробуй |
| W3-обивка левый | Перетяжка оставил 16px | Попробуй |
| W3-обивка-Hor-4 | Перетяжка 4px верх и низ | Попробуй |
| W3-обивка-Hor-8 | Перетяжка 8px верх и низ | Попробуй |
| W3-обивка-Hor-12 | Перетяжка 12px сверху и снизу | Попробуй |
| W3-обивка-Hor-16 | Перетяжка 16px сверху и снизу | Попробуй |
| W3-обивка-Hor-24 | Перетяжка 24px сверху и снизу | Попробуй |
| W3-обивка-Hor-32 | Перетяжка 32px сверху и снизу | Попробуй |
| W3-обивка-Hor-48 | Перетяжка 48px сверху и снизу | Попробуй |
| W3-обивка-Hor-64 | Перетяжка 64px сверху и снизу | Попробуй |
| W3-обивка-Hor-128 | Перетяжка 128px сверху и снизу | Попробуй |
| W3-обивка-вер-4 | Перетяжка 4px влево и вправо. | Попробуй |
| W3-обивка-вер-8 | Перетяжка 8px влево и вправо. | Попробуй |
| W3-обивка-вер-16 | Перетяжка 16px влево и вправо. | Попробуй |
| W3-обивка-вер-24 | Перетяжка 24px влево и вправо. | Попробуй |
| W3-обивка-вер-32 | Перетяжка 32px влево и вправо. | Попробуй |
| W3-обивка-вер-48 | Перетяжка 48px влево и вправо. | Попробуй |
| W3-обивка-вер-64 | Перетяжка 64px влево и вправо. | Попробуй |
| Класс | Определяет | |
|---|
| W3-граница | Границы (сверху, справа, снизу, слева) | Попробуй |
| W3-граница-топ | Граница сверху | Попробуй |
| W3-граница-право | Border право | Попробуй |
| W3-граница дна | Граница снизу | Попробуй |
| W3-граница левого | Пограничный влево | Попробуй |
| W3-граница-0 | Удаляет все границы | Попробуй |
| W3-цвет внешних пунктов пропуска | Отображает любые определенные границы в заданном цвете (например, красный и т.д.) | Попробуй |
| W3-bottombar | Добавляет толстую нижнюю границу (бар) к элементу | Попробуй |
| W3-leftbar | Добавляет толстый левую границу (бар) к элементу | Попробуй |
| W3-rightbar | Добавляет толстую правую границу (бар) к элементу | Попробуй |
| W3-topbar | Добавляет толстую верхнюю границу (бар) к элементу | Попробуй |
| W3-парят-цвет внешних пунктов пропуска | Hoverable цвет границы | Попробуй |