Что такое Bootstrap и зачем он нужен?

Александр Мальцев
96K
0
Что такое Bootstrap и зачем он нужен?
Содержание:
  1. Из чего состоит Bootstrap
  2. С чего начать изучение Bootstrap
  3. Преимущества и недостатки фреймворка Bootstrap
  4. Какую версию Bootstrap выбрать
  5. Комментарии

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

Bootstrap — это открытый и бесплатный HTML, CSS и JS фреймворк, который используется веб-разработчиками для быстрой вёрстки адаптивных дизайнов сайтов и веб-приложений.

Логотип фреймворка Bootstrap 4

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

Основная область его применения – это фронтенд разработка сайтов и интерфейсов админок. Среди аналогичных систем (Foundation, UIkit, Semantic UI, InK и др.) фреймворк Bootstrap является самым популярным.

Почему Bootstrap так популярен? Это связано с тем, что он позволяет верстать сайты в несколько раз быстрее, чем это можно выполнить на «чистом» CSS и JavaScript. А в нашем мире время – это очень ценный ресурс. Кроме этого, его популярность ещё обусловлена доступностью. Она заключается в том, что на нём даже начинающий разработчик может верстать достаточно качественные макеты, которые трудно было бы выполнить без глубоких знаний веб-технологий и достаточной практики.

Фреймворк Bootstrap представляет собой набор CSS и JavaScript файлов. Чтобы его использовать эти файлы необходимо просто подключить к странице. После этого вам станут доступны инструменты данного фреймворка: колоночная система (сетка Bootstrap), классы и компоненты.

Как он работает? Например, чтобы создать кнопку на странице с помощью Bootstrap, достаточно к ссылке или элементу button добавить всего несколько классов.

Создание кнопки в Bootstrap 4:

<!-- Чтобы сделать ссылку в виде кнопки добавим к ней 2 класса: btn и btn-success -->
<a href="#" class="btn btn-success">Ссылка, оформленная в виде кнопки</a>

Ну как? Сколько на это потребовалось времени? Да, всего несколько секунд.

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

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link active" data-toggle="tab" href="#section-1" role="tab" aria-controls="section-1" aria-selected="true">Секция 1</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link" data-toggle="tab" href="#section-2" role="tab" aria-controls="section-2"
      aria-selected="false">Секция 2</a>
  </li>
  <li class="nav-item">
    <!-- атрибут href должен указывать на элемент, который необходимо показать -->
    <a class="nav-link" data-toggle="tab" href="#section-3" role="tab" aria-controls="section-3"
      aria-selected="false">Секция 3</a>
  </li>
</ul>
<div class="tab-content">
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade show active" id="section-1" role="tabpanel" aria-labelledby="home-tab">...</div>
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade" id="section-2" role="tabpanel" aria-labelledby="profile-tab">...</div>
  <!-- атрибут id определяет вкладку, которая будет его показывать -->
  <div class="tab-pane fade" id="section-3" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>

Всё, вкладки готовы. На это тоже ушли считанные секунды. Правда, потрясающая скорость. В этом сила Bootstrap.

Но, Bootstrap – это не просто набор готовых инструментов (HTML фрагментов, классов, компонентов и плагинов), а хорошо спроектированный фронтенд фреймворк, который довольно просто можно настроить под себя посредством редактирования Sass переменных и использования миксинов.

Из чего состоит Bootstrap

Bootstrap состоит из:

  • инструментов для создания макета (обёрточных контейнеров, мощной системы сеток, гибких медиа-объектов, адаптивных утилитных классов);
  • классов для стилизации базового контента: текста, изображений, кода, таблиц и figure;
  • готовых компонентов: кнопок, форм, горизонтальных и вертикальных навигационных панелей, слайдеров, выпадающих списков, аккордеонов, модальных окон, всплывающих подсказок и др.;
  • утилитных классов для решения традиционных задач наиболее часто возникающими перед веб-разработчиками: выравнивание текста, отображение и скрытие элементов, задания цвета, фона, margin и padding отступов, и т.д.

С чего начать изучение Bootstrap

Первое, что нам необходимо — это скачать фреймворк и подключить его к странице. Как это выполнить детально описано в статье «Установка платформы Bootstrap».

После того как мы это сделаем обычно возникает следующий вопрос: «А что дальше? Как использовать Bootstrap?». На самом деле тут нет ничего сложного, создавать страницы с использованием Bootstrap очень просто.

