Навстречу Bootstrap 4. Основы работы: Миксовка классов колонок. Уроки веб разработки от ProDevZone

Автор Zhanna Belchenko
Навстречу Bootstrap 4. Основы работы: Миксовка классов колонок. Уроки веб разработки от ProDevZone

Итак продолжаем знакомиться с сеточкой системой быстрой в этом видео уроке я покажу вам принцип минусовки классов колонок который позволит вашему отображению встать отзывчивым к различного рода устройством.

Каким образом мы можем реализовать данную фишку с помощью комбинирования классов рассмотренных в прошлом уроке определяемся с количеством секций которые должны быть выделены на колонку при использовании смартфона положение хотим занимать весь ряд поэтому выделяем на колонку все 12 секций контейнера такой же принцип будем применять и для режима просмотра в горизонтальном положении на случай же использование планшета в вертикальном положении макет должен превратиться из 1 колодочного в двухколоночный то есть на одну колонку мы будем выделять есть секции контейнера. Если же держать планшет горизонтально то размер превращается в схожей с размером небольших поэтому можем воспользоваться классом для небольших мониторов и превратить двухколоночный макет в трехколоночный для этого выделяем по четыре секции контейнера на колонку. Если же сайт будет просматриваться на широких мониторов.

Кто из трехколоночный макет.

А мы сделаем 4 колоночный макет таким образом на колонку будем выделять трисекции контейнера в результате у нас нарисовалась следующая картина с количеством секций на колонку мы определились осталось только добавить сами классы. Единственное, что хотелось бы отметить. Вы видите, что в случае смартфонов мы определили одинаковое количество колонок как на горизонтальной. Ведь так и на вертикальной на самом деле в этой ситуации мы можем не определять класс для смартфона центральном положении потому, что по умолчанию предыдущие классы распространяется на последующие еда ещё одно определение классов должны быть именно в такой последовательности от малых размеров к большим. Ну, что ж теперь давайте на практике всё — это реализуем у нас есть контейнер с рядом перечисляем четыре проекта каждый в своей колонке теперь первой колонки присваиваем класс который мы определили. Заранее только его подробно разбирали для экранов смартфонов используем по 12 секций на контейнер для планшета в вертикальном положении по 6 секций на колонку для небольших мониторов и планшетов в центральном положении по четыре секции на колонку и для широких мониторов по три секции на колонку копируем данные. Классно Все остальные колонки и теперь давайте протестируем наш в инструментах разработчика хром обновляет страницу для этого я использую F5 и. Давайте посмотрим как наш сайт будет отображаться на смартфоне в вертикальном положении в результате видим одну колонку все проекты выстроились друг под друга если смущает, что элементы прилипли через seas мы можем настроить нижние отступить для и так вертикальном положении всё хорошо в горизонтальном тоже дальше. Переключайся на планшет сейчас он находится в вертикальном положении поэтому у нас колонки разворачиваем его выведем, что из двухколоночный макет, а сайт преобразовался в трехколоночный макет. Ну и на широком мониторе мы можем увидеть все наши проекты выстраиваются в 4 колонки всё как мы и планировали если данный урок был. Ставьте лайк и делитесь данным видео с друзьями. Если ещё не подписана на канал то самое время — это сделать всего один клик и вы будете первым иметь доступ к последним уроком по веб-разработке от. До встречи в следующих холод.

0 комментариев
0

Читайте также