Bootstrap
Bootstrap — css фреймворк для создания сайтов и
Bootstrap содержит в себе HTML и CSS шаблоны оформления для типографики, блоков навигации, кнопок,
Изначально 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 ) - Шаблоны — Фиксированный или резиновый шаблон документа.
- Типографика — Описания шрифтов, определение некоторых классов для шрифтов, таких как код, цитаты
и т. п. - Медиа — Некоторое управление изображениями и
видео-роликами . - Таблицы — Средства для оформления таблиц, вплоть до добавления функциональности сортировки.
- Формы — Классы для оформления форм и некоторых событий происходящих с ними.
- Навигация — Классы оформления для меню, вкладок, табов.
- Алерты — Оформление подсказок, диалоговых окон всплывающих окон.
Новая версия Bootstrap 4
19 августа 2015, вышла первая альфа версия CSS фреймворка Bootstrap 4.
Что обновили и добавили?
- Изменилась сетка
- Полностью переписаны JS компоненты
- Сменился прекомпилятор, LESS->SASS
- Переписаны и доработаны классы видимости
- Добавлены сервисные классы
- Полностью переписан normalize и вынесен в отдельный компонент
- Полностью прекращена поддержка IE8
- Добавились новые компоненты, к примеру Cards
- И многое другое с чем можно ознакомиться тут
Сравним с тем что используем сейчас
Я не стану разбирать все изменения и навороты, а остановлюсь только на том что сейчас режет глаз, а также на том что может вызвать проблемы.
Сетка
Сетка Bootstrap 3 не отвечает запросам текущей реальности, к примеру класс .col-xs-* предназначен для мобильных устройств и одинаково себя ведет в вертикальном и горизонтальном положении устройства. Это крайне неудобно потому что высота дисплея современных мобильных устройств в два с лишним раза больше его ширины, а если повернуть аппарат в горизонтальное положение, они меняются. но при этом .col-xs-* ведет себя одинаково и там и там, что ведет к отвратительному отображению страницы.
Сетка Bootstrap 4 основана на относительных единицах em и ведет себя несколько иначе. Во первых в новой сетке не четыре контрольных точки: lg, md, sm, xs; как ранее, а пять - xl, lg, md, sm, xs! Далее еще интереснее, добавление еще одной контрольной точки было бы бесполезно, если бы не устранилась проблема с сеткой на мобильных устройствах. В Bootstrap 4 сетка ведет себя следующим образом - мобильный телефон, к примеру iPhone 5/6/6 plus в вертикальном положении будут соответствовать классу .col-xs-*, а в горизонтальном .col-sm-*! И это огромная разница, это как раз то что не давало сделать адекватно адаптивные страницы на Bootstrap 3.
Классы видимости
Bootstrap 3 имел 8 основных и 2 дополнительных классов видимости - .hidden-*, .visible-*.
В Bootstrap 4 поменялась логика работы классов видимости, их количество и синтаксис написания. Во первых теперь нет .visible-*, в строю остался только .hidden-*. Во вторых изменился .hidden-*, теперь помимо приставки обозначающей контрольную точку .hidden-(xl,lg,md,sm,xs), добавилась еще одна -up/-down - .hidden-xl-up/.hidden-xl-down. Грубо говоря при указании .hidden-md-up мы говорим что элемент необходимо скрыть на пространстве md и выше, а до md элемент будет виден. Наглядно можно посмотреть тут .
Сервисные классы
В Bootstrap 3 были сервисные классы, можно было управлять текстом, его стилем и направлением, но не было очень важной вещи - нельзя было управлять отступами. В Bootstrap 4 ситуация поменялась, родробнее о сервисных классах тут .
Поддержка IE8
Грубо говоря поддержка IE8 и более старших версий закончилась еще при выходе Bootstrap 3, потому что IE8 не поддерживает работу с @media query. Но в релизе альфа версии Bootstrap 4 было прямо заявлено что поддержки IE8 не будет ни в каком виде, потому что помимо @media query он не поддерживает работу с относительными единицами измерения em.В общем если нужна поддержка IE8, апгрейд противопоказан =(.