W3.CSS Адаптивная меняющаяся сетка
Адаптивная (отзывчивая) сетка
W3.CSS поддерживает адаптивную меняющуюся сетку с 12 колонками (столбцами).
Измените размер окна страницы, чтобы увидеть эффект!
Эта часть будет занимать 12 столбцов на маленьком экране, 4 на среднем экране и 3 на большом экране.
Эта часть будет занимать 12 столбцов на маленьком экране, 8 на среднем экране и 9 на большом экране.
Пример
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 столбцов на маленьком экране, 4 на среднем экране и 3 на большом экране.</p>
</div>
<div class="w3-col m8 l9">
<p>12 столбцов на маленьком экране, 8 на среднем экране и 9 на большом экране.</p>
</div>
</div>
Попробуйте сами »
Адаптивные (отзывчивые) строки
Система сетки W3.CSS адаптивна (отзывчива). Столбцы будут переупорядочены автоматически в зависимости от размера экрана: на большом экране страница может выглядеть лучше с контентом, организованным в три столбца, но на маленьком экране может быть лучше, если контент размещается друг над другом.
| Класс | Описание |
|---|---|
| w3-row | Контейнер для адаптивных классов, без отступов |
| w3-row-padding | Контейнер для адаптивных классов, с отступом 8px слева и справа |
| w3-col | Определяет один столбец в 12-колоночной адаптивной сетке |
Класс w3-col имеет следующие подклассы:
Столбы для маленьких экранов (типичные смартфоны):
| Класс | Описание |
|---|---|
| s1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для небольших экранов |
| s2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для маленьких экранов |
| s3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для маленьких экранов |
| s4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для небольших экранов |
| s5-s11 | |
| s12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для маленьких экранов |
Столбцы для средних экранов (типичные планшеты):
| Класс | Описание |
|---|---|
| m1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для средних экранов |
| m2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для средних экранов |
| m3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для средних экранов |
| m4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для средних экранов |
| m5-m11 | |
| m12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для средних экранов |
Столбцы для больших экранов (типичные ноутбуки и десктопы):
| Класс | Описание |
|---|---|
| l1 | Определяет 1 из 12 столбцов (ширина: 08,33%) для больших экранов |
| l2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для больших экранов |
| l3 | Определяет 3 из 12 столбцов (ширина: 25,00%) для больших экранов |
| l4 | Определяет 4 из 12 столбцов (ширина: 33,33%) для больших экранов |
| l5-l11 | |
| l12 | Определяет 12 из 12 столбцов (ширина: 100%). По умолчанию для больших экранов) |
Указанные выше классы можно комбинировать для создания максимально динамичных и гибких макетов.
Каждый класс масштабируется, поэтому, если вы хотите установить одинаковую ширину для маленьких, средних и больших экранов, вам нужно только указать класс small. И если вы хотите одинаковую ширину на средних и больших экранах, вам нужно только указать класс medium.
Однако, если вы используете только medium и/или large классы, ширина всегда преобразуется в 100% на маленьких экранах.
Примечание: Количество столбцов всегда должно составлять до 12 для каждой строки (6+6, 3+3 +6, 9+3 и т.д.)!
Два равных столбца
Два столбца одинаковой ширины (50%/50%) на всех размерах экрана:
s6
s6
Пример
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Попробуйте сами »
Два неравных столбца
Два столбца неравной ширины (25%/75%) на всех размерах экрана:
s3
s9
Пример
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Попробуйте сами »
Три равных столбца
Три столбца одинаковой ширины (33,3%/33,3%/33,3%) на всех размерах экрана:
s4
s4
s4
Пример
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-red w3-center"><p>s4</p></div>
</div>
Попробуйте сами »
Три неравных столбца
Три столбца различной ширины (25%/50%/25%) на планшетах, ноутбуках и настольных ПК. На мобильных телефонах столбцы будут автоматически складываться (ширина 100%):
m3
m6
m3
Пример
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col m3 w3-red w3-center"><p>m3</p></div>
</div>
Попробуйте сами »
Примечание: Этот пример аналогичен использованию w3-чеверти (m3), w3-половины (m6), w3-четверти (m3), о которых можно узнать в разделе W3.CSS Адаптивность.
Шесть столбцов
Шесть столбцов одинаковой ширины (по 16%) на планшетах, ноутбуках и настольных ПК. На мобильных телефонах столбцы будут автоматически складываться (ширина 100%):
m2
m2
m2
m2
m2
m2
Пример
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Попробуйте сами »
Смешанные: мобильные и ноутбуки
Вы можете комбинировать классы для создания динамического и гибкого макета. В этом примере будет получено расположение в два столбца с разбивкой 83,34% / 16,66% (l10, l2) на больших экранах и 50%/50% (s6, s6) на маленьких экранах:
l10 s6
l2 s6
Пример
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Попробуйте сами »
Смешанный: мобильный, планшеты и ноутбуки
В этом примере будет получено расположение трех столбцов с 25%/58,34%/16,66% (l3, l7, l2) на больших экранах, 50%/25%/25% (m6, m3, m3) на средних экранах и 33,3%/33,3%/33,3% (s4, s4, s4) разделены на маленькие экраны:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Пример
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Попробуйте сами »
Разница между w3-row и w3-row-padding
Класс w3-row определяет контейнер без отступов, в то время как класс w3-row-padding добавляет 8px левый и правый отступ к каждому столбцу:
w3-row:
w3-row-padding:
Пример
<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>
Попробуйте сами »
Использование w3-rest (остаток)
Класс w3-rest это мощный и гибкий класс, который будет использовать то, что осталось от столбцов сетки.
150px
остаток
75px
остаток
100px
100px
остаток
четверть
80px
остаток
четверть
четверть
четверть
35%
остаток
Пример использования класса rest (остатка)
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Попробуйте сами »
Элемент, использующий class="w3-rest" всегда должен быть последним элементом в исходном коде.
Использование процентов
Используйте CSS свойство width чтобы определить конкретную ширину столбцов.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Пример
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>
Попробуйте сами »
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
