Этот небольшой обзор предназначенный тем, кто хочет быстро перевести свой сайт на новый бутстрап.
На днях вышла третья версия этого замечательного фреймворка, и, естественно, сразу захотелось посмотреть, как будут выглядеть сделанные на второй версии проекты, если просто поменять 2-ю на 3-ю. Оказалось что никак. Всё расползлось, разъехалось и кое-что перестало работать.
После чего захотелось всё быстренько поправить. И вот, что из этого получилось, читаем дальше.
Итак, первое нововведение — новый bootstrap не переопределяет стили элементов по-умолчанию, как это было раньше. С одной стороны, это, в принципе, правильно, потому что у него в стилях было куча !iportant и он навешивался на практически все теги, поэтому, если какой то input казался чересчур высоким, то приходилось переопределять и не всегда это было удобно.
Но, скорее всего, именно за эту особенность bootstrap многие и полюбили: без лишних телодвижений — подключил библиотечку и страница преобразилась.
Теперь всё с точностью до наоборот: никакой самодеятельности, хочется красивенький input с синей подсветкой, — нужно прописать в нем соответствующий класс.
<input class="form-control" type="text" />
Нужен стильный заголовок страницы, оборачиваем его так:
<div class="page-header">
<h1>Блог Васи <small>Только умные мысли</small></h1>
</div>
Кнопки
Убран класс .btn-inverse. Теперь придётся выбирать ему замену или писать что-то своё.
Класс .btn теперь тоже не имеет собственного оформления, и везде, где была обычная кнопка теперь обязательно нужно добавить btn-default, чтобы она обрела подобающий кнопке вид.
Классы, отвечающие за размеры кнопок, полей ввода и well-ов, обрели более лаконичные названия. Например, вместо btn-small стало btn-sm:
<input class="btn btn-default btn-sm" type="submit" />
<span class="well well-lg"></span>
Стоит заметить, что размер можно назначать сразу группе элементов и это значительно удобней и логичней, чем, например, на каждую кнопку по-отдельности.
Темы
Теперь в бутстрапе появилось такое понятие как темы. Сразу в комплекте идёт файл bootstrap-theme.css, который незначительно переопределяет внешний вид. Его можно использовать как основу для создания собственных тем, хотя, нужно признать, что он пока далеко не полно покрывает все визуальные стили. Созданием собственной темы можно заняться и с помощью веб-интерфейса на сайте фреймворка, где все стили удобно сгруппированы.
В предложенной же «теме по-умолчанию» на первый взгляд не понравилось то, что кнопки при наведении практически никак не реагируют, в то же время, без темы .btn-default, можно сказать, вообще «никакого цвета». К счастью, это легко переопределяется в bootstrap-theme.css
/* Переопределяем цвет кнопки */
.btn-default {
text-shadow: 0 1px 0 #fff;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%);
background-repeat: repeat-x;
border-color: #e0e0e0;
border-color: #ccc;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
}
/* Переопределяем цвет кнопки при наведении */
.btn-default:hover {
background-color: gray !important;
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(gray));
background-image: -webkit-linear-gradient(top, #ffffff, 0%, gray, 100%);
background-image: -moz-linear-gradient(top, #ffffff 0%, gray 100%);
background-image: linear-gradient(to bottom, #ffffff 0%, gray 100%);
border-radius:3px;
}
Тулбары
Тут тоже все немного усложнили. Вместо рабочего старого варианта:
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<div class="container" >
<a href="/" class="pull-left navbar-brand">Название</a>
<ul class="nav pull-left">
</ul>
</div>
</div>
</div>
вот такой новый
<div class="navbar navbar-fixed-top navbar-inverse" style="">
<div class="navbar-inner" >
<div class="container" >
<a href="/" class="pull-left navbar-brand" >Название</a>
<ul class="nav navbar-nav pull-left">
</ul>
</div>
</div>
</div>
Обратите внимание на класс .navbar-nav, который теперь должен сопровождать класс .nav
Диалоги
Диалоги теперь тоже усложнились. Было:
<div class="modal hide fade " style="width:400px; margin-left:-200px; z-index:1000000;">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button><h3>Галерея</h3>
</div>
<div class="modal-body" style="width:380px; height:250px;"></div>
<div class="modal-footer"><div class="btn-group">
<span class="btn yes btn-primary" data-dismiss="modal">Вставить</span>
<span class="btn cancel btn-danger" data-dismiss="modal">Закрыть</span>
</div>
</div>
</div>
Стало:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Вставка кода</h3>
</div>
<div class="modal-body" ></div>
<div class="modal-footer">
<div class="btn-group">
<span class="btn yes btn-primary" data-dismiss="modal">Вставить</span>
<span class="btn cancel btn-danger" data-dismiss="modal">Закрыть</span>
</div>
</div>
</div>
</div>
</div>
Тут разработчики действительно постарались и диалоги стали чуть менее глючными и более логичными, особенно в плане управления размерами диалогового окна.
Сетка
Сетку основательно переделали. Наверно, это самое существенное изменение в фреймворке, обнаружив которое, в некоторых проектах, можно только недоумённо развести руками — больше нет фиксированных размеров, признаётся только динамическая ширина столбцов. Классы разметки, отвечающие за ширину колонок, .span2, .span3 и т.д. заменены на соответствующие .col-md-2, .col-md-3…
Картинки
Больше нет класса img-polaroid. Вместо него можно использовать img-thumbnail
Иконки
Иконки самого bootstrap теперь реализованы шрифтом, а не спрайтами. Вместе с этим изменены и названия классов, которые теперь все придётся заменить.
<i class="icon-pencil"></i>
надо писать
<i class="glyphicon glyphicon-pencil"></i>
Если же используется Font-Awesome, то, в принципе, ничего менять не нужно и, к счастью, всё продолжит работать по-старому. Возможно, это хороший повод подключить этот замечательный шрифт, благо, запас иконок у него определённо богаче.
Badge
Если кто-то пользовался разноцветными, то теперь их нет от слова совсем. Вместо этого бейджи подстраиваются под цвет элементов и по-умолчанию в большинстве случаев они просто серые. Ради цветов придётся бейджи заменить на метки (.label)
Пожалуй, это все, что бросилось в глаза в первом приближении.
Полезные ссылки
— Справка отличий при миграции (англ.)
— Веб-интерфейс настройки стилей bootstrap
Автор: Alex10
