Обзор инструментов Bootstrap для создания адаптивного сайта

Создать простой сайт можно «с нуля», используя для визуализации валидную верстку HTML и стили оформления CSS, а для интерактивности язык программирования JavaScript. 

В более сложных сайтах, где требуется программировать логику и хранить большие объемы данных с быстрым доступом к ним, используются языки программирования Php, Python, Ruby или др. в связке с базами данных (например, MySQL), работающих на языке программирования SQL.

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

CMS и фреймворки

Ускорить и упростить создание сайта позволяют системы управления контентом сайта CMS. Например, «1С-Битрикс: Управление сайтом», которая имеет административную панель и огромный функционал с возможностью доработки. Использование CMS целесообразно для типовых проектов — это корпоративные сайты, интернет-магазины, информационные сайты, лендинги. 

Если проект нетиповой и сложный, например, портал для взаимодействия поставщиков и покупателей или сайт со связанным мобильным приложением, то стоит задуматься о веб-фреймворках. Таких, как: Angular, Laravel, Symfony, React или др. В этом случае будет меньше ограничений от CMS и писать код будет удобнее, однако стоимость проекта выйдет сильно выше. 

Итак мы подошли к такому понятию, как «фреймворк» — это программная оболочка, позволяющая упростить и ускорить решение типовых задач, характерных для определенного языка программирования.

Фре́ймворк (иногда фреймво́рк; англицизм, неологизм от framework — остов, каркас, структура) — программная платформа, определяющая структуру программной системы; программное обеспечение, облегчающее разработку и объединение разных компонентов большого программного проекта. 

Интерфейсный фреймворк Bootstrap

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

Первоначально созданный дизайнером и разработчиком в Twitter,  Bootstrap («бутстрап») стал одним из самых популярных интерфейсных фреймворков и проектов с открытым исходным кодом в мире. Bootstrap распространяется под лицензией MIT — бесплатная лицензия, требующая только сохранения авторских прав и лицензионных уведомлений. 

Из нашей практики, самые популярные версии Bootstrap — 3 (v3.4.1) и 4 ( v4.6.x), именно на основе этих версий сделана основная масса сайтов. На момент написания статьи уже выпущена предварительная 5 версия для тестирования (v5.0.0-beta2). 

Ранее упомянутая платформа «1С-Битрикс: Управление сайтом» использует тот же Bootstrap 3 и 4 версий во многих шаблонах своих компонентов. Это позволяет сократить код и упрощает его поддержку и развитие.

Коротко о плюсах фреймворка Bootstrap:

• Высокая скорость разработки: фактически вы не пишете полного кода, а просто указываете какие компоненты и утилиты вам необходимы и в каком виде они должны быть на сайте.
• Кроссбраузерность: сайт будет одинаково выглядеть на разных браузерах.
• Адаптивность: сайт будет масштабироваться под размер экрана, на котором его просматривают.
• Открытый код и кастомизация: можно гибко изменять код библиотек фреймворка.
• Простота: создание страниц не требует экспертного знания HTML и CSS, используя компоненты даже начинающий разработчик сможет сверстать сайт.
• Документация: все возможности документированы и не требуется их отдельно описывать для проектов.

Наша компания является сертифицированным партнером «1С-Битрикс» и разрабатывает сайты на платформе «1С-Битрикс: Управление сайтом». А для корректного и удобного отображения сайтов на дисплеях любых размеров и пропорций (адаптивности) мы используем верстку и front-end (клиентское программирование) на основе фреймворка Bootstrap 3 и 4 версий, либо используем flex на HTML 5, если Bootstrap для проекта избыточен.

Что входит в Bootstrap

Bootstrap — это интерфейсный фреймворк HTML, CSS и JavaScript, который содержит набор готовых блоков, классов и внутренних функций для быстрой и удобной разработки. Для его использования необходимы базовые знания языка разметки HTML, каскадных таблиц стилей CSS и языка программирования JavaScript. 

Bootstrap включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.

Далее условно разделим материал на четыре блока: разметка, содержание, компоненты и утилиты.

Разметка

