Переходим на Bootstrap 3

и хотя сейчас всегол ишь RC1 я с большим любопытством перелажу на 3 версию, хотя кажется что ничего особенного там не изменилось.

Во первых теперь у них нормальный домен:

http://getbootstrap.com/

Причем со старого домена теперь bootstrap не качается, а качается только с нового сайта.

Ну и чудно !

В скачанном архиве видим по сути всего 2 файлика (видимо конструктор пока не работает у них). Иконки куда-то дели тоже.

Как итог архив еще боьше упростился и мне это нравится:

• bootstrap.min.js
• bootstrap.min.css

CSS: 67002 байта

JS: 27221

И точно, Bootstrap  до RC2 отключили сборщик.

Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the compiled CSS and JavaScript. Hang tight!

Самое важно, как сильно покорежит проект на живую, если заменить 2 на 3 версию.

Итак ставим.

И о чудо.. покорежились только кнопки от ShareThis.

Думаю к RC2 напишут что и где надо лечить.

Вообще что-то случилось с расчетом высоты в новом Bootstrap.

Кто переходил на Bootstrap 3 — пишите что проиходило.

Иконки Bootstrap 3

Насчет иконок. Теперь иконки подключаются как шрифт. Странное решение, но я не технарь, и поэтому пробую на зуб новые иконки.

Для этого идем на http://glyphicons.getbootstrap.com/

Скажу честно что нынешняя реализация иконок стала сильно похожа на Kickstart HTML CSS framework, который я так нежно любил.

Скачиваем архивчик и папку fonts копируем в папку с проектом рядом с CSS.

А чтобы подключить шрифты подключаем CSS прилагаемый в архивчике.

bootstrap-glyphicons.css

Мой проект не использует LESS, мой проект использует Stylus. Мне кажется он намного приятнее на вид. А вся та дополнительная функциональность меня пока не задевала.

Теперь мой шаблон содержит 3 замечательные строки на Jade:

script(src="bootstrap/js/bootstrap.min.js")
link(rel="stylesheet", href="bootstrap/css/bootstrap.min.css") 
link(rel="stylesheet", href="bootstrap/css/bootstrap-glyphicons.css") 

Да кстати, Jade — обалденная штуковина. Это такой CoffeeScript для HTML. =)

Ну все проверим иконки..

<span class="glyphicon glyphicon-ok"></span>

Все отлично и сразу заработало. Однако все же отделение иконок в отдельный проект немного смутило.

Как узнать Класс для конкретной иконки ?

Все просто. Идем опять же на http://glyphicons.getbootstrap.com/

Нажимаем Ctrl+Shift-c и видим новую панельку. Наводим курсор на иконку и видим соответствующий класс.

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

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

Кстати вот заметка про Bootstrap 3 на Хабре. http://habrahabr.ru/post/188014/ ,но там не написание ничего особенного.