31 августа 2013 в 21:23

Переход с bootstrap 2 на bootstrap 3

HTML*, CSS*


Этот небольшой обзор предназначенный тем, кто хочет быстро перевести свой сайт на новый бутстрап.

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

После чего захотелось всё быстренько поправить. И вот, что из этого получилось, читаем дальше.

Итак, первое нововведение — новый bootstrap не переопределяет стили элементов по-умолчанию, как это было раньше. С одной стороны, это, в принципе, правильно, потому что у него в стилях было куча !important и он навешивался на практически все теги, поэтому, если какой то 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">
    <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

Pagination

Раньше класс pagination можно было назначить на любой элемент, скажем на div. Сейчас только на ul
<div>
	<ul class="pagination">
		<li><a href="#">1</a></li>
           	<li><a href="#">1</a></li>
		<li><a href="#">1</a></li>
        </ul>
</div>

Пожалуй, это все, что бросилось в глаза в первом приближении.

Полезные ссылки

Справка отличий при миграции (англ.)
Веб-интерфейс настройки стилей bootstrap
Автоматический преобразователь разметки с 2-й на 3-ю версию bootstrap (спасибо muhas за ссылку)
Александр @Alex10
карма
75,0
рейтинг 0,0
Full-stack Web Developer
Похожие публикации
Самое читаемое Разработка

