Ответ 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 файл.
Читайте также: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
Мне нравится ваша идея создания микса для миграции. 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/ для получения дополнительных примеров сеток.
Связанные вопросы и многое другое:
- Изображения не реагируют по умолчанию в Twitter Bootstrap 3?
- сетка Twitter Bootstrap 3, изменение точки останова и удаление прокладки
- Загрузочный 3.0 Модальный
Также прочитайте этот fooobar.com/info/29606/... ответ от @skelly, он содержит две полезные ссылки:
http://bootply.com/bootstrap-3-migration-guide
Инструмент миграции Bootstrap в работах: https://github.com/iatek/bootstrap-migrate