Бутстрап это: Что такое Bootstrap и зачем он нужен?

Bootstrap | WebReference

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

Bootstrap разработали Марк Отто и Якоб Торнтон, сотрудники Twitter, именно поэтому в названии фигурирует имя компании. Их цель понятна любому разработчику — создать единый стандартный набор инструментов для сотрудников компании, ускоряющий их работу.

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

Какие плюсы несёт в себе использование библиотеки.

Высокая скорость разработки

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

Адаптивный дизайн

Bootstrap направлен на создание макета под разные устройства — ноутбуки, планшеты, смартфоны. При этом код пишется один, а масштабирование в зависимости от ширины устройства берёт на себя фреймворк.

Открытая программа

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

Совместимость с браузерами

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

Низкий порог вхождения

Чтобы использовать библиотеку в своей работе, требуется обладать минимальными знаниями по HTML, CSS и JavaScript. Это позволяет создавать эффектные сайты даже начинающим разработчикам.

Единая работа компонент

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

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

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

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

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

Содержание

Что нового в Бутстрапе 5

Когда мы собирали учебные проекты на Бутстрапе, то использовали четвёртую версию — актуальную на тот момент. С тех пор вышла пятая версия — мы собрали самое интересное, что там появилось по сравнению с четвёртой.

👉 Вот коротко про Бутстрап:

• Бутстрап (Bootstrap) — это фреймворк для создания сайтов.
• Можно представить, что фреймворк — это конструктор: набор готовых компонентов и правил, из которых сайт собрать быстрее, чем написать с нуля.
• Главное, за что любят Бутстрап, — простота и адаптивность. На нём можно сделать сайт, который будет выглядеть одинаково хорошо и на компьютере, и на телефоне.
• Бутстрап — бесплатный фреймворк, который подключается к странице одной строчкой кода:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Боковые навигационные панели

Offcanvas — это панель, которая выезжает слева или справа. На ней можно разместить любой дополнительный контент: боковое меню, панель инструментов, подсказки, базу знаний или даже сверстать отдельную страницу.

Работает панель так: вы объявляете класс offcanvas и внутри этого блока верстаете всё, что нужно. Потом привязываете появление панели к любому инструменту на сайте, чтобы она выезжала при нажатии:

Аккордеон (схлопывающееся меню)

Аккордеон — популярный приём для организации ответов на вопросы. Идея простая: заранее пишем в каждой карточке название и описание, а потом используем аккордеон для наведения порядка. Раньше это в Бутстрапе работало с ошибками, и приходилось сильно переделывать код, а сейчас всё хорошо:

Ещё можно настроить так, чтобы карточки не сворачивались, а оставались все открытыми:

Формы

Задача формы на странице — собрать от пользователя какую-то информацию: электронную почту, телефон и т. д. 

Стандартными средствами HTML нарисовать нормальную форму сложно: нужно самому продумывать дизайн, расположение элементов и их реакцию на разные действия пользователя. 

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

Пример формы с электронной почтой и паролемТак выглядит пустая форма — аккуратно и всё в одном стилеА так — форма с валидацией, где пользователь не заполнил все необходимые поля

Чекбоксы и переключатели

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

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

Плавающие подсказки в полях ввода

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

Вот как это работает:

Дизайн и палитра

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

А ещё разработчики обновили палитру цветов. Теперь можно указывать насыщенность конкретного цвета вместо его шестнадцатеричного значения, например:

$red-100 ← самый бледный красный

$red-900 ← самый насыщенный красный 

Отказ от jQuery

Раньше под капотом Бутстрапа было много jQuery-кода — с его помощью фреймворк получал контроль над разными элементами на странице. Пользователю достаточно было указать, например, количество отступов в текущей колонке или поведение элементов в мобильной версии, а Бутстрап через jQuery делал всю остальную работу.

Зачем вам jQuery

Сейчас вместо jQuery в Бутстрапе используют чистый JavaScript. Время прошло, JavaScript научился делать всё то, ради чего создавали jQuery: получать доступ к элементам, на лету создавать разные компоненты и быстро делать разные простые штуки. Поэтому теперь Бутстрап будет работать чуть быстрее и не тратить время на подгрузку дополнительной библиотеки.

Зачем это всё?

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

В следующий раз попробуем применить всё это на практике — обновим текущий сайт с котиками и посмотрим на него в новом дизайне.

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Виталий Вебер

Подход

· Начальная загрузка

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

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

Увидели что-то, что звучит не так или, возможно, можно было бы сделать лучше? Откройте вопрос — мы хотели бы обсудить его с вами.

Резюме

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

