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

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

наконец-то.

Мы добрались до. Одно из самых интересных важных вещей которые есть в бутстрапе до работы с колонками по сути всё, что вам нужно знать только то, что в. Один контейнер помещается 12 от этого мы можем и плясать если нам необходим двухколоночный макет то мы можем создать два блока и каждому из них происходит количество колонок которой каждый из них должен занимать.

Если мы хотим чтобы колонки были равны между собой количество занимаемых секций каждого блока будет 6.

Если же мы хотим чтобы 1 блок был больше второго то можем выставить размеры вот так и четыре по аналогии мы можем постройте трехколоночный макет в этом случае у нас будет 3 блока среди которых мы должны разместить 12 секций если макет должен выглядеть примерно так то размер первой и третьей колонке будет 3 размер средней колонке будет 6 уместились колонок уместились и так как же создавать самому колонку очень просто. Вам необходимо присвоить блоку класс. Согласно следующему правилу сначала идёт слова кол чем одной из ключевых слов и их предназначение мы поговорим через минуту и в конце указанием количества секций который будет занимать данный блок. Теперь давайте разберемся в том, что обозначает ключевые слова для этого. Давайте взглянем вот на эту таблицу колонки начинающиеся слова кол Excel предназначенный для отображения на широких мониторах разрешение больше либо равно 1200 пикселей если ваш сайт просматривается в таком разрешении — это размер контейнера будет 1140 пикселей. Если же разрешение монитора польза. Я чуть меньше стартует от 992 пикселей и упирается в 1999, но в силу буду классы начинающиеся с prefixes col-lg, а максимальный размер контейнера будет составлять 940 пикселей. Надеюсь суть уже начала проясняться если разрешение монитора пользователя чуть меньше как минимум 768 пикселей и упирается в 939 как правило — это планшет в вертикальном и горизонтальном положении ток блоку применён класс с префиксом col-md размер контейнера в этом случае будет составлять 720 пикселей оставшиеся два типа предназначены для смартфонов 1 для просмотра в центральном другой для просмотра вертикальном положении если смартфон держать горизонтально то в силу вступают класса с префиксом col-sm. Если же вертикально так all-access давайте посмотрим на реализацию небольшого размера макета из трех колонок 1 для навигации 2 3 для каких-то рекламных блоков в первую очередь мы создаем контейнер в него помещаем блок с классом в нашу строку и затем создаем 3D. Водолея Согласно информации для того чтобы превратить эти блоки в колонке присваиваем классы Cool xl3 кол xl6 ekol xl3 в сумме мы все 12 секций контейнера обновляем нашу страницу и видим, что все блоки от рисовались так как мы задумывали у нас есть одна большая колонка посередине и две боковые. Почему Я использовал тип Excel в данном примере потому, что сейчас я работаю с широким монитором, но в следующем уроке мы поговорим о том как миксовать данные классы чтобы добиться адаптивного от ваших страниц не забывайте ставить лайк чем больше их будет. Тем не веселее записывать новые видео подписана канал чтобы не пропустить следующем выпуске и делимся вашими мыслями комментариях. До скорой встречи.

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

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