Написание Twitter Bootstrap с обновлением до версии v3

Как вы могли бы написать новое приложение, используя bootstrap 2.3.2, если вы хотите сделать путь обновления максимально безболезненным?

Например, я знаю, что классы span- и col- уходят, поэтому я бы создал пользовательский класс меньшего класса для каждого из этих классов, в котором есть mixin этого определения, или создайте макрос на моем языке шаблонов для вывода имени класса вместо его непосредственного использования.

Кроме того, существует ли руководство по перенастройке с загрузкой 3? Я не смог найти его.

Итак, какие шаги вы предпримете, чтобы облегчить обновление?

Ответ 1

Bootstrap 3 официально не выпущен, но вы можете загрузить последний код из https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip. Вы также можете скомпилировать документы для проверки различий, см.: Скомпилировать загрузку Twitter 3 документов (как)?.

Bootstrap 3 RC1 уже выпущен.

Twitter Bootstrap 3 не будет обратно совместим с версией 2, поэтому миграция всегда будет болезненной.

Twitter Bootstrap 3 будет иметь флюидную сетку (по умолчанию), так что это поможет создать ваши шаблоны версии 2 с жидким макетом. Другие важные изменения:

TB3 сначала будет мобильным.
Поддержка IE7 и Firefox 3.x
Отсутствует отдельный отзывчивый CSS файл.

Мне нравится ваша идея создания микса для миграции. Twitters Bootstrap 3 определяет три сетки: крошечная сетка для телефонов (< 480px), небольшая сетка для планшетов (< 768px) и сетка Medium-large для Destkops ( > 768px). Префиксы класса строк для этой сетки: ".col-", ".col-sm-" и ".col-lg-". Средняя сетка будет располагаться ниже ширины экрана 768 пикселей. Точно так же Маленькая сетка ниже 480 пикселей, а крошечная сетка никогда не складывается. За исключением старых телефонов, которые всегда будут складывать элементы (мобильный первый дизайн).

Twitters Bootstrap 2 определяет точки останова на 480px, 768px, 980px и 1200px. Макет всегда будет ниже уровня 768px.

По этой причине "старый" span* не будет таким же, как col-* или col-lg-*. Таким образом, замена имен классов в ваших шаблонах даст вам лучшие результаты. Но, глядя на пример типа http://examples.getbootstrap.com/jumbotron/index.html, вы найдете класс col-lg-* вместо прежнего класса span*. Это даст вам возможность создать mixin для span * с теми же стилями, что и col-lg- *.

Отзывчивые функции

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

Отсутствие функций для поддержки Кто не хочет иметь обязательные функции, должен использовать префикс ".col-" для ваших классов строк. Эта сетка никогда не будет стекаться. Вам также нужно будет установить точку останова с сеткой-float-точкой равным 0. При использовании Меньше @grid-float-breakpoint будет определено в переменных .less. Имейте в виду, что другие части, такие как формы и модалы, также используют @grid-float-breakpoint. См. Также: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/

С учетом функций В большинстве случаев вы будете использовать отзывчивые функции. При миграции вы должны выбирать между ".col-sm-" и ".col-lg-", чтобы заменить старые префиксы "span". "Col-lg-", как сказано выше, даст вам, скорее всего, такое же поведение, как и раньше. "col-lg-" будет располагаться ниже 768px. Также в этом случае рассмотрим точку останова с плавающей точкой. По умолчанию точка с плавающей точкой по умолчанию равна 768 пикселей.

Примечание: в настоящий момент TB2.3.2. был заменен Bootstrap 3 RC1 на главном сайте. Так что начните с TB3 с самого начала. См. Также http://examples.getbootstrap.com/grid/ для получения дополнительных примеров сеток.

Связанные вопросы и многое другое:

Также прочитайте этот fooobar.com/info/29606/... ответ от @skelly, он содержит две полезные ссылки:

http://bootply.com/bootstrap-3-migration-guide

Инструмент миграции Bootstrap в работах: https://github.com/iatek/bootstrap-migrate