Комментарии (25)

  • +13
    Добавьте, пожалуйста, в пост bootstrap3.kissr.com
  • +5
    Это самое беспомощное и бесполезное описание одного из ключевых новшеств — новой адаптивной сетки в bootstrap3. Автору низачот.
    • +4
      Исключительно академического интереса ради: где Вы в статье нашли описание сетки? )
      • 0
        Про сетку ни слова а зря. Я привык к старой сетке и пришлось убить пару-тройку часов (особено на понимание размеров и padding) на разборки с новым бутстрапом. Как бы стремно не выглядела нотация col-xs-1 col-sm-1 col-md-1 col-lg-1, но как инструмент очень удобно и мощно. За второй бутстрап цепляться точно не стану.
        А насчет тем я убедился, что проще взять Less и добивать по собственномку вкусу готовые контролы.
        • +6
          Я думаю, что дзену бутстрапа стоило бы не одну статью посвятить. И хорошо бы кто-то поопытней взялся за это благое дело на хабре… Тем более, что в новой версии действительно уделили много внимания унификации нотации и в целом более целостно всё изнутри смотрится. Теперь нужно перестраивать стереотипы под новые возможности )
      • –1
        Если вы невнимательны, нажмите ctrl-f и поищите на этой странице по слову «Сетка». Вы, внезапно для себя, обнаружите целый абзац *ирония*:

        «Сетку основательно переделали. Наверно, это самое существенное изменение в фреймворке, обнаружив которое, в некоторых проектах, можно только недоумённо развести руками — больше нет фиксированных размеров, признаётся только динамическая ширина столбцов. Классы разметки, отвечающие за ширину колонок, .span2, .span3 и т.д. заменены на соответствующие .col-md-2, .col-md-3…»

        Что вводит читателя в заблуждение, т.к. новые классы вовсе не замена старым, они работают по другому.
        • 0
          Хм, если здесь что-то говорится о функциональном предназначении новой сетки, то что-то не так с русским языком. И чтобы вывести из «больше нет» то, что новые классы — это именно прямая замена старым и работают они точно так же, видимо нужно проявить воображение…

          Впрочем, ввиду столь вольных интерпретаций, моё академическое любопытство можно считать удовлетворённым…
          • +1
            Теперь и мне интересно, как ваше воображение трактует следующее — «Классы разметки, отвечающие за ширину колонок, .span2, .span3 и т.д. заменены на соответствующие .col-md-2, .col-md-3…»?

            Я понял так — одни классы из вредности заменили на другие путем переименования. Что опять же, вводит читателя в заблуждение.
  • +2
    Сам на днях занимался переводом проекта на 3ю версию. Впечатления неоднозначные. Есть плюсы, есть вещи которые я никак не могу взять в толк.

    Может кто-то из присутствующих объяснит на кой… убрали .control-group? Ну т.е. вроде как оставили (.form-group), хотя выглядят новые «горизонтальные» поля формы совсем не горизонтально.
    • 0
      Я, честно говоря, вообще не понял, зачем теперь нужны какие-то доп.классы к контролам кроме собственно оформления.
      Новая сетка поддерживает вложенность, поэтому многие схемы теперь делаются просто указанием ширины столбцов для разных версток.
      То есть .row, .col-xx-xx теперь два самых главных ваших (вра|дру)га (нужное выделить)
  • 0
    Спасибо, подожду 4-го -)
  • +8
    Какие то противоречивые изменения:
    вместо «btn-small» стало «btn-sm»
    Однако, вместо «icon-pencil» надо писать «glyphicon glyphicon-pencil»
    Там 3 байта сократили, здесь 15 добавили. И в обоих случаях ухудшилась читаемость.
    • –4
      не в байтах счастье, а в унификации и удобстве. Нет необходимости помнить, когда sm, а когда small
      • +7
        В случае иконок я, конечно, могу оправдать это тем, что удобней стало разработчикам фреймворка, вероятно дело даже не только в удобстве, но вот "glyphicon glyphicon-xxx" — это определённо неудобно в использовании. Я бы склонился к лаконичной версии "icn icn-xxx", раз уж button сократили до btn — было бы вполне логично, однообразно и таки удобно!
        • +3
          Подозреваю, что это результат выделения иконок в отдельное дополнение (до релиза так и было). И сейчас (в теории) можно подключать несколько разных иконочных шрифтов без конфликтов друг с другом. Пусть каждый занимает свой «namespace», а не общий icn.
  • +3
    Какие-то танцы с бубном.
    Я выбрал бутстрап именно потому, что я как разработчик не хочу заниматься дизайном и мне проще взять готовый шаблон, бутстрап.
    И это отлично. Для создания прототипов — то, что надо, не нужно нанимать никаких дизайнеров и отлаживать сайт неделями для разных версий браузеров и пр.
    А сейчас смотрю на статью глазами разработчика и думаю — нанимать теперь дизайнера, чтобы он этом коде копался?
    Где профит?
    • +1
      Ну, а сейчас еще лучше. Будет больше готовых тем.
    • 0
      Не, там всё заточено как раз на программиста: всякого накидал и уже красиво. Добавили AngularJS и совсем хорошо стало.
  • +2
    + из того, что встретилось мне при переходе

    1. В тройке из dropdown еще ушло submenu (которая позволяла делать подменю)
    2. Breadcrumbs стали проще, не нужно явно указывать divider
    3. Изменена пагинация (тоже стала проще)
    4. Убрана возможность позиционирования вкладок (nav nav-tabs) по правому краю, левому краю, как это можно было в 2.3.x (ниже просто не помню была поддержка или нет)
    • 0
      Разработчики пояснили, что вложенные меню не соответствуют духу современного адаптивного и мобильного дизайна, что не мешает вернуть эту фишку буквально в пару строк css кода. Гугл знает как (с)

      • 0
        Спасибо, я почему-то так и подумал, что не стоит их ожидать в будущем :)
  • +5
    Вот за явный form-control на инпутах большое спасибо.
    Вообще, имхо, третий бутстрап выглядит лучше второго — не просто как «тема оформления», а как фреймворк для создания собственного дизайна.
  • 0
    На днях вышла третья версия этого замечательного фреймворка

    «Сто лет» уже прошло, да простят меня за ворчание. В целом фреймворк стал чуть более фреймворком, и разметка стала куда умнее. Те, кто не понимает, почему например иконки глифа переименовали с icon на glyphicon, видимо никогда не использовали другие аналоги, по типу Font-Awesome. Ну вот как дизайнер — захотел я к примеру чтобы navbar-default был с круглыми краями, а navbar-inverse с квадратными: взял да описал на третьем бутстрапе. На втором пришлось бы сначала описать круглые края для navbar, а потом их отсутствие для navbar-inverse, что некоторые браузеры вообще вгоняет в ступор, при неправильно указанной последовательности (e.g. class="navbar-inverse navbar")
    • +2
      Потому что писать нужно не как хочется, а от общего к частному. Вы в курсе, что означает первая буква С в аббревиатуре CSS?
  • +1
    А кто-нибудь, случайно, не в курсе, пофиксили ли разработчики несовместимость с jquery ui?

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