• Компоненты должны быть адаптивными и мобильными
• Компоненты должны создаваться с использованием базового класса и расширяться с помощью классов-модификаторов
• Состояния компонентов должны подчиняться общему масштабу z-индекса
• По возможности предпочтите реализацию HTML и CSS JavaScript
• По возможности используйте утилиты вместо пользовательских стилей
• По возможности избегайте применения строгих требований к HTML (дочерние селекторы)

Ответный

Адаптивные стили Bootstrap созданы, чтобы быть адаптивными, и этот подход часто называют mobile-first . Мы используем этот термин в наших документах и ​​в целом согласны с ним, но иногда он может быть слишком широким. Хотя не каждый компонент должен быть полностью адаптивным в Bootstrap, этот адаптивный подход заключается в уменьшении переопределений CSS, заставляя вас добавлять стили по мере увеличения области просмотра.

В Bootstrap вы увидите это наиболее четко в наших медиа-запросах. В большинстве случаев мы используем запросов с минимальной шириной , которые начинают применяться в определенной точке останова и проходят через более высокие точки останова. Например, .d-none применяется от min-width: 0 до бесконечности. С другой стороны, .d-md-none применяется, начиная со средней точки останова и выше.

Иногда мы будем использовать max-width , когда этого требует внутренняя сложность компонента. Иногда эти переопределения функционально и ментально более ясны для реализации и поддержки, чем переписывание основных функций наших компонентов. Мы стремимся ограничить этот подход, но будем использовать его время от времени.

Классы

Помимо нашей Reboot, кросс-браузерной таблицы стилей нормализации, все наши стили нацелены на использование классов в качестве селекторов. Это означает, что нужно избегать селекторов типов (например, 9).0037 input[type=»text»] ) и посторонние родительские классы (например, .parent .child ), которые делают стили слишком специфичными, чтобы их можно было легко переопределить.

Таким образом, компоненты должны создаваться с базовым классом, содержащим общие, не подлежащие переопределению пары «свойство-значение». Например, .btn и .btn-primary . Мы используем .btn для всех распространенных стилей, таких как display , padding и border-width . Затем мы используем модификаторы, такие как .btn-primary для добавления цвета, цвета фона, цвета границы и т.

д.

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

шкалы z-индекса

Есть два z-index 9Масштабирование 0038 в Bootstrap — элементы внутри компонента и наложенные компоненты.

Составные элементы

• Некоторые компоненты в Bootstrap построены с перекрывающимися элементами, чтобы предотвратить двойные границы без изменения свойства border . Например, группы кнопок, группы ввода и нумерация страниц.
• Эти компоненты имеют стандартную шкалу z-index от 0 до 3 .
• 0 по умолчанию (начальный), 1 это :hover , 2 это :active / . active , и 3 это :focus .
• Этот подход соответствует нашим ожиданиям наивысшего приоритета пользователя. Если элемент находится в фокусе, он находится в поле зрения и привлекает внимание пользователя. Активные элементы занимают второе место, потому что они указывают состояние. Наведение курсора занимает третье место, потому что оно указывает на намерение пользователя, но почти можно навести курсор на что-нибудь .

Компоненты накладки

Bootstrap включает в себя несколько компонентов, которые функционируют как своего рода наложение. Это включает в себя, в порядке наибольшего z-index , выпадающие списки, фиксированные и липкие панели навигации, модальные окна, всплывающие подсказки и всплывающие окна. Эти компоненты имеют собственную шкалу

z-index , которая начинается с 1000 . Этот начальный номер является случайным и служит небольшим буфером между нашими стилями и пользовательскими стилями вашего проекта.

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

Узнайте больше об этом на нашей странице макета z-index .

HTML и CSS поверх JS

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

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

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

<кнопка> с и с.

То же самое касается и более сложных компонентов. Хотя мы могли бы написать наш собственный плагин проверки формы, чтобы добавлять классы к родительскому элементу на основе состояния ввода, тем самым позволяя нам стилизовать текст, скажем, красным, мы предпочитаем использовать псевдоэлементы :valid / :invalid каждый браузер предоставляет нам.

Коммунальные услуги

Вспомогательные классы — ранее помощники в Bootstrap 3 — являются мощным союзником в борьбе с раздуванием CSS и низкой производительностью страницы. Вспомогательный класс обычно представляет собой единую неизменную пару «свойство-значение», выраженную в виде класса (например, .d-block представляет display: block; ). Их основная привлекательность заключается в скорости использования при написании HTML и ограничении количества пользовательского CSS, который вам нужно написать.

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

Гибкий HTML

Хотя это и не всегда возможно, мы стараемся избегать чрезмерной догматичности в наших требованиях к HTML для компонентов. Таким образом, мы фокусируемся на отдельных классах в наших селекторах CSS и стараемся избегать непосредственных дочерних селекторов ( ~ ). Это дает вам больше гибкости в реализации и помогает сделать наш CSS более простым и менее конкретным.