Bootstrap (front-end framework)

Материал из Национальной библиотеки им. Н. Э. Баумана
Последнее изменение этой страницы: 19:34, 16 июня 2019.
(перенаправлено с «Twitter Bootstrap»)
Bootstrap
Bootstrap.png
Создатели: Mark Otto, Jacob Thornton
Разработчики: Bootstrap Core Team
Выпущена: 19 August 2011 года; 8 years ago (2011-08-19)
Постоянный выпуск: 4.3.1 / 13 February 2019 года; 12 months ago (2019-02-13)
Написана на: HTML, CSS, Less (v3), Sass (v4) and JavaScript
Платформа: Web platform
Лицензия: MIT License (Apache License 2.0 prior to 3.1.0)
Веб-сайт getbootstrap.com

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

История

Этот фреймворк начал разрабатываться как внутренняя библиотека компании Twitter под названием Twitter Blueprint. После нескольких месяцев разработки он был открыт под названием Bootstrap 19 августа 2011 года.

Основными нововведениями второй версии, появившейся 31 января 2012 года, стали 12-колоночная сетка и поддержка адаптивности.

Третья версия выпущена 19 августа 2013 года. В ней адаптивность получила дальнейшее развитие, был осуществлён переход к концепции mobile first, оптимизации прежде всего под мобильные устройства. Дизайн по умолчанию стал плоским.

Работа над четвёртой версией начата 29 октября 2014 года. Альфа версия вышла 19 августа 2015 года. И наконец 18 января 2018 года была выпущена первая стабильная версия Bootstrap 4.

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

Шаблоны

  • Основные стили - включают в себя элементы отображения, оформления и стили ссылок.
  • Сетки - заранее заданные размеры колонок, которые можно сразу же использовать.
  • Макеты - готовая верстка типовых шаблонов (например, хедер + футер + меню).
  • Адаптивный дизайн - включение адаптивных возможностей.

Компоненты

Создано большое количество компонентов для различных нужд: графические значки, выпадающие меню, группы ввода, навигационные панели, сообщения для предупреждений и многое другое. [Источник 1]

  • Группы кнопок
  • Выпадающие списки кнопок
  • Навигационные вкладки, кнопки и списки
  • Навигационные цепочки ("Хлебные крошки")
  • Постраничная навигация
  • Ярлыки и бейджи
  • Миниатюры
  • Сообщения
  • Заголовки страниц и элемент hero
  • Индикаторы процесса
  • Дополнительные облегченные компоненты

JavaScript в Bootstrap

Есть возможность использовать исключительно все плагины Bootstrap с использованием разметки API, без написания строк JavaScript. [Источник 2] API — это первый класс Bootstrap.

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

  • Переходы bootstrap-transition.js
  • Модальные элементы bootstrap-modal.js
  • Выпадающие списки меню bootstrap-dropdown.js
  • Слежение за перемещением по странице bootstrap-scrollspy.js
  • Переключаемые вкладки bootstrap-tab.js
  • Всплывающие подсказки bootstrap-tooltip.js
  • Всплывающие информационные блоки bootstrap-popover.js
  • Сообщения bootstrap-alert.js
  • Кнопки bootstrap-button.js
  • Сворачивание bootstrap-collapse.js
  • Элемент «Карусель» bootstrap-carousel.js
  • Опережающий ввод с клавиатуры bootstrap-typeahead.js
  • Аффикс bootstrap-affix.js

Особенности

Bootstrap совместим с последней версией Google Chrome, Firefox, Internet Explorer, Opera, and Safari.

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

Начиная с версии 3.0, в Bootstrap включили мобильный дизайн.

Версия 4.0 альфа поддерживает Sass и Flexbox.

Bootstrap является открытым исходным кодом и доступна на github.[Источник 3]

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

Кроссбраузерность

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

Экономия времени

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

Адаптивность

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

Дизайн

Единые шаблоны и стилевое оформление элементов макета и всех страниц на сайте в целом. И при этом Bootstrap кросс-браузерный и хорошо отображается во всех браузерах Safari, Firefox, IE, EDGE и тех, что на основе Chromium (движок Blink на основе Webkit: Яндекс.Браузер, Опера, Гугл Хром). Регулярное обновление и дополнение фреймворка самыми современными возможностями HTML и CSS вносит некоторые ограничения в использовании с IE7 и IE8 — не забудьте проверить.

Простота и открытость

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

Установка

Перед загрузкой убедитесь, что у вас имеется редактор кода и некоторые знания в области HTML и CSS.
Установить можно перейдя по ссылке https://getbootstrap.com/. После скачивания дистрибутива, у нас имеется три каталога: bootstrap/

   ├── css/
   │ ├── bootstrap.css 
   │ ├── bootstrap.css.map
   │ ├── bootstrap.min.css
   │ ├── bootstrap.min.css.map
   │ ├── bootstrap-theme.css
   │ ├── bootstrap-theme.css.map
   │ ├── bootstrap-theme.min.css
   │ └── bootstrap-theme.min.css.map
   ├── js/
   │ ├── bootstrap.js
   │ └── bootstrap.min.js
   └── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

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

Базовый шаблон:

 1 <!DOCTYPE html>
 2 <html lang="ru">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1">
 6     <title>Bootstrap 101 Template</title>
 7     <!-- Bootstrap -->
 8     <link href="/css/bootstrap.min.css" rel="stylesheet">
 9     <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
10   </head>
11   <body>
12     <h1>Hello, world!</h1>
13 
14     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
15     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
16     <!-- Include all compiled plugins (below), or include individual files as needed -->
17     <script src="/js/bootstrap.min.js"></script>
18   </body>
19 </html>

( Важно! файл со стилями, который будет переопределять стили другого файла, нужно размещать последним, поэтому файл bootstrap-theme.min.css расположен именно в конце)

Также можно посмотреть туториал по установке.

Ссылки

Источники

  1. Bootstrap // getBootstrap [2015 — ]. Дата обновления: 18 января 2018. URL: https://bootstrap-ru.com/components.php (дата обращения: 21.05.2019).
  2. Bootstrap // getBootstrap [2015 — ]. Дата обновления: 18 января 2018. URL: https://bootstrap-ru.com/221/javascript.php (дата обращения: 21.05.2019).
  3. Bootstrap // Git [2011 — ]. Дата обновления: 13 февраля 2019. URL: https://github.com/twbs/bootstrap (дата обращения: 21.05.2019).