web-разработка

Фреймворк Bootstrap

Bootstrap (также известен как Twitter Bootstrap) — свободный набор инструментов для создания сайтов и веб-приложений.
Включает в себя HTML и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения.
Фреймворк Bootstrap – это проект с открытым исходным кодом, доступным на Github. Он имеет лицензию MIT. Это означает, что его можно использовать бесплатно как в личных, так и в коммерческих проектах.

История возникновения

Bootstrap начал разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года.
Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности.
Третья версия выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию стал плоским.
Работа над четвёртой версией начата 29 октября 2014 года. Альфа версия вышла 19 августа 2015 года. Первая бета версия выпущена 10 августа 2017. Вторая бета версия выпущена 19 октября 2017. 18 января 2018 года выпущена первая стабильная версия Bootstrap 4.

Преимущества bootstrap

  1. Быстрость верстки — большое количество готовых компонентов даёт возможность не останавливаться на обыденностях.
  2. Адаптивность — возможность настраивать размеры блоков сайта в зависимости от ширины устройства, как для компьютера так и для телефона.
  3. Популярность — из-за которой существует большое количество статей и уроков, а также форумов.
  4. Bootstrap можно использовать для создания сайтов с различными CMS — WordPress, Joomla, Opencart.

Недостатки bootstrap

  1. Кода обычно в библиотеке написано больше, чем если бы вы написали при разработке с нуля. Потому что когда вы делаете самостоятельно, вы реализуете только необходимый функционал и все. В Bootstrap же есть все на все случаи жизни.
  2. Шаблонный дизайн. Множества сайтов сделаны в Bootstrap. Но это проблема легко решается, потому что она будет существовать только в том случае, если вы будете использовать только готовые компоненты фреймворка и ничего никогда не кастомизировать под себя.

Основные инструменты bootstrap

  1. Сетки — заранее заданные размеры колонок, которые можно сразу же использовать, например, ширина колонки 140 px относится к классу .span2 (.col-md-2 в третьей версии фреймворка), который можно использовать в CSS-описании документа.
  2. Шаблоны — фиксированный или резиновый шаблон документа.
  3. Типографика — описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т.п.
  4. Медиа — предоставляет некоторое управление изображениями и видео.
  5. Таблицы — средства оформления таблиц, вплоть до добавления функциональности сортировки.
  6. Формы — классы для оформления форм и некоторых событий, происходящих с ними.
  7. Навигация — классы оформления для панелей, вкладок, перехода по страницам, меню и панели инструментов.
  8. Алерты — оформление диалоговых окон, подсказок и всплывающих окон.

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

Для разработки большинства веб-проектов лучше использовать последнюю версию Bootstrap. На момент написания статьи актуальной является версия 4.4.
Данная версия поддерживает последние, стабильные версии всех основных браузеров и платформ. В операционной системе Windows эта версия Bootstrap поддерживает Internet Explorer 10-11 и Microsoft Edge.
Если же вам нужна поддержка более старых версий браузеров, например Internet Explorer 8 и 9, то в этом случае лучше остановиться на третьей версии Bootstrap. Последняя актуальная версия из 3 ветки — это 3.4.1.
В старых версиях браузера Internet Explorer (8 и ниже) некоторые компоненты Bootstrap 3 могут отображаться без градиентов, теней и закруглённых углов. Это связано с тем, что эти версии не поддерживают свойства CSS3, которые используются в её компонентах.

Установка bootstrap

Есть два способа его подключения:
Первый способ: Зайдите на официальный сайт и на главной странице нажмите «Download». Далее скачайте архив на свой компьютер:
Далее распакуйте архив у себя на компьютере. Для базовой работы понадобится лишь подключить один файл в <head> — bootstrap.min.css. Пример:
<link rel='stylesheet' href='/css/bootstrap.min.css' type='text/css' media='all'>
Второй способ: Этот способ требует подключение к интернету во время работы с фреймворком. Зайдите на сайт BootstrapCDN для копирования ссылок.

Для подключения bootstrap.min.css добавьте эту строчку кода в <head>:
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Для подключения bootstrap.min.js добавьте эту строчку кода в <head>:
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Компоненты bootstrap

В bootstrap создано большое количество компонентов для различных нужд: графические значки, выпадающие меню, группы ввода, навигационные панели, сообщения для предупреждений, и многе другое.
Все компоненты мы не будем здесь описывать так как вы можете зайти на официальный сайт и изучить все компоненты с примерами их работы.
2023-11-19 22:18 Самоучитель по CSS