Как изменился Twitter Bootstrap 3 по версии 2.3.2?

Я сам изучаю разницу. До сих пор я придумал:

span is now col :- there are three types of col ie .col-    .col-sm-    .col-lg- for phone, tablet and pc respectively. 

additional class 'row'

Чем больше различий? от людей, которые уже сделали исследование.

Ответ 1

Bootstrap 3 предназначен для мобильных устройств.

  • Отброшено поддержка IE7 и FF3.6.
  • Стандартный и отзывчивый CSS объединены в один файл.
  • Переименованные переменные: переименовать переменные для использования тире вместо camelCase. Например, теперь @body-bg вместо @bodyBackground
  • Больше @blue, @orange, а не его @бренд-первичный, @бренд-успех и другие. Затем они назначаются на основе каждого компонента (например, @state-warning-text, @btn-background-primary и т.д.).
  • Добавить изображение сетчатки сетчатки с .img-retina()
  • Добавлены новые переменные: - Изменить @component-active-bg и настроить активные состояния навигационных таблеток, выпадающих меню и т.д.

Перестроить сетчатые системы, чтобы сделать их текучими и подвижными в первую очередь.

  • Удалена отдельная система, контейнер и макет жидкостной сетки
  • Новая единая сетчатая система использует .row(проценты не пиксели), (добавление по краю) и размер окна: border-box, теперь.
  • Смещения сохраняются на 100%.
  • Вместо .span * и .offset *, мы теперь используем .col- * и .col-offset- *, соответственно.
  • Используйте .col- * классы для небольших устройств (смартфонов). И используйте классы .col-sm- * для небольших устройств (планшетов)
  • Добавить классы .col-push- * и .col-pull- * для упрощения упорядочивания столбцов.
  • Удалить выделенные классы сетки таблицы.
  • Рекомендуется использовать "max-width" вместо "width" для всех экземпляров .container, чтобы предотвратить некоторые проблемы с контейнерами в таких компонентах, как navbars.

Кнопки

  • Серая кнопка по умолчанию требует двух классов - class= "btn btn-default".
  • Выпало .btn-inverse

Формы:

  • Удалить ввод-добавление и ввод-добавление для единственной .input-group
  • Выпадающий .form-search
  • Горизонтальные формы теперь мобильны, то есть при < 768px, элементы сложены. Помимо этого элементы перемещаются и отображаются бок о бок.
  • Флажки и радио теперь требуют дополнительных
  • Вместо .radio.inline вам теперь нужен только один класс .radio-inline для прямого использования на

Иконки

  • Преобразуйте в Glyphicons v1.7 @font-face и оставьте старые PNG.
  • Все классы начинаются с .glyphicon- вместо .icon -

Labels: -

  • Этикетки-рефактории масштабируются с их родительским размером шрифта
  • Отбросил .label-inverse

Блок героев для Jumbotron

  • Класс изменен с .hero-unit на .jumbotron
  • Более легкий шрифт для заголовков
  • Увеличить размер шрифта в отзывах.

Navs и Navbars

  • Удалить параметр .nav-list. Заменяется новым компонентом .list-group.
  • Поддержка переноса .navbar-search
  • Перестроить стили навигационной панели по умолчанию и ее подкомпонентов:
  • Отключенные меню (те, которые прикреплены к фактическому меню, а не индикаторы) были удалены, поэтому выпадающие меню сидят на краю навигационной панели.
  • Вертикальные разделители Navbar были добавлены в smidge, что означает, что они не расширяют всю высоту навигационной панели.
  • На навигаторах больше нет теней или градиентов.
  • Высота навигатора увеличилась с 44 до 62 пикселей для мобильных устройств и 50 пикселей для настольных компьютеров.
  • Удалено .navbar-inner и перемещено соответствующие стили в .navbar
  • Изменено .navbar > .nav на .navbar-nav
  • Измените .btn-navbar на .navbar-toggle
  • Изменено .brand.navbar-brand

Dropdowns: -

  • Удалите подменю в раскрывающихся меню.
  • Удален .nav-заголовок и заменен на .dropdown-header

модальности: -

  • Больше не требуется использовать .hide
  • Возвращает .modal-open на теле (так что мы можем прокрутить там прокрутку)
  • Добавляет несколько дополнительных уровней разметки (а именно .modal-dialog и .modal-content), поэтому мы можем прокручивать весь модальный, а не переполнять раздел в модальном формате.
  • Связанный,.modal теперь является оберткой, а .modal-content - сам модальный. Это значит, что мы все еще можем использовать положение: fixed;, но делаем модальное относительно позиционированное так, чтобы прокрутка перемещала весь модальный, а не что-то с ним.
  • Добавлен заголовок .modal-title для более последовательного и полезного таргетинга содержимого заголовка (ранее это была просто и селекторная производительность, которая была втянута).

Carousel: -

  • Редизайн! Более легкие стили для предыдущего и следующего элементов управления, а также заголовки каруселей.
  • Обновить требуемую разметку для элементов управления карусели. Класс .carousel-control теперь требует другого элемента внутри него для предыдущих/следующих символов. Эти символы теперь являются значками Glyhpicons для улучшения стиля и позиционирования в браузерах и устройствах. Индикаторы теперь выровнены по середине.
  • Подписи усилены как необязательные и по умолчанию скрыты в мобильных представлениях, а затем отображаются для видовых экранов > 768 пикселей.

Вышеприведенный список предназначен для обычного программиста. Предыдущий ответ подходит для лучших программистов, чем я.

Ответ 2

Примечание. В некоторых случаях мне очень важно написать полный ответ здесь в SO, но в этом случае я не думаю, что информация из GitHub исчезнет, ​​поэтому я выбрал чтобы предоставить этот короткий ответ, при этом вся информация находится всего в 1 клике.

Из Блог Bootstrap:

Что изменилось??

С более чем 1 600 транзакциями, ~ 72 000 дополнений/удалений и ~ 300 файлов изменились, все изменилось. Мы добавили функции, удалили функции и очистили намного больше. v3 pull request на GitHub имеет все детали, которые вам понадобятся для полного списка изменений и некоторых полезных советов по миграции.