Базовым элементом Bootstrap является контейнер, в котором мы размещаем необходимое нам содержимое (тексты, изображения, таблицы, формы и т. п.). Контейнеры мы размещаем в стандартной сеточной системе — это система из 12 колонок (столбцов), которые подстраиваются под ширину экрана.

Например, если мы хотим разместить текст на половину экрана, мы создаем блок шириной 6 колонок. Система сеток включает в себя контейнеры, ряды и колонки (столбцы). А действует это все следующим образом: мы создаем контейнер, далее создаем в нем ряд, а в ряду создаем столбец и размещаем в нем содержимое.

Более наглядно можно увидеть на скриншоте с официального сайта Bootstrap 4.6 ( https://bootstrap-4.ru/docs/4.6/getting-started/introduction/).

Таким образом, вы можете создавать различные комбинации рядов и столбцов.

Также вы можете выравнивать столбцы по вертикали.

Выравнивать столбцы по горизонтали.

Изменять визуальный порядок контента.

Смещать и отодвигать столбцы.

Вкладывать ряды и столбцы.

С нюансами работы с рядами и колонками вы можете ознакомиться на официальном сайте Bootstrap:

• Версия 3.4 — https://bootstrap-4.ru/docs/3.4/.
• Версия 4.6 — https://bootstrap-4.ru/docs/4.6/.

Содержание

Типографика

• В Bootstrap вы можете использовать классы заголовков h1-h6 для стилизации текста.
• Возможность стилизации вторичного текста заголовка.
• Создание параграфа, отстоящего от основной массы.
• Изменение стилей начертания и выделения текста.
• Стилизация показа аббревиатур.
• Стилизация цитат, их источников и выравнивание.

С нюансами работы с текстом вы можете ознакомиться на официальном сайте Bootstrap:

• Версия 3.4 —  https://bootstrap-4.ru/docs/3.4/.
• Версия 4.6 —  https://bootstrap-4.ru/docs/4.6/.

Изображения

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

С нюансами работы с изображениями вы можете ознакомиться на официальном сайте Bootstrap:

• Версия 3.4 — https://bootstrap-4.ru/docs/3.4/.
• Версия 4.6 — https://bootstrap-4.ru/docs/4.6/.

Таблицы

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

• Инвертируйте цвета со светлых на темные с помощью .table-dark и .thead-dark.
• Разделяйте «полосками зебры» с помощью .table-striped.
• Создавайте таблицы с границами с помощью .table-bordered и без границ с .table-borderless, комбинируйте с другими классами.
• Создавайте маленькие таблицы с помощью класса .table-sm.
• Используйте раскраску рядов с помощью контекстуальных стилей.
• Позвольте таблицам прокручиваться горизонтально с помощью класса .table-responsive или задайте ширину экрана, на котором данное свойство будет появляться с помощью .table-responsive{-sm|-md|-lg|-xl}.

Компоненты

Уведомления

Уведомления доступны для любой длины текста и опциональных кнопок уведомлений. Для стилизации можно использовать контекстуальные классы (например, .alert-success). А для соответствия цвета ссылок цветам уведомлений используйте .alert-link.

В уведомлениях вы можете добавить «крестик» для его закрытия и класс .alert-dismissible, который разместит кнопку «крестика» (класс .close) и создаст дополнительный отступ справа. В «крестике» отмены добавьте атрибут data-dismiss=«alert» запускающий функциональность JavaScript. Также вы можете применить анимацию, используя классы .fade и .show.ки

Значки — это маленькие компоненты отображающие числа и ярлыки. Для их использования существует класс .badge. В практике они изменяют размер для подстроки к размеру непосредственного родительского элемента. Также вы можете применять один из 8 контекстуальных классов (например, .badge-primary и другие) и скруглять значки используя класс-модификатор .badge-pill:

Вы можете сделать значки активными используя контекстуальные классы .badge-* в элементе a.

Навигационная цепочка

Вы можете указать местоположение текущей страницы в иерархии сайта используя компонент .breadcrumb.

Кнопки

Обычно класс .btn используется вместе с тегом button, однако их также можно использовать с тегами input. Вы можете менять стили кнопок, их размеры и функциональность:

• В кнопках присутствуют контекстуальные классы.
• Делайте кнопки контурными используя класс .btn-outline-*.
• Используя классы .btn-lg и .btn-sm меняйте размер кнопки.

Класс .btn-block создает кнопку на всю ширину родительского элемента.

• Вы можете отключать кнопки, путем добавления атрибута disabled.

Для того, чтобы это срабатывало в теге, нужно добавить не атрибут, а класс .disabled.

• Группируйте кнопки используя класс .btn-group.
• Добавляйте вложенность групп кнопок, например, для добавления выпадающего меню к ряду кнопок.
• Есть возможность сделать вертикальное расположение.
• Добавляйте информеры используя data-toggle=«popover».

Карточки

Card — это компонент Bootstrap 4, который позволяет оформить контент в виде карточки.

Карточка имеет гибкую структуру. Это означает, что её можно представить по-разному, например:

• В карточку можно добавлять абсолютно разнообразное содержимое.
• Карточки не имеют определенной ширины. Вы можете оборачивать их столбцами и рядами.
• Добавляйте элементы навигации в заголовок карточки.
• Меняйте цвет фона и границы используя контекстуальные классы и атрибут border-color.

Карусель

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

Также вы можете добавить надписи, изменить анимацию и интервал перехода на следующий слайд, добавив блоки с классами .carousel-fade и .carousel-caption.

Сворачивание

Для работы данного компонента используется класс .collapse. Он служит для отображения и скрытия контента, при нажатии на кнопку или ссылку. При нажатии могут отображаться сразу несколько элементов.

Также можно создать аккордеон, используя одноименный класс .accordion (в примере, с использованием компонента карточки).

Выпадающие элементы

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

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

Формы

• Изменяйте размерность форм используя классы .form-control-lg и .form-control-sm.
• Устанавливайте горизонтальные прокручиваемые входы диапазона.
• Добавляйте чекбоксы и радиокнопки.
• Более сложные группы форм можно создавать с помощью системы сеток.
• Используйте всплывающие подсказки.
• Добавляйте выключатели.
• Добавляйте формы загрузки файлов

Jumbotron

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

Медиа-объекты

Медиа-объект — это элемент Bootstrap, который является основой для построения на сайте сложных блоков (комментариев, отзывов и др.). Один комментарий или отзыв в этом сложном блоке — это один медиа-объект. Также медиа-объекты могут быть вложенными.

Модальные окна

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

Используйте сетку в модальных окнах.

Навигация

Навигация в Bootstrap имеет общую для подобного типа элементов разметку, от базового класса .nav до активных и «выключенных» состояний.

Вы можете изменять стили компонентов .nav классами-модификаторами и обычными классами.

• Навигацию можно горизонтально выровнять или расположить вертикально.
• Добавляйте вкладки используя класс .nav-tabs.
• Или подушки используя .nav-pills.
• Вы можете добавлять вкладки или подушки с выпадающими элементами.
• С помощью .nav можно добавлять блок ссылок для нумерации страниц.

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

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

На скриншоте мы видим класс .navbar brand, который обычно применяется для установки логотипа компании со ссылкой на главную страницу.

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

Прогрессбар

Класс .progress используется как обертка для индикации максимального значения, а класс .progress-bar для индикации пройденного прогресса.

Отслеживание прокрутки

Вы можете отслеживать прокрутку используя data-spy=«scroll».

Спиннеры

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

Вы можете устанавливать цвета и размеры спиннеров, регулировать отступы и размещение. Также есть возможность использовать спиннеры внутри кнопок.

Всплывающие сообщения

Всплывающие сообщения — это легкие уведомления, разработанные для имитации push-уведомлений, которые были популярны в мобильных и настольных операционных системах. Они построены с flexbox, поэтому их легко выровнять и расположить.

Если сообщений несколько, то они будут размещаться вертикально друг под другом.

Также можно размещать всплывающие сообщения используя параметры CSS.

Утилиты

Границы

Утилиты границ могут использоваться для любых элементов.

Изменяйте цвета границ.

Можно изменить углы.

Отображение элементов

Изменяйте значение свойства display с помощью классов отображения. Классы называются по формату:

• .d-{value} для xs
• .d-{breakpoint}-{value} для sm, md, lg и xl.

Где value — это одно из:

• none
• inline
• inline-block
• block
• table
• table-cell
• table-row
• flex
• inline-flex

Встраивание

Встраивайте видео в контент с сохранением соотношения сторон для любого устройства. Правила применяются прямо для элементов iframe, embed, video и object.

Flex

С полным набором гибких утилит flexbox вы можете управлять компоновкой выравниванием и калибровкой столбцов сетки, навигации, компонентов и т. д.

• Можно задавать направление гибких элементов.
• Выравнивайте содержимое пользуясь утилитой justify-content.
• Выравнивайте элементы используя утилиту align-items.
• Можно использовать сплошное выравнивание используя утилиту align-self.
• Для придания равной ширины для вложенных элементов используется класс .flex-fill.
• Есть контроль над гибкими элементами через авто-марджины.
• Можно изменять способ оборачивания гибких элементов в гибком контейнере с помощью классов .flex-wrap и .flex-wrap-reverse.

Float

Эти классы располагают элемент слева или справа, или выключают прикрепление к какому-либо краю, используя свойство float в CSS.

Взаимодействие

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

Класс .user-select-all не поддерживается ни одним браузером.

Переполнение

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

Тени

С помощью утилиты box-shadow можно добавлять тень.

Размеры

С помощью утилит ширины и высоты можно создавать элементы требуемой ширины или высоты. Включают поддержку по 25%, 50%, 75% и 100% по умолчанию. Но, можно изменить эти значения так, как вам нужно.

Интервалы

Вы можете назначать значения margin или padding элементу с помощью удобных классов.

Классы названы по формату {property}{sides}-{size} для xs и {property}{sides}-{breakpoint}-{size} для sm, md, lg и xl. Свойства (property), стороны (sides), контрольные точки (breakpoint) и размер (size) вы можете подробно изучить на официальном сайте Bootstrap.

Растянутая ссылка

Вы можете сделать любой элемент кликабельным растягивая вложенную ссылку с помощью класса .streched-link.

Текст

Выравнивание

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

Перенос текста и переполнение

Обтекание текста с помощью класса . text-wrap.

Запрещайте перенос текста с помощью класса .text-nowrap.

Чтобы обрезать длинное содержимое многоточием вы можете добавить класс .text-truncate. Требуется display: inline-block или display: block.

Трансформация текста

Трансформируйте текст в компонентах с помощью классов заглавных букв.

Толщина текста и курсив

Изменяйте толщину и добавляйте курсив текста.

Моноширный текст

Измените выделение на наш моноширинный стек с помощью .text-monospace.

Текстовое оформление

Удалите текстовое оформление с помощью класса .text-decoration-none.

Вертикальное выравнивание

Вы можете изменять параметры вертикального выравнивания элементов.

Видимость

Вы можете установить видимость элементов с помощью утилит видимости. Эти служебные классы не изменяют значение display и не влияют на макет — элементы .invisible по-прежнему занимают место на странице.

Заключение

В данной статье мы попытались в сжатом виде рассказать вам об основных возможностях работы с фреймворком Bootstrap. Подробно ознакомится с документацией по Bootstrap вы можете на официальном сайте фреймворка:

• Версия 3.4 — https://bootstrap-4.ru/docs/3.4/.
• Версия 4.6 — https://bootstrap-4.ru/docs/4.6/.

Для изучения инструкций требуются знания HTML, CSS и понимание кода JavaScript. Однако, для полноценной реализации адаптивной и валидной верстки, а также программирования клиентской части сайта на JavaScript уже требуется квалификация среднего или высокого уровня вместе с опытом.

Если у вас недостаточно времени для изучения материала и экспериментов, мы можем предложить вам оперативное создание адаптивного сайта с валидным кодом и возможностью самостоятельного наполнения. А после запуска в эксплуатацию вашего сайта, мы обеспечим вам позиции на первой странице поисковых систем Яндекс и Google в рамках работ по SEO-оптимизации и продвижению и осуществим поддержку во время эксплуатации.