Bootstrap

Bootstrap — css фреймворк для создания сайтов и веб-приложений.

Bootstrap содержит в себе HTML и CSS шаблоны оформления для типографики, блоков навигации, кнопок, веб-форм, и прочих компонентов веб-интерфейсов, а также JavaScript расширения. Ссылка на официальный сайт Bootstrap.

Изначально Bootstrap был создан разработчиками Twitter для внутреннего пользования. Со временем было решено выложить фреймворк в публичный доступ.

В Bootstrap 3 используются самые современные наработки в области CSS и HTML. Поэтому стоит уделить внимание поддержке старых браузеров.

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

Основные преимущества Twitter Bootstrap 3:

  • Адаптивная верстка — Bootstrap легко и эффективно масштабирует ваш проект с одной базой кода, от телефонов и планшетов до настольных компьютеров.
  • Экономия времени — CSS фреймворк Bootstrap 3 позволит сэкономить время и усилия, используя шаблоны дизайна и классы, и уделить больше внимания другим задачам;
  • Высокая скорость загрузки страницы — динамичные макеты Bootstrap адаптируются под разные устройства и разрешения экрана без изменений в разметке;
  • Гармоничный дизайн — все компоненты платформы Bootstrap используют единый стиль и шаблоны с помощью центральной библиотеки. Дизайн и макеты веб-страниц согласуются друг с другом;
  • Простота в использовании — фреймворк прост в использовании, любой пользователь с базовыми знаниями HTML и CSS может начать разработку макета с Twitter Bootstrap;
  • Совместимость с браузерами — Bootstrap 3 поддерживает браузеры Mozilla Firefox, Google Chrome, Safari, Internet Explorer и Opera;

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

Bootstrap 3 поддерживает последние версии большинства браузеров на разных платформах. Internet Explorer версий 8–11 поддерживается только на ос Windows.

Chrome Firefox Internet Explorer Opera Safari
Android Поддерживается Не поддерживается N/A Не поддерживается N/A
iOS Поддерживается N/A Не поддерживается Поддерживается
Mac OS X Поддерживается Поддерживается Поддерживается Поддерживается
Windows Поддерживается Поддерживается Поддерживается Поддерживается Не поддерживается

Internet Explorer 8 и 9 также поддерживается фреймворком, однако эти версии браузеров не поддерживают некоторые элементы HTML 5 и CSS 3. А в Internet Explorer 8 потребуется использование Respond.js для корректной работы медиа запросов.

Функционал разметки:

Пример работы аспектов системы разметки Bootstrap 3.

Очень маленькие устройство Телефоны (<768px) Малые устройства Планшеты (≥768px) Средние устройства Настольные (≥992px) Большие устройства Настольные (≥1200px)
Поведение разметки Горизонтальный все время Терпеть неудачу при начатии, горизонтальный выше контрольной точки
Ширина контейнера Нет (автом.) 750px 970px 1170px
Класс префикса .col-xs- .col-sm- .col-md- .col-lg-
# колонок 12
Ширина колонки Авто 60px 78px 95px
Промежуточная ширина 30px(15px) на каждой стороне колонки
Вкладка Да
Отступ Да
Выравнивание колонки Да

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

  • Сетки — заранее заданные размеры колонок, готовые к использованию (например, ширина колонки 140px относится к классу.col-md-2)
  • Шаблоны — Фиксированный или резиновый шаблон документа.
  • Типографика — Описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты и т. п.
  • Медиа — Некоторое управление изображениями и видео-роликами.
  • Таблицы — Средства для оформления таблиц, вплоть до добавления функциональности сортировки.
  • Формы — Классы для оформления форм и некоторых событий происходящих с ними.
  • Навигация — Классы оформления для меню, вкладок, табов.
  • Алерты — Оформление подсказок, диалоговых окон всплывающих окон.

19 августа вышла первая альфа версия Bootstrap 4.


Оставить комментарий