Третья часть масштабной статьи о четвертой версии популярного фреймворка Bootstrap. В этой части будет рассмотрена работа с Bootstrap 4 на практике.
Ха-ха! Именно эта часть статьи волнует меня больше всего. В ней мы создадим реально классный проект. По окончанию у вас должна быть успешно создана начальная страница загрузки.
Если вы новичок в Bootstrap, я позаботился о том, чтобы вы поняли все необходимые принципы для построения нашего приложения.
Для более опытных разработчиков я в своих примерах выделил некоторые новые возможности Bootstrap 4.
Кроме того, в примерах будет показано как используется Flexbox внутри Bootstrap 4. Также некоторые, казалось бы, простейшие вещи как выравнивание колонок и центрирование блочных элементов в этой версии фреймворка обрабатываются по-разному.
И это всего несколько моментов, которые будут разобраны на следующих примерах.
Для того чтобы быстро начать разработку, придумали всевозможные стартовые решения со всеми необходимыми настройками. Я буду использовать CodePen для нашей демки. Собственно, это все что вам необходимо для создания нашего приложения.
Первым делом мы сосредоточим внимание на отображении нашей начальной страницы на экране. Экран будет заполнен «небольшим» фоновым изображением, блоком текста и CTA (call to action)-кнопкой.
Кроме того, мы будем в первую очередь уделять внимание мобильной версии нашей страницы, поэтому важно увидеть, как этот дизайн будет выглядеть на мобильных устройствах.
Ниже приведен пример макета мобильной версии:
Как можно видеть из этого изображения, все выглядит практически так же, как и для обычной версии. Наша CTA-кнопка и блок текста остались выровненными по горизонтали к началу страницы.
Если вы работаете локально, то вам необходима следующая разметка для добротного Bootstrap-проекта:
Во-первых, рассмотрим тег <meta>:
Он предназначен для корректного отображения разрабатываемой страницы на мобильных устройствах. Если вы определите мультимедийные запросы без тега <meta>, то изображение может быть не таким, каким вы ожидаете его увидеть.
Интересно, что делают атрибуты content и initial-scale? Чтобы это узнать, посмотрите ответ на stackoverflow.
Во-вторых, рассмотрим тег <link>:
Представленный выше тег <link> абсолютно не отличается от таких же тегов <link>, которые вы использовали ранее. Он включает в себя атрибут href, который содержит ссылку на cdn Bootstrap-а.
Атрибут integrity проверяет источник, откуда загружается cdn, и не влияет на загружаемый файл. Это мера безопасности, обеспечивающая загрузку того, что вы ожидаете.
Атрибут crossorigin необходим, когда запрос загружается с использованием «CORS».
На этом этапе можно с уверенностью сказать, что вы освоили базовую разметку. Также обратите внимание, что приведенная выше разметка не содержит ссылок на JavaScript-файл. Это сделано специально. Позже мы рассмотрим добавление интерактивности с помощью JavaScript.
Я буду использовать CodePen для более простой установки. В CodePen вы можете добавить <meta> теги внутри модального окна html-настроек. Взгляните на следующий скриншот:
Добавьте meta и link теги в раздел «Stuff for <head>».
Давайте пойдем вперед и внутри html напишем следующее:
Если на вашем экране отобразилась надпись «Привет, мир», то вы готовы продвигаться дальше без каких-либо затруднений.
Если вы раньше работали с Bootstrap, то должны знать, что можете быстро потерять контроль над разметкой вашего проекта. По этой причине я использую несколько Bootstrap-шаблонов, которые отлично работают. Попробуйте их.
Когда вы посмотрите на окончательный дизайн, то поймете, что контент разбит на категории.
Из них первый раздел с вызовом действий. Далее идет раздел с разметкой приложения и раздел, в котором освещаются некоторые особенности бизнеса. Последний – раздел отзывов. Думаю, вы уловили суть.
Правило номер один – это разделение уровней контента с помощью тега <section> или любого другого семантически подходящего HTML5-тега. Почему? Использование Bootstrap по определению подразумевает большое количество div-ов в вашей разметке. За счет использования тега <section> ваша разметка становится более управляемой.
После этого присвойте каждому тегу уникальный id.
Причина, по которой я выбрал именно id, связана со спецификой и наличием уникального идентификатора. Далее вы поймете почему это так важно.
Итак, у нас есть 8 тегов <section>, которые готовы к тому, чтобы их правильно использовали.
Что мы имеем? section, который составляет начальный экран пользователя. В него входят наше сообщение и CTA-кнопка, которые расположены вертикально по центру и выровнены по горизонтали к началу раздела (section).
Применим знания Bootstrap-сетки к нашему только создающемуся проекту.
Так выглядит начальный экран на разных устройствах.
Начальный экран будет иметь собственную внутреннюю структуру:
Итак, теперь у нас есть базовая структура.
Обратите внимание на использование класса колонок .col-12: это позволяет нашему div-у заполнять все 12 колонок Bootstrap-сетки, что является всей ее шириной.
Далее нужная разметка, которую мы помещаем в наш div.col-12:
И что мы имеем? Страницу без ничего:
Есть несколько моментов, которые мы должны пофиксить, чтобы сделать интерфейс пользователя более привлекательным:
- Стилизация section#introduction. Раздел introduction нуждается в фоновом изображении, и он должен заполнять все пространство экрана пользователя.
Правильное позиционирование блока с контентом. Он в свою очередь состоит из текстовых блоков h1 и p, что содержит “Coding on Steroids…”, и должен быть идеально выровнен вертикально в отношении центра.
- Стилизация заголовка и вводного абзаца. Элементы h1 и p нуждаются в стилизации вне зависимости от всего остального.
- Стилизация CTA-кнопки. Кнопка должна быть читабельной и чётко выраженной. Как и другие, элемент button стилизуется.
Расширение на больших экранах. Блок с контентом НЕ должен занимать всю доступную ширину экрана, а брать только 50% от неё (если только это не мобильное устройство).
Для добавления фонового изображения к section#introduction вам необходимо написать пользовательский стиль, как показано ниже:
Это добавит нашему разделу полупрозрачное фоновое изображение с мягким градиентом. Если вы все еще не уверены в том, что делает код выше, то следующая иллюстрация поможет в этом разобраться:
Пример установки градиента и фонового изображения на элемент. В зеленой рамке задается градиент, а в красной задается фоновое изображение и устанавливается свойство отсутствия повторов.
section#introduction должен занимать все пространство экрана. В Bootstrap нет класса для решения этой задачи, поэтому нам необходимо написать свой:
Теперь добавим класс к разделу:
Что я здесь сделал?
Вы могли заметить, что я добавил класс .fill-viewport к элементу div.row, а не ко всему контейнеру, div.container или section#introduction.
Сделано это преднамеренно. Каждый нужный вспомогательный класс, применяемый к содержимому контента, должен находится в .row (за исключением особых случаев). Также данный подход делает разметку аккуратной, без каких-либо лишних названий классов, которые присутствуют повсюду.
Используя все это, ваш раздел (section) будет выглядеть предельно хорошо:
Как вы можете заметить, блок с контентом имеет плохое позиционирование. Сделаем выравнивание вертикально в отношении центра страницы.
Каждый столбец в Bootstrap четвёртой версии по умолчанию является flex-container. Это предоставляет возможности, которых не было в предыдущих версиях фреймворка. Поскольку.row является flex-container, то мы можем использовать вспомогательный Bootstrap-класс align-items-center, и каждый flex-container будет выровнен по центру.
Примерно такая реализация:
Добавляем класс к элементу .row.
Ниже приведен результат:
В Bootstrap 4 есть еще много других вспомогательных Flexbox-классов.
Приступим к стилизации элементов h1 и p.
Для того чтобы стилизовать данные элементы сделайте следующее:
Как вы уже знаете, класс text-white сделает текст белым, а класс .lead придаст нашему абзацу немного другой вид относительно всех остальных абзацев. Выглядит хорошо, но я хочу, чтобы абзац имел чуть более тусклый оттенок. Для этого напишем вспомогательный класс:
Теперь текст слегка прозрачно-белого цвета.
Используем этот класс на вводном абзаце:
У вас должно получиться следующее:
Обратите внимание, как мы абстрагируем крошечные функциональные возможности в многоразовые CSS-классы. Это важно для повторного использования.
Кнопки в Bootstrap стилизуются с помощью класса .btn. Есть несколько вариантов с соответствующими цветами. Например, класс .btn-primary и .btn-secondary дадут голубой и серый цвета. Документация по кнопкам в Bootstrap.
Для стилизации нашей ссылки выполните следующее:
В настоящий момент у нас есть section, который отлично выглядит на мобильных устройствах, но не очень хорошо на больших девайсах. Исправим это. Мы определяли ширину контента так:
Чтобы на больших устройствах была занята только половина колонок, нужно сделать следующее:
Этим мы подводим итог разработки первоначального экрана пользователя.
Ниже приведен пример как будет выглядеть результат на больших, средних и маленьких устройствах:
На мобильных устройствах пользователь будет видеть колонку на всю ширину экрана, внутри которой немного важного текста. На средних устройствах, таких как планшеты, будет отображаться большое количество текста и маленькое превью приложения. Для этого создаются две равные по ширине колонки.
На больших устройствах отображено еще больше текста, но также останется превью приложения.
Приступим к созданию.
Создадим мобильную версию приложения. Заполните раздел section#info–1 следующей разметкой:
Рассмотрим .row:
Внутри row у нас есть следующая колонка:
Класс col-12 обеспечивает то, что наш div займет всю ширину, то есть 12 колонок по умолчанию. Здесь также можно наблюдать два дополнительных класса. Класс pt-5 добавляет внутренний отступ сверху нашего div, а класс align-items-center обеспечивает выравнивание вертикально по центру всех flex-элементов.
Следующий блок кода представляет собой блоки текста:
Класс text-uppercase является вспомогательным Bootstrap-классом, использование которого дает прописной текст. Класс text-black-40 – еще один крошечный класс, использование которого даёт тексту черный цвет и делает его на 40% прозрачным.
После всего этого у вас должно получиться следующее:
Для средних устройств нам нужно две колонки. Одна для размещения макета/превью нашего приложения, а вторая для блока с текстом.
В приведённом ниже блоке кода показано решение. Пойдем дальше и добавим внутрь нашего ряда изображение, но оно должно быть над блоком с текстом.
Новый блок кода, содержащий наше изображение, приведён ниже:
Мы можем наблюдать еще некоторое количество новых вспомогательных Bootstrap-классов. Рассмотрим их более детально.
Классы, название которых начинается с d- представляют множество классов, отвечающих за работу с экраном. Класс d-none скроет любой элемент, к которому будет применен, в то время как класс d-block покажет элемент, применив к нему CSS-свойство display: block. В свою очередь класс align-self-end вертикально выравнивает элемент к низу flex-контейнера. Здесь и проявляются некоторые преимущества Flexbox!
Сейчас у нас есть две колонки, и каждая имеет класс .col. Следующее изменение заключается в том, что вместо класса col-12 мы использовали класс .col:
Когда у вас есть какое-либо количество элементов, имеющих класс .col, то доступную ширину они поделят между собой в равных пропорциях.
Ниже приведен итоговый результат:
Мы практически закончили с данным разделом, осталось только исправить отображение дополнительных блоков с текстом на больших устройствах.
В силу того, что колонки могут быть вложенными, мы можем одну колонку поместить в другую для размещения текстовых блоков рядом:
По умолчанию оба div элемента внутри ряда (row) скрыты благодаря классу d-none. Следовательно, они не будут отображаться на мобильных устройствах. Класс .col отвечает за то, что обе колонки занимают одинаковое пространство. Но второй блок с текстом будет показан только на больших устройствах за счет класса .d-lg-block.
За счет класса d-md-block первый текстовый блок также будет виден на больших устройствах. Пока у нас вот такой результат:
Третий раздел очень похож на второй раздел, о котором мы говорили ранее. Однако вот небольшой список едва заметных различий:
- Использование тега <pre>;
- Изменён порядок колонок при отображении на мобильных устройствах.
Как видно из примера, на мобильных устройствах сперва появится блок с кодом, на больших девайсах дисплей переключается на последний блок. Далее приведен весь код этого раздела:
Раздел начинается с уже привычной нам разметки:
Я всегда присваиваю разделам id. Также в каждом row есть по две колонки:
Обе колонки занимают 12 доступных колонок Bootstrap-сетки. Следовательно, они будут располагаться одна под другой вертикально.
На средних устройствах и выше колонки займут равное количество пространства:
Класс .bg-dark даёт разделу темный задний фон.
Класс align-items-center является вспомогательным Flexbox-классом, задача которого это выравнивание контента ряда вертикально по центру. Также не забывайте, что каждый ряд является flex-контейнером.
Класс fill-80-viewport крошечный:
Он отвечает за то, что раздел займет только 80% высоты экрана.
Итак, далее то, что мы еще не обсуждали:
Допустим, вы знакомы с устройством работы Flexbox. Свойство order определяет визуальный порядок отображения flex-элементов. Элемент с наименьшим значением свойства order отобразится первым, а с наибольшим значением последним.
Классы название которых начинается с order- являются попыткой воссоздать подобное поведение. Эти классы являются вспомогательными Flexbox-классами в Bootstrap, в названии классов может быть любое целочисленное значение, например, order-5 или order-10.
Теперь вам должно быть понятно следующее:
По умолчанию тег <pre> отображен первым, а затем уже div. Дело в том, что сначала отображается order-1, потом order-2. Соотносим это с принципом увеличения значения приоритета и получаем правильную работу. Но на больших девайсах сперва отобразится контент внутри div-а, затем контент внутри тегов <pre>.
Раздел состоит из одной колонки. Расположение колонки зависит от используемого устройства. На больших устройствах она располагается справа, а на маленьких устройствах она имеет выравнивание к началу страницы. Далее приведена разметка этого раздела:
Классы align-items-center и justify-content-end делают ровно то, что написано в их названии. Наша колонка, являющая flex-элементом, будет выровнена вертикально по центру и горизонтально к концу.
По умолчанию колонка занимает все доступное пространство, благодаря классу .col-12. Тем не менее, на средних устройствах и выше колонка будет занимать только 50% доступной ширины.
Класс basis-md-50 также небольшой:
Когда колонка занимает 100% доступной ширины, она не может дойти до конца страницы. Лишь когда ширина колонки уменьшается до 50%, все становится понятно.
Данный раздел содержит список значков, которые выровнены горизонтально по центру внутри раздела.
Разметка состоит из списка иконок, выполненных в отличном иконочном шрифте.
Класс .text-center отвечает за то, что иконки всегда будут выровнены горизонтально по центру. Сам раздел состоит из множества классов для работы с отступами. В разметке выше можно увидеть следующие классы: my-3, mx-4 и py-5.
Раздел состоит из заголовка и пары объектов, которые выровнены в каждой из колонок.
Полная разметка раздела представлена ниже:
Как и в других разделах, этот имеет свой id и вложенный контейнер:
Но также содержит два вложенных ряда:
Первый ряд с областью заголовка:
Второй состоит из списка иконок:
Ниже приведена разметка первого ряда:
По умолчанию ряд занимает всю ширину Bootstrap-сетки. Но на средних устройствах он занимает только половину за счет использования класса col-md-6. Также ряд выровнен горизонтально по центру благодаря mx-auto.
Второй ряд (row) состоит из списка изображений и соответствующего им текста:
По умолчанию колонки занимают все доступное пространство, но на средних устройствах и выше это лишь треть пространства, а текст и изображения выровнены по центру: все за счет использования классов col-12, col-md-4 и text-center.
Класс text-info на теге <strong> придает тексту цвет морской волны.
Как можно заметить, раздел состоит из сетки с ценами.
Ниже приведена полная разметка этого раздела:
Раздел начинается с вложенного контейнера и двух рядов:
Класс bg-light добавляет светлый фон разделу. Контейнер настроен таким образом, чтобы заполнить по крайне мере 80% доступной высоты области просмотра пользователя:
Внутри первого ряда находится область заголовка:
Заголовки вложены в колонку, которая занимает все доступное пространство на мобильных устройствах и половину доступного пространства на средних устройствах и выше. Это достигается за счет использования классов col-12 и col-md-6. Кроме того, текст внутри колонки выровнен по центру благодаря классу text-center и занимает всю доступную ширину колонки благодаря mx-auto.
Тут также присутствуют написанные классы text-black-40 и text-black-70:
Внутри второго ряда расположилась таблица с ценами.
Каждая из этих таблиц сделана по следующей разметке:
Выше представлен пример таблицы с ценами, в которой выделены все её составляющие. Таблица состоит из заголовка, изображения, неупорядоченного списка возможностей и CTA-кнопки.
Дублируем три раза и получаем сетку из 3 колонок с ценами. Видите, насколько управляемой стала разметка?
Большинство классов в этой разметке вам уже знакомы, но давайте взглянем на следующие:
list-unstyled является Bootstrap-классом, который убирает внутренний отступ и стилизацию списка, что по умолчанию присутствует в неупорядоченном списке ul.
Также обратим внимание на следующие:
Класс list-border-y – это класс для добавления границ сверху и снизу элемента списка:
Ниже приведен пример добавленных границ со значением 1px:
Еще один вспомогательный класс – list-border-black-20, который добавляет прозрачно-черный цвет к границам. Класс не является встроенным в Bootstrap, поэтому нам самим необходимо его написать:
Разметка этого раздела:
Теперь проанализируем данный блок кода.
Наш раздел начинается с вложенного контейнера и ряда:
Класс bg-dark добавляет футеру тёмный фон. Внутри этой колонки есть еще 4 дополнительные, как показано ниже:
Именно эти 4 колонки составляют наш футер:
Каждая из колонок займет все доступное место внутри своего ряда при отображении на мобильных устройствах (col-12). На средних устройствах и выше первая колонка будет занимать половину доступного пространства (col-md-6), в то время как остальные колонки “захватят” по 1/3 от оставшейся половины (col-md-2).
Внутри первой колонки располагается неупорядоченный список и набор элементов списка. Класс list-unstyled по умолчанию добавляет отступы и убирает стиль с элемента ul:
Оставшиеся колонки также содержат неупорядоченный список и набор элементов списка:
Да, это полезный материал, но мы не успели затронуть некоторые моменты:
- Введение в Sass/SCSS.
- Как персонализировать Bootstrap с помощью Sass.
- Как использовать инструмент Bootstrap CLI для быстрой настройки.
- Как создать свой процесс сборки программного продукта с помощью Gulp и Webpack.
- Как создать профессиональную Bootstrap-тему (например, тема панели администрирования).
- Как использовать Bootstrap 4 в связке с ReactJS.
Если вы хотите стать ведущим разработчиком (senior developer), старайтесь охватить изучение самых различных технологий, так как это поможет существенно расширить уровень знаний.