Но для этого, нам необходимо сначала ещё изучить сетку и научиться её использовать для создания макетов страниц и разметки блоков. Почитать про неё можно тут (для тех, кто использует Bootstrap 3) или здесь (для Bootstrap 4).

Сетка в 3.x версии построена на float, а в 4.x – на flexbox.

Затем нужно изучить компоненты и классы Bootstrap.

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

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

Преимущества и недостатки фреймворка Bootstrap

Преимущества Bootstrap при его использовании для frontend разработки сайтов и интерфейсов админок:

  • высокая скорость создания качественной адаптивной вёрстки даже начинающими веб-разработчиками (достигается это благодаря использованию готовых классов и компонентов, созданных профессионалами);
  • кроссбраузерность и кроссплатформеннось (корректное отображение и работа сайта во всех поддерживаемых этим фреймворком браузерах и операционных системах);
  • наличие большого количество готовых хорошо продуманных компонентов, протестированных огромным сообществом веб-разработчиков на различных устройствах;
  • возможность настройки под свой проект, достигается это посредством изменения SCSS переменных и использования миксинов (можно изменить количество колонок, цвета, радиус скруглений, отступы между колонками и т.д.);
  • низкий порог вхождения; для работы с фреймворком не обязательно иметь «глубокие» знания по HTML, CSS, JavaScript и jQuery (достаточно знать только основы этих технологий);
  • однородность дизайна и его согласованность между различными компонентами (в Bootstrap все компоненты выполнены в едином стиле);
  • наличие огромных сообществ и обучающих материалов; при желании это поможет не только хорошо разобраться в фреймворке, но и найти ответы практически на любые вопросы.

Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно бесплатно использовать как в открытых, так и в коммерческих проектах.

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

  • создания фронтендов проектов с уникальным дизайном;
  • разработки проектов, в которых заказчик готов платить за проект на «чистом» CSS и JavaScript (в большинстве случаях такая разработка осуществляется в команде, в которой каждый её участник выполняет какой-то свой определенный набор функций);
  • вёрстки личных проектов, если у вас есть достаточно количество времени и ваш уровень знаний по HTML, CSS и JavaScript является достаточным, чтобы это осуществить.

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

  • более большой размер конечных css и js-файлов проекта, чем они получились, если бы мы всё это создавали самостоятельно (это связано с тем, что стили фреймворка и его js-код содержат универсальный код (на все случаи жизни), а по факту для конкретного проекта из всего этого может потребоваться только часть);
  • сложность использования Bootstrap для вёрстки сайтов с уникальным дизайном, т.к. разработка в этом случае будет сопровождаться значительным переписыванием его кода и простой настройкой Bootstrap переменных тут уже не обойтись.

Первый недостаток можно немного «сгладить», если выполнить самостоятельную сборку проекта из исходных кодов и включить в неё только те компоненты, которые нам нужны. В этом случае код этого фреймворка будет значительно меньше. Как это выполнить в Bootstrap 4 можно посмотреть здесь, а в Bootstrap 3 - тут.

Какую версию Bootstrap выбрать

Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap. На текущий момент — это 4.6.0 (скачать).

Эта версия, как уже было отмечено выше, построена на CSS Flexbox. Она поддерживает последние, стабильные версии всех основных браузеров и платформ (включая Internet Explorer 10 - 11 и Microsoft Edge).

Если вам нужна поддержка более «старых» браузеров, например Internet Explorer 8 - 9, то в этом случае следует выбрать последнюю версию из 3 ветки этого фреймворка, т.е. 3.4.1 (скачать).

Компоненты Bootstrap 3 в Internet Explorer 8 и некоторых других версиях отображаются без градиентов, теней и закруглённых углов. Это связано с тем, что в них нет поддержки используемых для этих целей CSS3 свойств.

Следующий шаг в изучении Bootstrap, это его установка.

Комментарии ()

  1. Лора
    27 сентября 2016, 13:42
    Александр, огромное спасибо за труд. Отличный сайт, максимальная информация!
    Позвольте общий вопрос: «Что предпочтительнее с точки зрения поддержки и дальнейших доработок?»
    1. Настроить сборку Bootstrap под себя.
    2. Скачать базовый вариант пакета. А после этого подключить свой файл со стилями для переопределения базовых.
    Заранее спасибо за ответ.
    1. Александр Мальцев
      27 сентября 2016, 14:16
      Спасибо, за отзыв.
      Более предпочтительно конечно же использовать первый вариант, т.к. размер CSS-кода в этом случае будет значительно меньше, чем во втором варианте. Да и такой код будет проще поддерживать.
    Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.