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

Главная Блог СтатьиОбзор основных инструментов Bootstrap для создания сайта
Обзор основных инструментов Bootstrap для создания сайта
05 03/21
Поговорим о фреймворке Bootstrap, который облегчает и ускоряет создание современных адаптивных сайтов.
  • Автор: Пластинин Денис
  • Редактор: Бунеев Алексей
  • Просмотров: 12

Создать простой сайт можно «с нуля», используя для визуализации валидную верстку 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:

Содержание

Типографика

  • В Bootstrap вы можете использовать классы заголовков h1-h6 для стилизации текста:
  • Классы заголовков


  • Возможность стилизации вторичного текста заголовка:
  • Вторичный текст заголовка


  • Создание параграфа, отстоящего от основной массы:
  • Отдельный параграф


  • Изменение стилей начертания и выделения текста:
  • Стили текста


  • Стилизация показа аббревиатур:
  • Стили аббревиатур


  • Стилизация цитат, их источников и выравнивание:
  • Стили цитат

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

Изображения

  • Изображения могут масштабироваться по родительскому элементу:
  • Адаптивное изображение


  • Стилизация эскизов — добавляется граница в 1 пиксель:
  • Стили эскизов


  • Стилизация и выравнивание изображений:
  • Стили изображений

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

Таблицы

Добавляйте базовый класс .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, который позволяет оформить контент в виде карточки.

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

  • С заголовком (футером) или без него.
  • С использованием картинки (её можно расположить в верхней или нижней части) или без неё.
  • С произвольным количеством элементов и их расположением в основной части.
  • Кроме этого, карточке можно ещё очень просто придать нужное цветовое оформление. Задать ей необходимый цвет фона, текста и границ.

Компонент Card


  • В карточку можно добавлять абсолютно разнообразное содержимое:
  • Разное содержимое Card


  • Карточки не имеют определенной ширины. Вы можете оборачивать их столбцами и рядами:
  • Оборачивание столбцами


  • Добавляйте элементы навигации в заголовок карточки:
  • Навигация в карточках

  • Меняйте цвет фона и границы используя контекстуальные классы и атрибут border-color.

Карусель

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

Слайды карусели

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


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

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

Компонент сворачивания


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

Аккордеон в карточке


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

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

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

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


Формы

Компонент Формы


  • Изменяйте размерность форм используя классы .form-control-lg и .form-control-sm:
  • Размерность форм


  • Устанавливайте горизонтальные прокручиваемые входы диапазона:
  • Прокручиваемые диапазоны


  • Добавляйте чекбоксы и радиокнопки:
  • Чекбоксы и радиокнопки в формах


  • Более сложные группы форм можно создавать с помощью системы сеток:
  • Сложные группы форм


  • Используйте всплывающие подсказки:
  • Подсказки в формах


  • Добавляйте выключатели:
  • Выключатели в формах


  • Добавляйте формы загрузки файлов:
  • Формы загрузки файлов


Jumbotron

Компонент 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:

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 вы можете управлять компоновкой выравниванием и калибровкой столбцов сетки, навигации, компонентов и т. д.

Утилита Flexbox


  • Можно задавать направление гибких элементов:
  • Гибкие элементы


  • Выравнивайте содержимое пользуясь утилитой justify-content:
  • Justify-content


  • Выравнивайте элементы используя утилиту align-items:
  • Align-items


  • Можно использовать сплошное выравнивание используя утилиту align-self:
  • Align-self


  • Для придания равной ширины для вложенных элементов используется класс .flex-fill:
  • Flex-fill


  • Есть контроль над гибкими элементами через авто-марджины:
  • Контроль над гибкими элементами


  • Можно изменять способ оборачивания гибких элементов в гибком контейнере с помощью классов .flex-wrap и .flex-wrap-reverse:
  • Flex-wrap


Float

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

Прикрепление элементов


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

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

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

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


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

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

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


Тени

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

Добавление тени


Размеры

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

Утилиты ширины и высоты


Интервалы

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

Margin and padding

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


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

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

Кликабельность элементов


Текст

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

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

Классы выравнивания текста


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

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

Text-wrap


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

Text-nowrap


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

Text-truncate


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

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

Классы заглавных букв


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

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

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


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

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

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

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

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

Text-decoration


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

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

Выравнивание элементов по вертикали


Видимость

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

Установка видимости

Заключение

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

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

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



ПОДЕЛИТЕСЬ В СОЦ. СЕТЯХ!

Возврат к списку