Вышла новая версия css framework Bootstrap 3

Иконка BootstrapВесь мир разработчиков сайтов кипит — вышла новая версия знаменитого css framework Tweeter Bootstrap 3. Эта версия готовилась почти 9 месяцев и был полностью переработан весь фреймворк.

В версии 3 довольно много измененией. Я уже поигрался с ним на локальной машине и в принципе мне понравилось.

Самое главное изменение в том, что теперь Bootstpap 3 — самостоятельный OpenSource продукт и не имеет отношения к Tweeter. Разработчики создали отдельную компанию и отдельный сайт.

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

Заодно убрали поддержку старых браузеров: Microsoft Internet Explorer 7 и Mozilla Firefox 3.6. Давно пора.

Сетка в Bootstrap 3

Глобалное изменение произошло с сеткой. Теперь все шаблоны будут адаптивными по умолчанию, а для того, чтобы отключить эту адаптивность, придется делать некоторые телодвижения. Кроме того, классы spanN заменили на 4 разных классов, которые будут работать в зависимости от ширины экрана: col-xs-*, col-sm-*, col-md-*, col-lg-*. Вместо звездочики нужно подставить цифру от 1 до 12. Суффикс xs предназначен для телефонов с разрешением до 768 пикселя (ширина контейнера будет авто), sm — для планшетов до 992 (ширина контейнера будет 750 пикселя), md — для десктопа (ширина 970 пикселя) и  lg — для больших машин (ширина 1170 пикселя).

Блочная модель претерпела изменения — везде используется box-sizing: border-box. Так что для подключения bootstrap 3 к старым проектам просто не получится. Придется основательно работать руками и головой, поскольку все разлезется и вам не удастся просто заменить классы ячеек на новые (пробовал уже лично).

Очень жаль, что не сделали на выбор более мелкие сетки, а то часто хотелось бы более мелкие внутренние разбивки элементов по дизайну. Ну и ладно, придется делать руками.

Javascript в Bootstrap 3

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

Иконки

Если в старой версии был спрайт с 40 иконаками, то сейчас подключен целый шрифт Glyphicons, который вроде платный, но для Bootstrap 3 сделали бесплатным. Изменили и классы для иконок: glyphicon и glyphicon-Название_иконки. Старый стиль мне больше нравился. Ну да ладно, буду подключать шрифт Font Awesome, тем более что есть специальные он-лайн сервисы, которые дают возможность скачать кастомизированный шрифт только с нужными иконками, например этот — fontello.com.

Элементы оформления

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

Кстати, сайт с бесплатными темами http://bootswatch.com/ уже обновил свои темы под последнюю версию bootstrap, старые темы пока доступны в архиве.

Ссылка на основную публикацию