Bootstrap

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

логотип Bootstrap

Кто и когда использует Bootstrap

Фреймворк используют frontend-, fullstack-разработчики. Для работы с инструментом нужны минимальные знания верстки, поэтому он подходит новичкам.

Bootstrap используется, когда:

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

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

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

Классы в Bootstrap делятся на 3 большие группы:

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

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

Курс

Frontend-разработчик

Научитесь разрабатывать интерактивные веб-сайты и приложения на JavaScript и HTML и получите востребованную IT-профессию. 

Узнать подробности

Особенности Bootstrap

Снижение количества времени на разработку

Фреймворк дает готовые решения, которые позволяют создавать макеты сайтов быстрее. Для быстрого запуска проектов есть множество примеров. Для верстки любых прототипов (альбомов, слайдеров, панели входа и т. д.) потребуются файлы index.html, которые находятся в каждой папке с примерами, и соответствующий CSS-файл. Например, carousel.css или cover.css. Изменять код можно по своему усмотрению, внося правки в текстовом редакторе. Bootstrap позволяет скопировать код из примера и вставить его в свой проект, к которому подключен фреймворк.

Адаптивность и кроссбраузерность

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

Легкость в использовании и открытость

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

Понятный код

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

Единство стилей

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

Шаблонность

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

Отсутствие поддержки устаревших версий браузеров

Так как Bootstrap постоянно обновляется, сайты на Bootstrap могут некорректно отображаться в старых браузерах.

Как начать работу с Bootstrap

Чтобы начать работать с Bootstrap, нужен текстовый редактор для работы с кодом (Visual Studio Code, Atom, Sublime Text и т.п.) или IDE — интегрированная среда разработки, а также браузер, в котором можно отслеживать изменения. Он должен быть обновлен до версии, которую поддерживает последний вариант Bootstrap.

Существует несколько способов установки Bootstrap. Получить актуальную версию фреймворка можно на официальном сайте.

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

2. Скачивание скомпилированных файлов CSS и JS с их подключением к проекту через ссылки.

3. Скачивание исходных файлов. Для работы потребуются компилятор CSS и автопрефиксатор.

4. Установка исходных файлов с помощью менеджеров пакетов yarn, npm, RubyGems, NuGet, Composer. 

Курс 

Frontend-разработчик

Изучите HTML, CSS и Javascript, чтобы получить перспективную и творческую IT-профессию.

  • 6 месяцев обучения;
  • вебинары в прямом эфире с разбором кода;
  • тренажеры для отработки знания кода;
  • создание сайта, слайдера и веб-приложения.

Узнать больше

 

Другие термины на букву «B»

Bash
Big Data
Bitbucket
Bruteforce
Burp Suite

Все термины

Курсы по теме

(рейтинг: 5, голосов: 1)
Добавить комментарий