Bootstrap 4 с обучением на редакторе. Классы порядка элементов

По количеству звёзд на GitHub.

Если вы хотите освоить Bootstrap, в частности, его самую свежую, четвёртую версию, значит, этот материал подготовлен специально для вас. Здесь, на небольшом сквозном примере, который реально освоить за полчаса, будут продемонстрированы основы Bootstrap, разобравшись с которыми вы вполне сможете сделать что-то своё, использовав этот фреймворк.

Предварительные требования Эта материал ориентирован на начинающих веб-разработчиков, владеющих основами HTML, CSS и jQuery.

Вот одностраничный веб-сайт, о создании которого средствами Bootstrap мы будем говорить.

Готовый проект, созданный средствами Bootstrap

Npm install bootstrap
Bootstrap можно подключить к странице с использованием сети доставки контента. Для этого надо добавить следующую ссылку в тег :

Свежую версию Bootstrap можно загрузить отсюда и использовать локально.

Структура проекта должна выглядеть так, как показано на следующем рисунке.

Структура проекта О возможностях Bootstrap 4 Первая стабильная версия Bootstrap 4 вышла в конце января сего года. Теперь Bootstrap включает в себя некоторые интересные возможности, которых не было в его предыдущей версии. А именно, если говорить об улучшениях и изменениях, можно отметить следующее:

• Bootstrap 4 переписан с использованием технологии flexbox, в то время как в Bootstrap 3 применялась технология float. Если вы не знакомы с flexbox - взгляните на этот материал .
• В Bootstrap 4, в CSS, применяются единицы измерения rem , в то время как раньше применялись единицы измерения px . можно узнать о том, чем они отличаются.
• Некоторые компоненты, такие, как панели (panels), были удалены. можно найти подробности об изменениях внесённых в Bootstrap 4.

На самом деле, в Bootstrap 4 много нового в сравнении с Bootstrap 3, если вам это нужно - можете самостоятельно ознакомиться с этими новшествами. Мы же приступаем к работе над нашим учебным проектом.Система сеток Bootstrap Система сеток Bootstrap (Bootstrap Grid System) предназначена для создания макетов страниц. Она упрощает разработку отзывчивых веб-сайтов. В новой версии Bootstrap не изменились имена классов (надо отметить, что класса.xs больше не существует).

Сетка разделена на 12 колонок, эта структура, настроенная так, как нужно разработчику, является основой макета страницы.

Для того чтобы использовать Bootstrap-сетку, нужно добавить класс.row к главному элементу страницы. При настройке размеров вложенных элементов используют следующие классы (вместо звёздочки в конце имени класса указывается число столбцов базовой 12-колоночной сетки, которое должен занимать конкретный элемент):

• col-lg-* - класс, используемый для страниц, предназначенных для устройств с большим экраном вроде ноутбуков;
• col-md-* - класс для страниц, рассчитанных на устройства с экраном среднего размера, таких, как планшеты;
• col-sm-* - класс для страниц, которые рассчитаны маленькие экраны, например, такие, как у смартфонов.

Навигационная панель Навигационные панели в Bootstrap создают с использованием класса.navbar . Фактически, это - обёртка, в которую помещают элементы, формирующие навигационную панель. Ниже показана панель, которую мы сейчас создадим. Она расположена в верхней части страницы и не исчезает при прокрутке.

Навигационная панель

Итак, для того, чтобы на странице появилась навигационная панель, добавим в index.html тег с классом.navbar , внутри которого, с использованием других классов, вроде.navbar-brand , .navbar-toggler и.nav-item , создают некоторые специальные элементы и структуру системы навигации по сайту. Класс.fixed-top позволяет зафиксировать навигационную панель в верхней части страницы. Вот разметка навигационной панели:

Home

• About
• Portfolio
• Team
• Post
• Contact

Теперь создадим файл main.css и подключим его к странице, поместив в тег файла index.html следующее:

Это позволит настраивать стили элементов страницы, размещая в этом файле CSS-правила. Добавим в этот CSS-файл правила, задающие цветовое оформление навигационной панели:

