Bootstrap 3 официально еще не выпущен, но вы можете загрузить последний код с https://github.com/twitter/bootstrap/archive/3.0.0-wip.zip. Вы также можете скомпилировать документы для проверки различий, см.: Скомпилировать Twitter bootstrap 3 документа (Как сделать)?.
Выпущен Bootstrap 3 RC1.
Bootstrap 3 от Twitter не будет обратно совместим с версией 2, поэтому миграция всегда будет болезненной.
Bootstrap 3 от Twitter будет иметь гибкую сетку (по умолчанию), поэтому он также поможет создавать ваши шаблоны версии 2 с гибким макетом. Другие важные изменения:
- TB3 будет в первую очередь мобильным
- Нет поддержки IE7 и Firefox 3.x
- Нет отдельного адаптивного CSS-файла.
Читайте также: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/
Мне нравится ваша идея сделать миксин для миграции. Bootstrap 3 в Twitter определяет три сетки: крошечную сетку для телефонов (‹480 пикселей), маленькую сетку для планшетов (‹768 пикселей) и средне-большую сетку для Destkops (>768 пикселей). Префиксы классов строк для этих сеток: «.col-», «.col-sm-» и «.col-lg-». Сетка среднего размера будет располагаться ниже ширины экрана 768 пикселей. То же самое относится и к маленькой сетке размером менее 480 пикселей, а крошечная сетка никогда не складывается. За исключением старых телефонов, которые всегда будут складывать элементы (сначала мобильный дизайн).
Bootstrap 2 от Twitter определяет точки останова на 480px, 768px, 980px и 1200px. Разрешение ниже 768 пикселей всегда будет плавным.
По этой причине «старый» span* не будет таким же, как col-* или col-lg-*. Таким образом, замена имен классов в ваших шаблонах даст вам лучшие результаты. Но если посмотреть на такой пример, как http://examples.getbootstrap.com/jumbotron/index.html вы найдете класс col-lg-* вместо прежнего класса span*. Это даст вам возможность создать миксин для span* с теми же стилями, что и col-lg-* в данном случае.
Адаптивные функции
Когда вы начинаете миграцию, вы также должны решить, использовать адаптивные функции или нет. Bootstrap 3 больше не имеет отдельного адаптивного CSS-файла.
Нет адаптивных функций. Кто не хочет иметь адаптивные функции, должен использовать префикс «.col-» для классов строк. Эта сетка никогда не будет складываться. Вам также нужно будет установить для grid-float-breakpoint значение 0. При использовании Less точка @grid-float-breakpoint будет определена в variable.less. Имейте в виду, что другие части, такие как формы и модальные окна, также используют @grid-float-breakpoint. См. также: http://bassjobsen.weblogs.fm/compile-twitters-bootstrap-3-without-responsive-features/
С адаптивными функциями В большинстве случаев вы будете использовать адаптивные функции. При миграции вам нужно выбрать между «.col-sm-» и «.col-lg-», чтобы заменить ваши старые префиксы «span». «col-lg-», как сказано выше, скорее всего, даст вам то же поведение, что и раньше. «col-lg-» будет располагаться ниже 768 пикселей. Также в этом случае рассмотрите точку останова grid-float. Точка останова grid-float-breakpoint по умолчанию составляет 768 пикселей.
Примечание: на данный момент TB2.3.2. был заменен на Bootstrap 3 RC1 на основном сайте. Поэтому подумайте о том, чтобы начать с TB3 с самого начала. См. также http://examples.getbootstrap.com/grid/ для получения дополнительных примеров сеток.
Связанные вопросы и многое другое:
Также прочитайте этот ответ https://stackoverflow.com/a/17977432/1596547 от @skelly содержит две полезные ссылки:
http://bootply.com/bootstrap-3-migration-guide
Инструмент миграции Bootstrap в разработке: https://github.com/iatek/bootstrap-migrate
person
Bass Jobsen
schedule
26.07.2013
