Отзывчивый Сетка
W3.CSS поддерживает сетку отзывчивым жидкости 12 столбца.
Изменение размера страницы, чтобы увидеть эффект!
Эта часть будет занимать 12 столбцов на маленьком экране, 4 на среднем экране и 3 на большом экране.
Эта часть будет занимать 12 столбцов на маленьком экране, 8 на носителе экране и 9 на большом экране.
пример
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div> Попробуй сам " Отзывчивый Ряды
подвесная система W3.CSS является отзывчивым, а столбцы будут перестраивать автоматически, в зависимости от размера экрана: На большом экране это может выглядеть лучше с содержанием организованной в трех колонках, но на маленьком экране было бы лучше, если содержание предметы были сложены друг на друга.
Колонки должны находиться внутри строки , чтобы быть полностью отзывчивым.
| Класс | Описание |
|---|---|
| W3-рядный | Определяет отступ менее контейнер для чувствительных колонок. |
| W3-рядного обивка | Определяет мягкий контейнер для чувствительных колонок. |
| W3-Col | Определяет столбец с подразделам классов |
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%) для средних экранов |
| м2 | Определяет 2 из 12 столбцов (ширина: 16,66%) для средних экранов |
| м3 | Определяет 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%). По умолчанию для больших экранов) |
Классы выше, могут быть объединены для создания более динамичных и гибких макетов.
Каждый класс масштабируется, так что если вы хотите установить одинаковую ширину для малых, средних и больших экранов, вам нужно всего лишь указать небольшой класс. И если вы хотите такой же ширины на средних и больших экранах, вам нужно всего лишь указать средний класс.
Тем не менее, если вы используете только носитель и / или большие классы, ширина всегда будет преобразовывать до 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>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</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% ширина):
м3
m6
м3
пример
<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-четверть (м3), W3 половина (М6), W3 четверть (м3), что вы узнали в W3.CSS Отзывчивый главе.
Шесть колонн
Шесть равной ширины столбцов (16% каждая) на планшетных ПК, ноутбуков и настольных компьютеров. На мобильных телефонах, столбцы автоматически стек (100% ширина):
м2
м2
м2
м2
м2
м2
пример
<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% (L8, l4) на больших экранах и 50% / 50% (s6, s6) разделенного на маленьких экранах:
L8 s6
l4 s6
пример
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Попробуй сам " Смешанные: мобильные телефоны, планшеты и ноутбуки
Этот пример будет производить макет в три колонки с / 58,34% / 16,66% (l3, L7, l2) раскол на больших экранах 25%, 50% / 25% / 25% (m6, м3, м3) дробление на средних экранов и 33,3% / 33,3% / 33,3% (s4, s4, s4) разделение на маленьких экранах:
l3 m6 s4
L7 м3 s4
l2 м3 s4
пример
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Попробуй сам " Разница между W3-строки и W3-пропашные обивка
Класс w3-строка определяет проложенный менее контейнер, в то время как класс W3-рядного обивка добавляет 8px левый и правый отступы для каждого столбца:
W3-строка:
W3-рядного обивка:
пример
<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_fjords.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_fjords.jpg"></div>
</div> Попробуй сам " Использование Процент
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> Попробуй сам " Использование W3-отдых
150px
отдых
75px
отдых
100px
100px
отдых
четверть
80px
отдых
четверть
четверть
четверть
35%
отдых
Пример использования покоя
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Попробуй сам "