Navbar{ background:#F97300; } .nav-link , .navbar-brand{ color: #f4f4f4; cursor: pointer; } .nav-link{ margin-right: 1em !important; } .nav-link:hover{ background: #f4f4f4; color: #f97300; } .navbar-collapse{ justify-content: flex-end; } .navbar-toggler{ background:#fff !important; }
Новая сетка Bootstrap построена на основе flexbox, поэтому для выравнивания содержимого нужно пользоваться соответствующими свойствами. Например, для того, чтобы поместить меню навигационной панели справа, нужно использовать свойство justify-content и установить его значение во flex-end:

Navbar-collapse{ justify-content: flex-end; }
Для настройки цвета фона навигационной панели можно воспользоваться классами.bg-light (светлый фон), .bg-dark (тёмный фон) и.bg-primary (основной цвет фона). Мы используем следующие настройки:

Bg-dark{ background-color:#343a40!important } .bg-primary{ background-color:#343a40!important }

Шапка страницы Для описания шапки страницы применяется тег :

Подготовим макет для шапки страницы. Мы хотим, чтобы она занимала всю высоту окна, поэтому тут нам пригодятся возможности jQuery. Создадим файл main.js и подключим его к index.html перед закрывающим тегом :

В файл main.js добавим следующее:

$(document).ready(function(){ $(".header").height($(window).height()); })
Нелишним будет поместить в шапку страницы какую-нибудь приятную фоновую картинку. Сделаем это следующим образом:

/*header style*/ .header{ background-image: url("../images/headerback.jpg"); background-attachment: fixed; background-size: cover; background-position: center; }
Вот что у нас в итоге получилось.

Шапка страницы с фоновым изображением

Пока шапка сайта выглядит пустовато, поэтому добавим в неё элемент , назначив ему класс.overlay , что приведёт к созданию блока, который расположен поверх фонового изображения шапки. Изменим тот участок файла index.html , где мы описывали шапку, следующим образом:

Затем, в main.css , добавим следующее:

Overlay{ position: absolute; min-height: 100%; min-width: 100%; left: 0; top: 0; background: rgba(244, 244, 244, 0.79); }
Теперь добавим в шапку описание проекта. Его мы поместим в новый элемент с классом.containter . Это - вспомогательный класс фреймворка Bootstrap, предназначенный для размещения содержимого с учётом нужд отзывчивого макета. Вот как изменится разметка на данном шаге:

Теперь добавим сюда ещё один элемент , которому назначим класс.description:

▍ Hello ,Welcome To My officail Website

Cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

See more
Этому тегу мы назначим ещё и класс.text-center , что позволит выровнять его содержимое по центру страницы. В конце описания сайта имеется кнопка. Поговорим о том, как её настроить.

Кнопки В Bootstrap предусмотрено множество классов, предназначенных для кнопок. Посмотреть некоторые примеры оформления кнопок можно . Мы, как видно в примере разметки из предыдущего раздела, добавили к элементу классы.btn и. btn-outline-secondary .

Теперь настроим стили для класса.description:

Description{ position: absolute; top: 30%; margin: auto; padding: 2em; } .description h1{ color:#F97300 ; } .description p{ color:#666; font-size: 20px; width: 50%; line-height: 1.5; } .description button{ border:1px solid #F97300; background:#F97300; color:#fff; }
Вот как будет выглядеть шапка страницы после выполнения вышеописанных действий:

Шапка страницы, содержащая описание проекта Раздел About Для начала посмотрим на то, что мы хотим создать. Перед вами - раздел страницы со сведениями о веб-разработчике.

Раздел About

Здесь мы воспользуемся возможностями сетки Bootstrap для того, чтобы сформировать макет раздела, состоящий из двух частей. Приступим к работе, добавив к родительскому элементу раздела класс.row:

Первая часть макета будет расположена слева, она будет содержать фотографию. Вторая часть, расположенная справа, вместит описание.

Вот как выглядит разметка левой части этого раздела:

// левая часть S.Web Developer
А вот что получится после того, как сюда будет добавлено описание правой части макета:

S.Web Developer ▍D.John

Ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

Обратите внимание на настройку ширины столбцов с использованием вышеописанных классов col-lg-* , col-md-* и col-sm-* .

Вот стили для всего этого:

About{ margin: 4em 0; padding: 1em; position: relative; } .about h1{ color:#F97300; margin: 2em; } .about img{ height: 100%; width: 100%; border-radius: 50% } .about span{ display: block; color: #888; position: absolute; left: 115px; } .about .desc{ padding: 2em; border-left:4px solid #10828C; } .about .desc h3{ color: #10828C; } .about .desc p{ line-height:2; color:#888; }

Раздел Portfolio Займёмся теперь разделом, в котором будет представлено портфолио разработчика. Он будет содержать галерею работ.

Раздел Portfolio

При формировании макета этого раздела применяются те же принципы работы с сеткой, которые мы рассматривали выше:

Portfolio
Добавление класса.img-fluid к каждому из изображений делает их отзывчивыми.

Каждый элемент в нашей галерее, на средних и больших экранах, занимает 4 колонки (напомним - класс col-sm-12 используется для устройств с маленькими экранами, класс col-md-4 используется для средних экранов, col-lg-4 - для устройств с большими экранами). Как результат, на больших и средних экранах на один элемент придётся примерно 33.3% элемента-контейнера, на маленьких устройствах каждый элемент будет занимать весь экран (12 колонок).

Стилизуем галерею работ:

/*Portfolio*/ .portfolio{ margin: 4em 0; position: relative; } .portfolio h1{ color:#F97300; margin: 2em; } .portfolio img{ height: 15rem; width: 100%; margin: 1em; }

Раздел Blog и работа с карточками Поговорим о создании раздела, в котором содержатся анонсы материалов из блога, который ведёт наш условный веб-разработчик.

Раздел Blog

Для создания этого раздела нам понадобятся так называемые карточки (cards в терминологии Bootstrap).

Для того чтобы создать карточку, нужно включить в макет элемент и добавить к нему класс.card . Для настройки различных элементов карточки можно использовать следующие классы:

• .card-header: шапка
• .card-body: основное содержимое
• .card-title: заголовок
• .card-footer: подвал
• .card-image: изображение

HTML-разметка этого раздела будет выглядеть так:

Blog Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more Post Title

Proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more
Вот стили для карточек:

Blog{ margin: 4em 0; position: relative; } .blog h1{ color:#F97300; margin: 2em; } .blog .card{ box-shadow: 0 0 20px #ccc; } .blog .card img{ width: 100%; height: 12em; } .blog .card-title{ color:#F97300; } .blog .card-body{ padding: 1em; }
Вот как будет выглядеть наш одностраничник после создания раздела Blog:

Страница после добавления раздела Blog Раздел Team В этом разделе будут размещены сведения о команде проекта.

Раздел Team

Для формирования этого раздела мы воспользуемся сеткой, поровну разделив имеющееся пространство между изображениями. Каждое изображение (на больших и средних экранах) будет занимать 3 колонки сетки, что составляет 25% общего пространства.

Вот HTML-разметка этого раздела:

Our Team Sara Manager Chris S.enginner Layla Front End Developer J.Jirard Team Manger
А вот - стили:

Team{ margin: 4em 0; position: relative; } .team h1{ color:#F97300; margin: 2em; } .team .item{ position: relative; } .team .des{ background: #F97300; color: #fff; text-align: center; border-bottom-left-radius: 93%; transition:.3s ease-in-out; }
Украсим этот раздел анимацией, появляющейся при наведении указателя мыши на изображения. Это должно выглядеть так, как показано на рисунке ниже.

Анимация при наведении указателя мыши на изображение

Для того чтобы достичь такого эффекта, добавим в main.css следующие стили:

Team .item:hover .des{ height: 100%; background:#f973007d; position: absolute; width: 89%; padding: 5em; top: 0; border-bottom-left-radius: 0; }

Форма обратной связи В данном разделе страницы будет находиться форма, с помощью которой посетители сайта могут отправлять владельцу сайта сообщения. Тут, как обычно, для того, чтобы стилизовать элементы и обеспечить их отзывчивость, мы воспользуемся возможностями Bootstrap.

Форма обратной связи

Как и в Bootstrap 3, в Bootstrap 4 используется класс.form-control для полей ввода, но теперь тут имеется кое-что новое. Например - вместо устаревшего класса.input-group-addon используется новый класс.input-group-prepend (для значков и меток). Подробности об этом можно найти в документации к Bootstrap 4. В нашем случае каждое поле ввода будет помещено в элемент , которому назначен класс.form-group .

Добавим в файл index.html следующее:

Get in Touch
Вот стили для раздела с формой обратной связи, которые надо поместить в файл main.css:

Contact-form{ margin: 6em 0; position: relative; } .contact-form h1{ padding:2em 1px; color: #F97300; } .contact-form .right{ max-width: 600px; } .contact-form .right .btn-secondary{ background: #F97300; color: #fff; border:0; } .contact-form .right .form-control::placeholder{ color: #888; font-size: 16px; }

Шрифты Стандартные шрифты подходят далеко не всем. Мы, воспользовавшись возможностями Google Font API, применим в нашем проекте шрифт Raleway. Он будет смотреться здесь очень хорошо. Для импорта шрифта добавим в файл main.css следующую директиву:

@import url("https://fonts.googleapis.com/css?family=Raleway");
Затем зададим глобальные стили для различных HTML-тегов:

Html,h1,h2,h3,h4,h5,h6,a{ font-family: "Raleway"; }

Эффекты прокрутки На рисунке ниже показано поведение страницы, которого мы хотим добиться.

Прокрутка страницы при нажатии на ссылки в навигационной панели

Для того, чтобы страница, при щелчках по ссылкам навигационной панели, плавно прокручивалась к нужному разделу, нам понадобится прибегнуть к возможностям jQuery. Если вы не очень хорошо знакомы с этой библиотекой, знайте, что ничего сложного тут нет - просто добавьте нижеприведённый код в файл main.js:

$(".navbar a").click(function(){ $("body,html").animate({ scrollTop:$("#" + $(this).data("value")).offset().top },1000) })
После этого добавьте атрибут data-value к каждой из ссылок в навигационной панели и приведите разметку к следующему виду:

About

Portfolio

Blog

Team

Contact

Для того чтобы всё это, наконец, заработало, осталось лишь добавить атрибут id к основному элементу каждого из разделов страницы. При этом нужно проследить, чтобы его значение было идентично тому, которое задано в атрибуте data-value соответствующей ссылки. Например, вот соответствующий атрибут для раздела About:

На этом наш пример завершён. Добавить метки

Bootstrap 4 - Bootstrap

Бутстрап 4

Начните работу с Bootstrap, самой популярной в мире структуры для создания быстродействующих мобильных сайтов с BootstrapCDN и стартовой страницей шаблона.

Быстрый старт

Хотите быстро добавить Bootstrap в свой проект? Используйте BootstrapCDN, бесплатно предоставленный людьми в MaxCDN. Использование диспетчера пакетов или загрузка исходных файлов? Перейдите на страницу загрузки.

CSS

Скопируйте в таблицу стилей в свою перед всеми остальными таблицами стилей, чтобы загрузить наш CSS.

JS

Многие из наших компонентов требуют использования JavaScript для работы. В частности, они требуют jQuery , Popper.js и наших собственных плагинов JavaScript. Поместите следующий рядом с вашими страницами, перед закрытия , чтобы включить их. jQuery должен быть первым, затем Popper.js, а затем нашими плагинами JavaScript.

Box-проклейки

Для более простой калибровки в CSS мы переключаем глобальное значение box-sizing из области content-box в border-box . Это гарантирует, что padding не влияют на конечную вычисленную ширину элемента, но это может вызвать проблемы с некоторыми сторонними программами, такими как Google Maps и Google Custom Search Engine.

В редком случае вам нужно переопределить его, используйте что-то вроде следующего:

Selector-for-some-widget { box-sizing: content-box; }

С приведенным выше фрагментом вложенные элементы, включая сгенерированный контент через::before и::after -will, наследуют указанный box-sizing для этого.selector-for-some-widget .

перезагружать

Для улучшения кросс-браузерного рендеринга мы используем Reboot для исправления несоответствий между браузерами и устройствами, предоставляя несколько более самоуверенные сбрасывания к общим элементам HTML.

сообщество

Будьте в курсе развития Bootstrap и обратитесь к сообществу с этими полезными ресурсами.

• Следуйте

В январе этого года Bootstrap 4 (также известный, как v4), наконец, был выпущен после того, как он болтался в версиях альфа более двух лет. Он представляет серьезную переписку функционала. Мало того, что он вводит много изменений под капотом, Bootstrap 4 также содержит ряд новых концепций, которые вам нужно будет осмыслить.

Поэтому в этой статье я расскажу о самых важных изменениях Bootstrap в v4 по сравнению с v3. Я исхожу из того, что вы уже использовали Bootstrap, поэтому не буду объяснять базовые принципы.

Теперь давайте рассмотрим наиболее важные изменения (в определенном порядке):

# 1: Вид кнопок

Начнем с веселого и визуального! Кнопки в v4 имеют более плоский дизайн, чем в v3. Вот предыдущие кнопки:

И вот некоторые из новых:

Это больше соответствует современным руководствам по разработке проектов, таким, как руководства Material Design, набравшего огромную популярность за последние пару лет.

# 2: Улучшенные медиа-запросы

На мой взгляд, Boostrap v3 имел слишком мало контрольных точек для сетки, например самая малая, xs, была на 768 пикселей. Много трафика сегодня приходит с куда меньших устройств, и это было разочаровывающе для многих разработчиков.

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ grid - breakpoints : ( xs : 0 , sm : 576px , md : 768px , lg : 992px , xl : 1200px ) ! default ;

Это упрощает создание сеток, которые хорошо работают на всех размерах экрана.

#3: Поддержка Flexbox дает нам больше гибкости

Знаменитые сетки Bootstrap теперь создаются с помощью Flexbox вместо float. На первый взгляд, это не дает большой разницы для разработчиков, так как большинство сеточных макетов работают точно так же. Однако это открывает несколько новых возможностей.

Раньше нам приходилось определять ширину каждого столбца (от 1 до 12). Теперь вы можете определить ширину одного столбца, а затем позволить Flexbox автоматически устанавливать ширину других. Вот пример того, как это сделать:

Как видите, мы устанавливаем ширину среднего столбца равной 6 (что равно половине полной ширины), а остальные столбцы просто занимают все остальное пространство.

1 of 3 2 of 3 (wider) 3 of 3

< div class = "container" > < div class = "row" > < div class = "col" > 1 of 3 < / div > < div class = "col-6" > 2 of 3 (wider ) < / div > < div class = "col" > 3 of 3 < / div > < / div > < / div >

Классы Flexbox

Bootstrap 4 также поставляется с кучей классов, которые вы можете применять для управления контейнерами и элементами Flexbox. Чтобы превратить элемент в контейнер Flexbox, просто задайте для него класс d-flex.

I"m a flexbox container!

< div class = "d-flex" > I "m a flexbox container ! < / div >

Это дает контейнер Flexbox с текстом внутри него:

Примечание. Я описываю только стили, связанные с Flexbox.

Давайте добавим еще несколько элементов и введем еще один класс, чтобы управлять тем, как они будут позиционироваться в контейнере.

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля

< div > Flex item < / div >

< div > Flex item < / div >

< div > Flex item < / div >

< / div >

В результате элементы центрируются в контейнере:

#4: Управление отступами с помощью классов

Это довольно круто. Теперь вы можете управлять отступами и полями с помощью классов p-* и m-*. Отступы могут варьировать в диапазоне от 0,25 до 3 rem за счет применения чисел от 0 до 5. Например, давайте зададим для Flexbox-контейнера класс p-5, чтобы создать максимальные отступы.

Выход новой версии Bootstrap4 подтолкнул меня к написанию этого руководства, потому что новая версия значительно отличается. На изучение её придется потратить некоторое количество времени, но оно того стоит. Данное руководство не является полным путеводителем по Bootstrap4, и несомненно, вам придется еще не раз заглянуть в документацию, но здесь мы рассмотрим базовые вещи по созданию макета сайта на bootstrap4 двумя различными способами

Установка В нашем случае мы будем использовать SASS и поэтому воспользуемся полной установкой.

Если вам просто нужен Bootstrap для быстрого прототипирования, имеет смысл использовать метод CDN. Вы просто подключаете файлы, которые находятся на других ресурсах в интернете, без установки (скачивания). Таким образом вы добавляете их в ваш проект в виде ссылок.

Вы можете просто добавить код из примера ниже, в ваш файл проекта - index.html

Bootstrap 4 Starter Template Hello< /h1>

Этот код прямо из страницы начальной загрузки Bootstrap 4 .

С помощью этого шаблона вы можете сразу начать использовать Bootstrap. Преимущество в том, что это легко начать, но недостатком является то, что вам не хватает настройки, которую предлагает Sass.

Установка Bootstrap 4 через NPM Мы собираемся начать наш проект прямо здесь, на этом этапе. Это потребует использования Node.js и его менеджера пакетов для установки самого загрузочного устройства вместе с несколькими другими пакетами. Это даст нам доступ к Sass, перезагрузке в реальном времени и т.д.

Во-первых, убедитесь, что вы установили Nodejs, открыв консоль или командную строку:

Если вы получите значение текущей версии, то все в порядке и можно продолжать, а если нет, то загрузите соответствующий установщик на основе вашей ОС и выполните процедуру установки с настройками по умолчанию.

Некоторые полезные сведения по настройке вы можете прочитать в моем посте - NPM Настройка Gulp и компиляции SASS

После завершения установки, перезагрузите консоль или командную строку, и у вас будет доступ к командам Node.js.

Давайте создадим папку для нашего проекта и перейдем в нее:

Mkdir bs4 && cd bs4

Затем мы запустим npm init, чтобы создать файл package.json, который просто хранит наши зависимости.

(Примечание. Флаг -y просто позволяет нам пропускать ответы на различные запросы и вместо этого предоставляет им значения по умолчанию)

Затем мы снова будем использовать npm для установки нескольких разных пакетов в зависимости от зависимостей разработки:

Npm install gulp browser-sync gulp-sass --save-dev

Gulp — это таск-менеджер для автоматического выполнения часто используемых задач.Вы увидите, как это работает, если вы новичок.

Brows-sync автоматически обновляет ваш браузер для нас при изменении файла.

gulp-sass позволяет собирать наш проект, интегрируя его с sass.

--save-dev - установить в отдельную папку. В нашем случае в папку проекта т.е - локально.

Затем мы будем использовать npm в последний раз, чтобы установить несколько пакетов в качестве регулярных зависимостей проекта:

Npm install bootstrap jquery popper.js --save

bootstrap - конечно же, это пакет начальной загрузки.

jquery - java script библиотека, используемая непосредственно самим bootstrap шаблоном

popper.js также используется бутстрапом. Он позволяет размещать всплывающие окна, всплывающие подсказки и т.д.

Теперь, настало время открыть наш проект в редакторе кода. Я буду использовать Sublime 3.

Мы должны создать папку src для нашего проекта и несколько вложенных в нее папок. Дерево выглядит так:

/src /assets /css /js /scss

Внутри / src также создайте 4 папки, как показано выше.

Затем создайте файл index.html внутри / src / со следующим содержимым:

Bootstrap 4 Layout< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>

Я импортирую шрифт Raleway вместе с FontAwesome для иконок. Затем я ссылаюсь на bootstrap.css и файл styles.css. Они еще не существуют, но мы скоро их создадим.

Давайте также создадим файл styles.scss внутри папки / src / scss /. Мы собираемся ввести быструю переменную и набор правил для того, чтобы убедиться, что компиляция Sass работает:

$bg-color: red; body { background: $bg-color; }

В корневой папке (папке проекта) создайте файл gulpfile.js и вставьте следующее содержимое:

Var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); // Compile sass into CSS & auto-inject into browsers gulp.task("sass", function() { return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"]) .pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); }); // Move the javascript files into our /src/js folder gulp.task("js", function() { return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream()); }); // Static Server + watching scss/html files gulp.task("serve", ["sass"], function() { browserSync.init({ server: "./src" }); gulp.watch(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload); }); gulp.task("default", ["js","serve"]);

Я опишу, что здесь происходит, исходя из задач, определенных выше:

default task - задача по умолчанию. Когда мы вводим gulp в командной строке, это говорит ему запускать как js , так и обслуживать задачи - task .

js task Это просто указание трех разных файлов javascript, которые хранятся в папке node_modules, которая создается при запуске npm install ... и перемещении их в нашу папку / src / js. Таким образом, мы можем включить их в наш HTML-файл выше, указав / src / js вместо папки node_modules.

serve task запускает простой сервер и наблюдает за нашими sass-файлами, и если они меняются, он вызывает задачу sass. Он также вызывает синхронизацию браузера при сохранении любого * .html-файла.

sass task Эта задача берет файлы bootstrap sass, так и наши пользовательские sass-файлы и компилирует их в обычный CSS, и сохраняет эти файлы CSS в нашей папке / src / css

Давайте запустим gulp в командной строке:

Это работает следующим образом:

• Вы используете m для margin или p для padding
• После m или p вы добавляете либо: t (top -), b (bottom -снизу), l (left -слева), r (right-cправa), x (левый и правый), y (верхний и нижний) или ничего для всех 4 сторон.
• После дефиса вы указываете размеры от 0 до 5 (5 - наибольшее количество интервалов).

Итак, в нашем примере, похоже, нам нужно использовать margin и bottom , чтобы оттолкнуть карты под ним.

На первом карточном контейнере добавьте mb-4:

Теперь исправлено:

Вот как вы можете легко обрабатывать оба поля и отступы в Bootstrap 4.

Давайте немного поработаем с использованием различных компонентов Bootstrap 4.

Работа с «Типографией» в Bootstrap 4 Давайте добавим раздел под нашими 3 столбцами в конце закрывающего для класса строк, который будет иметь 2 столбца.

Первый столбец будет использовать большинство столбцов (8), а правый столбец будет для вертикальной навигации в секции после этого.

An important heading

A sort of important subheading can go here, which is larger and gray.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

..vertical navigation shortly..

Bootstrap 4 имеет раздел «Типография» в своей Документации, который предоставит вам все вспомогательные классы на основе типа. Это довольно просто. Мы используем .lead , чтобы сделать акцент на подзаголовке под нашим элементом h3 .

В своей Документации также есть раздел «Утилиты текста», который предоставляет вам параметры выравнивания текста, преобразования, курсив и веса шрифтов.

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

Это приведет к тому, что текст, содержащийся в div, будет сосредоточен в центре на небольших видовых экранах и выровнен по левому краю на среднем и большем.

Bootstrap 4 Вертикальная навигация Мы добавим еще один элемент, прежде чем мы займемся настройкой. В нашей правой колонке, которую мы только что добавили, добавим вертикальную навигацию:

Secondary Menu

• Active < /li>
• Link
< li class="nav-item"> Link < li class="nav-item"> Disabled

Результат в браузере должен выглядеть так:

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

Кастомизационная настройка в Bootstrap 4 Теперь у нас есть довольно стандартный макет, который вы можете найти на большинстве веб-сайтов.

К счастью, Bootstrap 4 имеет прочную систему, которая позволяет легко настраивать простые элементы.

Откройте файл /src/scss/styles.scss и вставьте следующее:

// Variable Overrides // Bootstrap Sass Imports @import "node_modules/bootstrap/scss/bootstrap";

Согласно разделу Theming , вы можете выбрать либо включить все файлы Bootstrap 4 sass, либо добавить отдельные элементы в зависимости от ваших потребностей. Чтобы все было просто, мы просто импортируем все, как было выше.

Изменение цветов темы в Bootstrap 4 Возможно, наиболее распространенной проблемой является изменение цвета.

Если вы откроете файл node_modules / bootstrap / scss / _variables.scss, вы заметите, что в верхней части он упоминает систему цветов. В этом разделе вы увидите все переменные, которые вы можете переписать, чтобы соответствовать цветам.

Давайте изменим только основной цвет, изменим styles.scss на следующее:

// Variable Overrides $theme-colors: ("primary": #d95700);

Сохраните его, и это результат:

Очень просто!

Давайте также изменим цвет фона:

// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed;

Теперь результат выглядит следующим образом:

Хм, теперь наша секция jumbletron (hero) выглядит уродливой, так как она также была серой.

Мы можем настраивать пользовательские настройки для определенных элементов, используя инспектор в chrome или firefox, находим связанные классы элементов, которые хотим изменить, и изменяем их в нашем файле styles.scss.

В этом случае класс, ответственный за jumbotron, является .jumbotron . Давайте изменим цвет фона и добавим небольшую границу к вершине, чтобы имитировать dropshadow из navbar:

// Variable Overrides $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron { background-color: #ffffff !important; border-top: 3px solid rgb(219, 219, 219); }

Теперь результат:

Заключение Надеюсь, вам понравился этот курс / учебник по Bootstrap 4. Мы только слегка коснулись основ, и есть еще много чего вы можете узнать. На этом этапе все, что вам нужно изучить, должно быть простым, так как теперь вы понимаете основы и что почти все описано в документации.

Статья, в которой разберём сетку Bootstrap 4, которая используется для создания адаптивных макетов сайтов.

Назначение сетки

Сетка фреймворка Bootstrap 4 предназначена для создания адаптивных макетов сайта .

В основу сетки Bootstrap 4 положены CSS Flexbox и медиа запросы (CSS media queries). Их изучение позволит вам более подробно разобраться с тем, как работает сетка Bootstrap 4.

Адаптивный макет – это такой макет, вид которого может изменяться в зависимости от того, какую ширину основной области (viewport) имеет браузер. Это означает, что при одних значениях ширины viewport адаптивный макет может выглядеть одним образом, а при иных – совершенно по-другому.

В Bootstrap 4 изменения вида макета реализовано посредством медиа запросов. Каждый медиа запрос в Bootstrap строится на основании минимальной ширины viewport браузера (breakpoint, контрольной точки, названии устройства).

Фреймворк Bootstrap 4 имеет 5 контрольных точек или названий устройств (без обозначения, sm , md , lg , xl), и, следовательно, позволяет создать макет, который на каждой из них может выглядеть по-разному.

В Bootstrap 4 по сравнению с Bootstrap 3 изменено количество контрольных точек. В Bootstrap 3 их было четыре: xs , sm , md и lg .

Элементы сетки

Сетка Bootstrap 4 состоит из следующих элементов:

• Обёрточные контейнеры (container и container-fluid);
• Ряды (row);
• Адаптивные блоки (col).

Обёрточные контейнеры

Обёрточный контейнер - это элемент сетки Bootstrap 4, с которого начинается создание адаптивного макета страницы или некоторого блока. Другие элементы сетки (ряды и адаптивные блоки) должны быть размещены внутри него.

В Bootstrap 4 имеются 2 вида обёрточных контейнеров: адаптивно-фиксированный и адаптивно-резиновый.

HTML-разметка адаптивно-фиксированного контейнера:

...

HTML-разметка адаптивно-резинового контейнера:

...

Первый (адаптивно-фиксированный) контейнер используется тогда, когда необходимо создать макет с шириной, которая должна оставаться постоянной в пределах определённой ширины области просмотра (viewport) браузера.

Зависимость ширины адаптивно-фиксированного контейнера от ширины viewport браузера приведена в таблице:

Это означает, что адаптивно-фиксированный контейнер будет иметь:

• 100% ширину при ширине viewport до 576px;
• 540px при ширине viewport от 576 до 768px;
• 720px при ширине viewport от 768 до 992px и т.д

В горизонтальном направлении фиксированный-адаптивный контейнер позиционируется по центру, это осуществляется в bootstrap.css посредством CSS свойств margin-left: auto и margin-right: auto .

Второй (адаптивно-резиновый) контейнер применяется тогда, когда вам необходимо создать полностью гибкий макет страницы или некоторого блока. Данный контейнер имеет 100% ширину при любой ширине viewport.

Кроме этого обёрточные контейнеры (container и container-fluid) имеют ещё внутренние отступы (padding) слева и справа по 15px. Установка внутренних отступов обёрточным контейнерам осуществляется в CSS файле Bootstrap 4 с помощью свойств padding-left: 15px и padding-right: 15px .

При создании макета с помощью сетки Bootstrap 4 не помещайте одни обёрточные контейнеры внутри других.

Ряды

Ряд – это специальный элемент сетки (row), который используется при создании макета в следующих случаях:

• между контейнером и адаптивными блоками, которые надо в него поместить;
• между одним и другими адаптивными блоками, которые надо поместить в первый адаптивный блок.

HTML-разметка ряда:

...

В отличие от Bootstrap 3, в которой ряд выступал только для компенсации левых и правых внутренних padding полей обёрточных контейнеров или адаптивных блоков, в Bootstrap 4 он играет очень важную роль . Это связано с тем, что данная сетка построена на CSS Flexbox . В этой сетки он выступает в роли flex-контейнера для flex-элементов (адаптивных блоков). Т.е. если вы будете использовать адаптивные блоки вне ряда, они работать не будут. В Bootstrap 4 адаптивные блоки должны обязательно находиться в блоке с классом row .

Компенсация внутренних padding полей осуществляется так же как и в Bootstrap 3, за счёт отрицательных левых и правых внешних отступов, равных 15px (margin-left:-15px и margin-right:-15px).

Пример того, как происходит компенсация padding полей:

container (+15px) -> row (-15px) -> col (+15px) -> контент container-fluid (+15px) -> row (-15px) -> col (+15px) -> row (-15px) -> col (+15px) -> контент

В итоге отступ от левого и правого краёв обёрточного контейнера до контента всегда будет составлять 15px.

Кроме этого адаптивные блоки логически не связанные между собой не обязательно помещать в один ряд в рамках какого-то обёрточного контейнера или другого адаптивного блока. Наиболее корректно их разбить на отдельные логические группы и поместить каждую из них в отдельный ряд (row).

Например:

... … … … ...

Адаптивные блоки

Адаптивные блоки – это основные строительные элементы адаптивного макета, именно от них будет зависеть, как будет выглядеть макет веб-страницы на разных контрольных точках (без обозначения, sm , md , lg и xl).

Создаётся адаптивный блок очень просто: с помощью добавления одного или нескольких классов col-?-? к необходимому HTML элементу.

В классе col-?-?> вместо первого знака вопроса указывается название контрольной точки : без обозначения, sm , md , lg или xl . Вместо второго знака вопроса указывается ширина адаптивного блока , которую он должен иметь на указанной контрольной точке. Ширина адаптивного блока задаётся в относительной форме с помощью числа от 1 до 12 (колонок Bootstrap).

Данное число определяет, какую часть ширины будет занимать адаптивный блок на указанной контрольной точке от ширины родительского блока, т.е. ряда. Ширина ряда в числовом выражении (колонках Bootstrap) равна 12.

Например, блок с классом col-md-4 на контрольной точке md будет занимать 4/12 ширины ряда, т.е. 33,3% (т.е. 4/12*100% = 33.3%).

Адаптивные блоки, также как и контейнеры имеют внутренние отступы слева и справа по 15px. Данные отступы у адаптивных блоков фреймворка Bootstrap 4 устанавливаются с помощью CSS свойств padding-left: 15px и padding-right: 15px .

Размещать адаптивные блоки необходимо в ряду. Т.е. у любого адаптивного блока в качестве родителя должен быть блок с классом row .

Например, рассмотрим, какую ширину на каждом устройстве будет иметь следующий адаптивный блок:

...

Данный адаптивный блок будет иметь:

• до sm (на xs) ширину, равную 12 колонкам Bootstrap (т.е. 12/12*100%=100% от ширины ряда);
• на устройстве sm ширину, равную 9 колонкам Bootstrap (т.е. 9/12*100%=75% от ширины ряда);
• на устройстве md ширину, равную 7 колонкам Bootstrap (т.е. 7/12*100%=58,3% от ширины ряда);
• на устройстве lg ширину, равную 5 колонок Bootstrap (т.е. 5/12*100%=41,6% от ширины ряда);
• на устройстве xl ширину, равную 3 колонкам Bootstrap (т.е. 3/12*100%=25% от ширины ряда).

Кроме этого при указании ширины адаптивному блоку для какой-то контрольной точки, она будет распространяться не только на эту точку, но и на все следующие , если они не заданы.

Адаптивный блок на устройствах md и lg будет иметь ширину, равную 6 колонкам Bootstrap: (12) -> sm(6) -> md -> lg -> xl(3) .

Адаптивный блок на устройстве sm будет иметь ширину, равную 8 колонкам Bootstrap, а на устройствах lg и xl - ширину, равную 4 колонкам Bootstrap: (8) -> sm -> md(4) -> lg -> xl .

Адаптивный блок на всех устройствах будет иметь ширину, равную 6 колонкам Bootstrap: (6) -> sm -> md -> lg -> xl .

Адаптивные блоки без колонок

В сетку Bootstrap 4 добавлены специальные классы col , col-sm , col-md , col-lg , col-xl , col-auto , col-sm-auto , col-md-auto , col-lg-auto и col-xl-auto .

Первая группа классов (col , col-sm , col-md , col-lg , col-xl) предназначена для создания адаптивных блоков, ширина которых будет зависеть от свободного пространства линии. Распределение не занятой ширины (свободного пространства) линии между всеми такими блоками осуществляется равномерно. Кроме этого данные адаптивные блоки перед распределением свободного пространства линии (по умолчанию) имеют нулевую ширину.

Рассмотрим несколько примеров.

1. Создание в ряду 5 адаптивных блоков с одинаковой шириной.

1/5 2/5 3/5 4/5 5/5

Расчёт ширины:

• свободное пространство линии - 100% (т.к. их ширина равна 0);
• ширина каждого адаптивного блока - 20% (100%/5);

2. Ширина блоков с классом col при наличии в линии адаптивного блока с количеством колонок.

? 7 колонок ? ?

Расчёт ширины:

• свободное пространство линии - 41,67% ((12-7)/12*100%);
• ширина каждого адаптивного блока, кроме col-7 - 13,89% (41,67%/3).

В некоторых версиях браузерах Safari есть ошибка при использовании такой разметки, она может быть разбита на несколько линий.

Исправить это можно 2 способами:

• посредством установки адаптивным блокам границы.col { border: 1px solid transparent; }
• с помощью задания адаптивным блокам CSS-свойства flex-basis .col { flex: 1 0 20%; }

Кроме этого, сетка Bootstrap 4 позволяет располагать адаптивные блоки без указания количества колонок на нескольких линиях.

... ... ... ...

Данное действие осуществляется посредством добавления в разметку перед адаптивным блоком, который должен начинаться с новой линии, пустого div элемента с классом w-100 .

Если данное действие необходимо использовать только для некоторых контрольных точек, то к нему (классу w-100) дополнительно нужно ещё добавить служебные отзывчивые классы Bootstrap 4.

В этом примере переноситься на новую линию адаптивные блоки будут только на устройствах, имеющих крохотный или маленький viewport.

... ... ... ...

Вторая группа классов (col-auto , col-sm-auto , col-md-auto , col-lg-auto и col-xl-auto) предназначена для создания адаптивных блоков, ширина которых будет определяться в соответствии с их содержимым.

Например:

(1) (2) - ширина на контрольных точках md, lg и xl будет определяться на основании содержимого (3)

В результате:

• на xs и sm адаптивные блоки будут располагаться вертикально (один под другим) и занимать всю ширину ряда;
• на md адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то адаптивные блоки 1 и 3 поделят его между собой поровну; если же блок 2 будет занимать всю ширину линии, то картина будет такая же, как на контрольных точках xs и sm ;
• на lg и xl адаптивный блок 2 будет иметь ширину, необходимую для отображения своего содержимого; если блок 2 не будет занимать всю ширину ряда, то блок 3 будет занимать ширину, равную 2 колонкам Bootstrap, а блок 1 - всю оставшуюся ширину ряда; если блок 2 будет занимать всю ширину ряда, то разметка будет такая же, как на xs и sm , только 3 блок на 3 линии будет иметь ширину, равную 2 колонкам Bootstrap.

Расположение адаптивных блоков в ряду

Адаптивные блоки в ряду по умолчанию располагаются горизонтальными линиями. В пределах горизонтальной линии адаптивные блоки выстраиваются последовательно слева направо. В одну горизонтальную линию могут поместиться адаптивные блоки с суммарным числом колонок не более 12. Адаптивные блоки, которые не помещаются в текущую линию переходят на следующую.

(1) (2) (3) (4)

Рассмотрим ещё один пример, в котором адаптивные блоки имеют различную ширину на различных контрольных точках:

Основной принцип верстки макета

Основной принцип верстки макета веб-страницы на сетке Bootstrap 4 заключается во вкладывании одних адаптивных блоков в другие.

При этом ширина адаптивных блоков это всегда относительная величина, которая задаётся в колонках Bootstrap и зависит только от ширины родителя, т.е. ряда.

Размещать контент веб-страницы следует только в адаптивных блоках.

Например, в имеющийся макет, а именно в адаптивный блок col-8 вложим ещё 2 блока:

... ...

Для этого предварительно необходимо в блок col-8 положить ряд (контейнер для адаптивных блоков):

... ... Bootstrap 4 - Вставка ряда в содержимое адаптивного блока col-8

После этого добавим 2 адаптивных блока в ряд:

... ... ... Bootstrap 4 - Вставка адаптивных блоков в ряд

Выравнивание адаптивных блоков

Выравнивания адаптивных блоков в горизонтальном и вертикальном направлении осуществляется в Bootstrap 4 с помощью служебных flex-классов.

Вертикальное выравнивание адаптивных блоков

Выравнивание адаптивных блоков в пределах линии ряда по вертикали осуществляется посредством одного из следующих классов, который необходимо дополнительно добавить к row:

• align-items-start (относительно начала линии);
• align-items-center (по центру);
• align-items-end (относительно конца).

Например, выровняем все адаптивные блоки по центру линии ряда:

1/2 2/2

По умолчанию адаптивные элементы занимают всю высоту линии ряда, в которой они расположены.

Выравнивание какого-то определённого адаптивного блока по вертикали в пределах линии может осуществляться одним из следующих классов:

• align-self-start (относительно начала линии);
• align-self-center (по центру);
• align-self-end (относительно конца).

Данные классы необходимо добавлять к адаптивным блокам, а не к ряду.

Например, выравниваем адаптивный блок 2 по нижнему краю линии:

(1) (2)

Горизонтальное выравнивание адаптивных блоков

Для выравнивания адаптивных блоков в горизонтальном направлении предназначены следующие классы:

• justify-content-start (относительно начала линии ряда - по умолчанию);
• justify-content-center (по центру);
• justify-content-end (относительно конца линии);
• justify-content-around (равномерно, с учётом пространства перед первым и последним адаптивным блоком);
• justify-content-between (равномерно, с одинаковым пространством между адаптивными блоками).

Например, распределим адаптивные блоки в горизонтальном направлении равномерно:

(1) (2)

Адаптивная разметка без полей

Внутренние поля (padding) адаптивных блоков и внешние отрицательные отступы (margin) рядов можно убрать, если к последним (т.е. к row) добавить класс no-gutters .

... ... ...

Обратите внимание, что данный класс (no-gutters) действует только на адаптивные блоки, которые непосредственно размещены в этом ряду. Т.е. на адаптивные блоки, которые не имеют в качестве родителя данный ряд, CSS свойства по убиранию padding не распространятся.

В Bootstrap 4 смещение адаптивных блоков можно выполнить с помощью:

• классов offset (на определённое количество колонок);
• служебных (утилитных) margin классов .

Классы offset

Классы offset предназначены для смещения адаптивных блоков вправо на определённое количество колонок.

Данные классы имеют следующий синтаксис:

Оffset-{1} или offset-{breakpoint}-{1}

{breakpoint} – контрольная точка, начиная с которой к данному блоку будет применено смещение (если она не указана, то смещение будет применено, начиная с самых крохотных устройств).

{2} – величина смещения, указываемая с помощью количества колонок Bootstrap.

В качестве примера установим смещение адаптивным блокам так, как это показано на рисунке.

(1) (2) (1) (2) (1)

Смещение с помощью margin классов

В четвертой версии Bootstrap устанавливать смещение адаптивным блокам также можно с помощью margin отступов (margin-left: auto и (или) margin-right: auto). Эта вариант смещения появился благодаря тому, что сетка в новой версии Bootstrap (4) основывается на CSS Flexbox .

Данный вариант смещения (с помощью margin классов) используют, когда блоки необходимо сместить относительно друг от друга не которую переменную величину .

В Bootstrap 4 для более удобного и адаптивного задания блокам margin отступов (margin-left: auto и (или) margin-right: auto) можно использовать классы ml-auto , mr-auto , ml-{breakpoint}-auto и mr-{breakpoint}-auto .

Bootstrap 4 - Смещение адаптивных блоков

(1) (2) (1) (2) (3) (1) (2)

Изменение визуального порядка следования адаптивных блоков

По умолчанию адаптивные блоки визуально отображаются в том порядке, в котором они расположены в HTML коде.

Изменить визуальный порядок следования адаптивного блока в Bootstrap 4 выполняется посредством класса order-{visual_number} . Этот класс предназначен для контрольной точки xs . Если порядок элемента нужно определить не для контрольной точки xs , а для sm , md , lg или xl , то используется следующий вариант данного класса:

Order-{breakpoint}-{visual_number}

Вместо {visual_number} необходимо указать число от 1 до 12.

Это число и определяет то, как элементы будут визуально следовать на странице. А именно все адаптивные элементы будут визуально следовать в порядке возрастания этих номеров. Если элементу не установлен класс order , то по умолчанию он имеет значение 0.

Например, изменим порядок следования двух адаптивных блоков:

Первый (не упорядоченный, без класса order-) Второй, но будет отображаться последним Третий, но будет отображаться вторым

Ещё один пример (с использованием адаптивных классов order):

Первый (на xs, sm будет отображаться вторым) Второй (на xs, sm будет отображаться первым)

Кроме чисел (по умолчанию от 1 до 12) можно ещё использовать слова first и last . Эти классы (order-first , order-{breakpoint}-first , order-last , order-{breakpoint}-last) позволяют соответственно визуально сместить элемент в начало или конец.

Классы order-first и order-{breakpoint}-first оказывают своё действие посредством установки элементу CSS свойства order со значением -1 (order: -1), а классы order-last и order-{breakpoint}-last - CSS свойства order со значением 13 (order: $columns + 1).

Перепишем вышеприведённый пример с использованием классов order , в которых используются ключевые слова first и last:

Первый (на xs, sm будет отображаться последним) Последний (на xs, sm будет отображаться первым)

Пример с использованием классов order как с числом, так и со словами first и last:

#1 (XS), #LAST (SM), #1 (MD, LG и XL) #2 (XS), #7 (MD, LG и XL) #3 (XS), #6 (MD, LG и XL) #4 (XS), #5 (MD, LG и XL) #5 (XS), #4 (MD, LG и XL) #6 (XS), #3 (MD, LG и XL) #7 (XS), #2 (MD, LG и XL) #8 (XS), #FIRST (SM), #8 (MD, LG и XL)

Пример адаптивной вёрстки на сетке Boostrap 4

Создадим адаптивную разметку блока веб-страницы, приведённого на рисунке, с помощью сетки Bootstrap 4. Bootstrap 4 - Пример адаптивной разметки блока

1. Создаём разметку блока для мобильных устройств (xs).

(1) (2) (3) (4) (5)

2. Настраиваем разметку для контрольной точки sm:

(1) (2) (3) (4) (5)

3. Устанавливаем блокам количество колонок, которые они должны иметь на устройствах md и lg:

(1) (2) (3) (4) (5)

4. Создаём разметку для xl:

(1) (2) (3) (4) (5)

Убираем ненужные контрольные точки у адаптивных блоков:

(1) (2) (3) (4) (5)

Кроме этого, изначально в Bootstrap 4 адаптивный блок имеет ширину, равную 100%. Это позволяет при создании адаптивных блоков не указывать количество колонок, если их первоначальная ширина должна быть равна 12 колонок (100%).

(1) (2) (3) (4) (5)